Question

我正在制作一个聊天应用程序，用户可以与多个用户聊天。我动态创建了多个聊天窗口。即，当用户点击在线用户时，会打开一个新的聊天窗口，但是我遇到了问题，在页面刷新时，动态创建的div已经消失，我不知道。我希望他们在那里。我该怎么办。这是我的jquery代码。

$(document).ready(function(){


        $(".shout_msg").click(function(){

            var id = $(this).attr('id');
            var name = $(this).text();
            //var myarray = [];
            var sender = "<?php echo $user_check?>";
            var receiver = name;

            var detect = detectClick(id);   //if a online user is clicked multiple times only chat window should be opened

            if(!detect){
                $('#chatboxcontainer').append("<div id = 'd-"+id+"' class = 'shout_box1'></div>");
                $("#d-"+id).append("<div id = 'h-"+id+"' class = 'header1'>'"+name+"'</div>");
                $("#h-"+id).append("<div id = 'c-"+id+"' onclick = 'Slide("+id+")' class='close_btn1'>&nbsp;</div>");



                $("#d-"+id).append("<div id = 't-"+id+"' class = 'toggle_chat1'></div>");
                $("#t-"+id).append("<div id = 'h2-"+id+"' class = 'header2'>Clear Conversation</div>");
                $("#h2-"+id).append("<div id = 'c2-"+id+"' onclick = \"Remove("+id+",'"+name+"')\" class='clear_btn1'>&nbsp;</div>");
                $("#t-"+id).append("<div id = 'm-"+id+"' class = 'message_box1'></div>");
                $("#t-"+id).append("<div id = 'u-"+id+"' class = 'user_info1'></div>");
                $("#u-"+id).append('<input name = "shout_message" id = "s-'+id+'" type = "text" placeholder = "Type Message Hit Enter" />');

                //alert(id);


                $.ajax({

                            url: "loadmessage.php",
                            type: "POST",
                            data:{
                                'sender': sender,
                                'receiver': receiver,
                            },

                            success: function(response){
                                var result = JSON.parse(response);
                                console.log("Result is " +result);
                                console.log()

                                for(var i in result){
                                    $("#m-"+id).append('<p class = "shout_msg">' +result[i]+ '</p>');
                                    $("#m-"+id).scrollTop($("#m-"+id)[0].scrollHeight);
                                }
                            }
                        });

                }
                else{
                    $("#s-"+id).focus();
                }




            $("#s-"+id).keypress(function(evt) {
                if(evt.which == 13) {

                    var msg = $("#s-"+id).val();
                    //msg = msg.replace(":)","<img src = 'smilenew.gif'/>");

                    var dt = new Date();
                    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

                    $("#m-"+id).append('<p class = "shout_msg" id = "'+count+'">'+sender+':'+msg+'<span class = "time">'+time+'</span></p>');



                    $.ajax({

                        url: "insertdatanew.php",
                        type: "POST",
                        data:{
                            'sender': sender,
                            'receiver': receiver,
                            'msg': msg,
                            'time': time
                        },

                        success: function(result){
                            if(result == 'Y')
                            alert("Successful insertion");
                        }
                    });


                    $("#m-"+id).scrollTop($("#m-"+id)[0].scrollHeight);
                    //count++;
                    $("#s-"+id).val("");


                }

            });

        });



    });

这是html代码

    <html>
      <body>
        <div id = "chatboxcontainer">
        </div>
      </body>
   </html>

Answer 1

如果您正在使用PHP构建页面，请为每个用户创建一个会话，并将用户数据保存到某处，这样当他们创建新窗口时，PHP会自动填写任何额外的div。< / p>

在页面刷新时保持动态创建的div

1 个答案: