How to stop jumping the content coming from Ajax.load methods?

Question

I have a chat function on the page. When two users are chatting with each other, I could not find a way to automatically load new messages user B on chat window of user A. That's why I used

<script type="text/javascript">

    $(document).ready(function(){

        $("#getBuddieContacts").load("ajax_getContactsList.php");
        $("#getFriendsRequestList").load("ajax_getMessages.php");

    });

    setInterval(function() {$("#getBuddieContacts").load("ajax_getContactsList.php");}, 5000);
    setInterval(function() {$("#getFriendsRequestList").load("ajax_getMessages.php");}, 5000);

</script>

PHP scripts returns the full chat (from 0 to latest) each time when script is loaded. (I don't know the technique of showing user B's sent message immediately on user A's chat screen). :(

The code works okay but whenever we try to copy / paste or select any text coming from ajax loaded files, the content reloads and seems like jumping on the screen (not jumping display wise, but behavior wise).

So, my question is, how can I make the changes so that the new message from user B can be displayed on user A screen or what technique should I use instead ?

Answer 1

I unfortunately don't have a copy-and-pasteable solution for you. The core of your problem, it seems, is that as the user is selecting text in the window, the next update removes the DOM element he had selected, and replaces it with a new one.

Given your current scheme, I would do the following:

1. Alter your text loading scheme to return incremental updates instead of the entire conversation. You might do this by having it also pass back a timestamp with each set of updates. The client stores the timestamp, and passes it to the server when requesting the next update. The server responds with a new timestamp and any new chat text.

2. Alter your client to add each new addition to the chat in its own div. This way, you're not removing the part of the conversation the user had selected from the DOM.

Alternately, in the javascript function that handles the response from the .php scripts, you could conceivably do something like this:

var newConversationText = "new conversation text here - get it from...  however you're getting it now";
var oldConversationText = $("#div-containing-conversation-text").html();

var diff =newConversationText.substring(oldConversationText.length);

var newDiv = $("<div>" + diff + "</div>");

$("#div-containing-conversation-text").append(newDiv);