Question

I have the following code to show a progress ajax icon and then run a bunch of javascript and then hide the progress icon.

When running this I don’t see the div#collapseExpandProgress become visible at all.

My guess is either:

1. It’s not showing at all
2. It’s showing and hiding immediately because the each() method works off the callback method

$("#expandAll").click(function (e) {
      $('#collapseExpandProgress').show();

      $(".treeclick", "#treegrid").each(function () {
        if ($(this).hasClass("tree-plus")) {
            $(this).trigger("click");
        }
    });

    $('#collapseExpandProgress').hide();

});

Any suggestion on what could be wrong here?

Answer 1

I don’t have a complete technical explanation, but I have experienced this before. It probably has something to do with the way javascript control flow works. Presumably because Javascript is single threaded, the DOM is not updated until after the synchronous part of your operation has completed.

I’ve also found that an animated gif may show but not animate in similar circumstances.

You can most likely get the gif to show like this:

  $('#collapseExpandProgress').show();

  window.setTimeout(function() {
      $(".treeclick", "#treegrid").each(function () {
        if ($(this).hasClass("tree-plus")) {
            $(this).trigger("click");
        }
      $('#collapseExpandProgress').hide();
    },50); // just some low number

However, I suspect it will not animate for the same reason it didn’t show in the first place, perhaps depending on the browser.