CODEWITHSUNDEEP
javascriptjqueryajax
Yusuf Ali Bozkır
Yusuf Ali Bozkır

Reputation: 37

When sending data with ajax, i want to create loading bar

I'm using Ajax with JQuery. I am sending data with ajax to return.php(for example).. When ajax sending data, i want to write to screen "loading..".

Upvotes: 0

Views: 419

Answers (4)

Pete Wilson
Pete Wilson

Reputation: 8694

In purely practical terms it's usually the case (in my experience) that the download part of an Ajax request takes less than a second, so it's hard for me to justify a more or less elaborate progress bar or similar: the user can't learn much from it. Plus maintaining and updating the progress bar every tenth of a second ,say, might demand a large fraction of the now-increased download time.

But the user surely deserves to know when (and why) he can't get a response to a button press because the download is in progress. You might want to consider blackening a small (like 24 x 24) colored image when you issue the request; and restoring its color when the request completes. Even better, take Dennis Hunink's suggestion to change the color of the submit button.

But all of that is mere practicality. It's fun to make a progress bar and even more fun to admire it when it's working. That alone makes the work worthwhile.

Upvotes: 3

Dennis Hunink
Dennis Hunink

Reputation: 583

A nice place to get the animation would be here

Then indeed, like @royinamir said, show/hide the animation. Give the animation an ID. Short example (using jQuery):

<div id="laoding">
<p>Loading data</p>
</div>

in the CSS:

#loading{
  display: none;
  background: url(images/icon_loading_ani.gif) no-repeat;//the url of your animated gif
  background-position: 0px center;
  min-height: 35px;
  padding: 5px 0 0 0;
}

and in jQuery:

$.ajax({
        type: 'get',
        url: url,
        data: 'ajax=1,
        beforeSend: function () {
            $('#get_data').show();
        },
        success: function (data) {
            $('#filter').show();
// do some other stuff
        }
    });

Upvotes: 3

Vivek Viswanathan
Vivek Viswanathan

Reputation: 1963

In that case, you could show a dialog - "loading" and in the callback of the ajax, you could hide the loading dialog. The showing & hiding of the dialog could be placed in a utilities so that it can be used elsewhere.

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148524

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

Upvotes: 1

Related Questions