jquery - How to apply selector on ajax loaded content -
i have refresh()
function, set called periodically way:
setinterval("refresh()", duration);
in refresh()
function, dynamically prepending content html table.
so have simple table:
<table> <tbody> <tr><td>original title</td><td>original date</td></tr> </tbody> </table>
that becomes new table:
<table> <tbody> <tr><td>new title</td><td>new date</td></tr> <tr><td>original title</td><td>original date</td></tr> </tbody> </table>
through action of refresh()
function:
function refresh() { var lastdate = $('.mytableclass > tbody > tr > td:nth-child(2)').first().text(); $.get("./my_url.html?lastdate="+lastdate+, function (data) { if( data.trim().length > 0 ) { $(data).prependto( $('.mytableclass > tbody') ).fadein('slow'); } }); }
(the my_url.html page returns simple <tr>....</tr>
line.)
everything works fine during first call refresh()
, , new content succesfully prepended table.
my problem after first call, when there no more new content add, following calls refresh()
keep prepending same content table.
so if let refresh being called 4 times, getting table :
<table> <tbody> <tr><td>new title</td><td>new date</td></tr> <tr><td>new title</td><td>new date</td></tr> <tr><td>new title</td><td>new date</td></tr> <tr><td>new title</td><td>new date</td></tr> <tr><td>original title</td><td>original date</td></tr> </tbody> </table>
i found out happens because lastdate
var never correctly updated new line's date, contains date original first line.
what missing here? how can new date ajax-prepended first <tr>
line of table ? way select table > tbody > tr ...
not compatible ajax-loaded stuff?
[edit] if it's worth something, using jquery 1.6.1.
you have change refresh function this.
var lastdate = $('.mytableclass > tbody > tr > td:nth-child(2)').first().text(); function refresh() { $.get("./my_url.html?lastdate="+lastdate+, function (data) { if( data.trim().length > 0 ) { $(data).prependto( $('.mytableclass > tbody') ).fadein('slow'); } }).done(function(){ lastdate = $('.mytableclass > tbody > tr:first > td:nth-child(2)').text(); }); }
you need use done() function, gets called after ajax request completed , it'll give latest date..
Comments
Post a Comment