jQuery - load data to variable, check data and update in DIV

Question

I make very, very simple intranet chat. I load every 2 sec data from URL to DIV. But I want (and I don't know how) load data to variable, compare data from DIV and if !=, update in DIV. And scroll to down "page" in this DIV. Please, help me stackoverflowers! :)

var chatInterval;

function chatLoad(){

    chatInterval = setInterval(function(){
        $('#chat-conversations').load('/AJAX/Chat.app');
    }, 2000);
}

Please provide more codes, and explain more – Mostafa Shahverdy Feb 12 '14 at 08:12 — Mostafa Shahverdy, Feb 12 '14 at 08:12

score 1 · Accepted Answer · answered Feb 12 '14 at 08:13

1

Instead of just loading it directly put it on a variable first and compare it. That's why I use .get instead of .load, .load loads the content directly into the element.

var chatInterval;
var chatContent = "";
function chatLoad(){
    chatInterval = setInterval(function(){
        $.get('/AJAX/Chat.app',function(data){
            if(data!=chatContent){
                $('#chat-conversations').html(data);
                chatContent = data;
            }
        })
    }, 2000);
}

answered Feb 12 '14 at 08:13

Edgar Griñant

599
1
12
27

Can you tell me how can I scroll to "new-end" of this div when I get new message? – Kuba Żukowski Feb 12 '14 at 08:34
I need to see an example of the response of `/AJAX/Chat.app` to answer the "new-end" question. You can edit your question with the example and I will update my answer, or just post a new question. – Edgar Griñant Feb 12 '14 at 08:53
This is new topic: http://stackoverflow.com/questions/21724757/auto-scrolldown-after-updte-div-content – Kuba Żukowski Feb 12 '14 at 10:11

score 1 · Answer 2 · edited May 23 '17 at 12:13

First of all you must understand that compare all data is bad idea, you just need check that user have new messages whatever. Also you must now about long polling and short polling good explanation.

Why its bad idea to compare all data? Because after a 5 minutes you will receive a BIG BIG bunch of data (performance).

Hor compare if you want:

var _current_data = null;
var interval = setInterval(function(){

  // your logic to receive data, we receive response from server
  if(!_current_data) _current_data = response;

  else if(_current_data != response){
    // Render logic (insert data into html tags and return html as string)
    $("div").html(render(current_data));
  }

}, 2000);

Yes, I know best way is save on server "update timestamp date" and when is changed get data to chat. — Kuba Żukowski, Feb 12 '14 at 08:32

score 0 · Answer 3 · answered Feb 12 '14 at 08:21

You can use ajax to get the latest posts without reloading the page as you said with the interval of 2 second.

    function getXmlHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        // code for IE7+, Firefox, Chrome, Opera, Safari

    }
    else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        // code for IE5 and IE6
    }
    else {
        alert("Browser doesn't support Ajax..!!");
    }

    return xmlhttp;
}

    function loadData() {

    xmlhttp = getXmlHttpRequest();
    if (xmlhttp !== null) {

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState < 4) {
                document.getElementById('your-div').innerHTML = "<img src = 'loader-animation.gif'/>";

            }
            else if (xmlhttp.readyState === 4) {
                var res = xmlhttp.responseText;
                if (res.trim() !== "error") {
                    document.getElementById('your-div').innerHTML = res;

                } else {
                    document.getElementById('your-div').innerHTML = "<img src = 'error.png' style='vertical-align:middle;'/>";

                }
            }
        }
        xmlhttp.open("POST", "data_loading_page.php", true);
        xmlhttp.send(null);

    } 
}

on data_loading_page.php (any media of you use php or jsp or anything) print your posts using a while. so whenever the function calls the php page then you'll get the updates;

call the script by

    setInterval(function() {
      loadData();
}, 2000);

jQuery - load data to variable, check data and update in DIV

3 Answers3