0

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 ?

sana
  • 410
  • 2
  • 6
  • 24
  • What is the return from the .php scripts? Is it the full text of the conversation, or incremental? – Aaron Averett Dec 03 '14 at 17:33
  • After running some queries, it returns chat text formatted inside DIVs.The script works okay. The full chat no matter latest or old, from 0 to latest is returned. – sana Dec 03 '14 at 17:35
  • So, after the chat text is loaded, you're removing the old chat text div from the DOM and replacing it with the fresh one, which contains the entire conversation? – Aaron Averett Dec 03 '14 at 17:41
  • Yes, you have got it correct. – sana Dec 03 '14 at 17:44

1 Answers1

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);
Aaron Averett
  • 896
  • 10
  • 12
  • Based on the description provided in the question append should do the trick as specified by @TheChafing above. If you can share the screen snapshot and describe the problem in that screen shot it will be more easy to understand and identify alternate solution. – Sariq Shaikh Dec 03 '14 at 18:42