I'm creating a dialog to show the status of a long running process. Basically, I want to create the dialog, and update the contents as the long running process executes. I'm still pretty new to jQuery/jQuery UI, so I'm probably doing something dumb, but I don't understand why the following does not work:
function updateStatus() {
$('#status').html("Interval status!");
$('#message').html("message status!");
}
...
var $updateDialog = $('<div id="updateDialog"></div>')
.html('<table><tr><td id="status">Status goes here ...</td></tr> <tr><td> </td></tr> <tr><td id="message">Message goes here ...</td></tr> </table>')
.dialog({
title: 'Update Progress',
modal: 'true',
buttons: { "OK" : function() {
$(this).dialog("close");
clearInterval(interval);
}
}
});
interval = setInterval(updateStatus, 1000);
When updateStatus gets called, I expect to see the <td> elements updated to the new values, but the content is not changed. If I do something like $('#status').html() and write it to the console, it shows that it is changed; but the change is not visible in the dialog.
However, if I completely replace the entire html() for the dialog, the contents of the dialog is visible.
$('#updateDialog').html('<table><tr><td id="status">Interval Status ...</td></tr> <tr><td> </td></tr> <tr><td id="message">Interval message ...</td></tr> </table>')
I'd rather use the more "surgical" approach of updating the individual elements if I can. Can somebody tell me what I'm missing here?