Getting the value of last div in AJAX request

Question

I'm building a small chat application to learn a bit about jquery and AJAX. It's all working great, but at the moment, the chatbox is grabbing the HTML of log.html on an interval with the following code:

function loadLog(){     
          $.ajax({
            url: "log.html",
            cache: false,
            success: function(html){    
                $(".chatbox").html(html); //Insert chat log into the #chatbox div
              },
        });
    }

Now if a user is trying to copy a line, it's bugging out because the html is getting refreshed every few seconds. So I would like to build a check that remembers the last known message and compares it to the last message in the log. If they don't match (a new message has appeared), only then will the browser refresh the html in the chatbox.

I'm quite new to AJAX and Jquery so I would like to ask you guys the following question: What would be the best way of comparing the last message in log.html and the last div in the chatbox div?

My theory would be to

success: function(html){    
            $(html).find(last(div));
          },

But i don't exactly know how to get the value of the last div.

I hope I explained the question well enough. Also, any ideas are welcome :)

P.S. This is an example of a line in log.html

<div class='msgln'>(4:40 PM) <b>Jeroen</b>: Welcome<br></div>

score 2 · Accepted Answer · answered May 02 '16 at 13:30

2

Use this way:

success: function(html){
  $(html).find(".msgln").last();
},

If that doesn't work, then you can make a fake element and access the last item:

success: function(html){
  $("<div />", {
    html: html
  }).find(".msgln").last();
},

answered May 02 '16 at 13:30

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 2 · answered May 02 '16 at 13:33

You can follow this

<div id=container>
    <div id=box1></div>
    <div id=box2></div>
    <div id=box3></div>
    <div id=box4></div>
    <div id=box5></div>
    <div id=box6></div>
</div>

jQuery Code

$(document).ready(function(){
   $('#container').children().last().attr('id');
});

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

You could:

a) Persist the data retrieved to a global variable - See here

b) Persist the data retrieved to HTML5 local storage - See here

and then either compare against the global variable or local storage and override it if it's new data.

It's better than finding the data every time you make the ajax call.

edited May 23 '17 at 10:28

Community

1
1

answered May 02 '16 at 13:43

Dom

2,275
3
24
34

Can you explain in what way it is better? Is it better in terms of performance or ease of use? – Alterlai May 02 '16 at 16:31
@Alterlai better in terms of performance. Since the data is stored and readily available, there is no overhead in searching through the DOM to find it. Especially since you're planning to perform the search every few seconds. If there are other processes occurring at the same time such as playing a GIF, it could put a strain on the browser and have visible side effects such as momentary freezes, or jittery animations. – Dom May 02 '16 at 17:38
Alright thanks for the explanation, I'll give it a shot! – Alterlai May 02 '16 at 19:20

score 0 · Answer 4 · answered May 02 '16 at 13:53

0

you can use

  $last_div = $(html).find("div").last();
  text = $last_div.text();

for reference see https://api.jquery.com/last/

answered May 02 '16 at 13:53

anjaneyulubatta505

10,713
1
52
62

Getting the value of last div in AJAX request

4 Answers4