How to use clearInterval() and then make changes to the DOM?
- by George D.
I have this code and the problem I have is that I want to stop the loop and then replace the text 'Done!' that comes from the sms-loader.php script with the "textnew" string. Problem is that the loop occurs one more time so the text in the div.checkstatus field is again replaced by the calling php script.
The strange thing is that I see the log message and again I get a new (and final) request, although the ordering is the opposite (first stop then replace text()) in my script. I need to understand why this is happening.
$(document).ready(function() {
var interval = "";
$('.checkstatus').each(function(){
var msgid = $(this).data('msg')
$this = $(this),
hid = $this.data('history'),
textnew = '<a href="sms-dstatus.php?id='+msgid+'&sid=' +hid+ '&keepThis=true&TB_iframe=true&height=430&width=770" title="Delivery Status" class="thickbox"><img src="../template/icons/supermini/chart_curve.png" alt="status" width="16" height="16" /></a>';
interval = setInterval(function() {
$this.load('../pages/sms-loader.php?id='+msgid);
// stop the loop
if($this.text()=='Done!'){
// stop it
clearInterval(interval);
console.log(textnew);
this.html(textnew); /// this line is the problem
}
}, 5000); // 5 secs
});
});
