XML to JQUERY, displays data, but loops contents

Question

I have some jquery code that loads the contents of a XML file generated by a JSP Servlet.

The idea is it pulls the information and then displays it, whilst refreshing every 1 sec.

The problem i have, is every time it refreshes it just adds the data back onto the old data, so it just loops out the same values:

Here is my code:

 <script> $(document).ready(function() { }); </script>

How can i get it to display once, then when it refreshes it, clears its self.

Thanks

tomasdev · Accepted Answer · 2011-03-02 16:02:37Z

1

Replace your line $('#tidm').append($(html)); with $('#tidm').empty().append($(html));

answered Mar 2, 2011 at 16:02

tomasdev

6,0011 gold badge35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DannyLane Over a year ago

If $(data).find('stock') returns more than one then the above code will clear the html in each iteration, resulting in only one stock being displayed. If only one stock is to be displayed then this solution will also work but I think its safe to assume that there will be more than one as there is a loop.

tomasdev Over a year ago

You are right, my mistake. But the .html() method should be outside the each loop. Performance FTW. (I haven't realized that before)

DannyLane Over a year ago

I did suggest putting the .html() to clear the element before the each loop. What would be more performant would be maintaining the html string accross loop iterations, and then at the end of the loop pass the entire html string to the .html() method (instead of appending on every iteration), also, creating a jQuery object from the html string is not required either, .html() takes a string just fine.

DannyLane · Accepted Answer · 2011-03-03 09:24:05Z

call:

$('#tidm').html(''); // .empty() is slightly faster

before your each loop, this will clear the old HTML

Edit: My initial answer was just to clear the html but some of the comments point out valid performance issues in the code from the original question. So, while the performance of the original code wasn't subject of the question I'm going to update my answer with what I believe would be more performant.

I havent tested this but the intention should be clear.

$(document).ready(function() { var $tidm = $('#tidm'); var html; setInterval(function() { $.get('Stocks', function(data) { html = ''; $tidm.empty(); // using empty instead of .html('') as suggested $(data).find('stock').each(function() { var $stock = $(this); var tidm = $stock.find("tidm").text(); var name = $stock.find("name").text(); var price = $stock.find("price").text(); var change = $stock.find("change").text(); html += '<p>tidm = ' + tidm + '</p>'; html += '<p>name =' + name + '</p>'; html += '<p>price = ' + price + '</p>'; html += '<p>change = ' + change + '</p>'; }); $tidm.html(html); }); }, 1000); // 1000 milliseconds = 1 second. });

If there are any other improvements that could be made or mistakes I've made let me know in the comments.

There you have a 2 issues of performance. a) You do an extra document.getElementById and jQuery-fy it; and b) html('') is less optimal than empty() (since what it's doing there is this.empty().append( value );)
@Tom There was no reference to $('#tidm') in the original code so I had to get the reference somewhere, rewriting the original code to pe more performant was outside the scope of the question imo. I've updated my answer to note that .empty() is faster than .html('') thanks :)

Collectives™ on Stack Overflow

XML to JQUERY, displays data, but loops contents

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related