Question

I’m very new when it comes to programming so maybe this is a walk in the park for you guys.
I want to create a div with a .gif-image of a progress bar, where the div should only be shown when pressing a button to for example save some settings to the database.

This function is going to be used everywhere in the GUI and every time one a query is made towards the database. I’m coding with jQuery UI and I’ve been recommended to use ajaxStart() and ajaxStop(), but can’t quite figure out how to use it properly. The code below is just some code I wrote thinking I would be on the right track somehow, but most likely not.

—– Script —–

$(document).ready(function(){
      $("#progressContainer").ajaxStart(function(){
        $(this).html("<img src='ajax-progressbar.gif' />");
      });
      $(".clickForProgressBar").click(function(){
        $("#progressContainer").load("");
      });
    });

—– HTML —–

<button class="clickForProgressBar">Click here</button>
<div id="progressContainer"></div>

If someone could try and give me some tips on how to proceed I would be forever grateful.
If you at all could understand what I meant to begin with 😉

Answer 1

Here’s an outline of one way to do it.

First, since this is an application-wide policy, create an Ajax wrapper and use that wrapper for all your calls.

Next, within the wrapper, display the image before issuing the actual call to the server.

Finally, when the call returns (for any reason), hide the image before continuing.

One question to keep in mind is in how you want the image container handled. For instance, if it’s going to be in a div tag (as you pointed out above), you may want to pass the id of the div tag around as part of the call to ensure that different div tags or placements will still work. Alternatively, you could use a modal window that pops up over the content and displays the image. This will save you having to use a div tag and without making any assumptions about the layout of your page, although it may be more obtrusive (which can be a good thing depending on what you are doing).