Question

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?

Answer 1

It’s because you aren’t actually adding the TABLE to the DOM. You’re adding it as the html() of the DIV, which I don’t think is really the same thing. Once you’ve created your div, you should append it to the DOM (e.g. $(‘body’).append(whatever) ) and then you should append your table to the ‘whatever’ the same way.

Then it should work.