How to add loading image using jquery?

Question

i want to add a loading or spinner message until the form/server has finished reloading how do i check and know that form has finished loading to disable the spinner?

NOTE: once the form is submitted the updated data is not available until the server restart only the form heading is visible, while the restart and changes are updated. Currently i am manually refreshing the page until form is available again.

here is my html and jquery snippet and loading code . My loading code is not working.

Code for loading message

 $(document).ready(function() {
              $('<div id="loading">Loading...</div>')
                .insertBefore('#myform')
                .ajaxStart(function() {
                  $(this).show();
                }).ajaxStop(function() {
                  $(this).hide();
                });
            });

unless there's a really good reason not to, I recommend using jQuery's validate plugin (docs.jquery.com/Plugins/Validation). You'll be able to submit via ajax, display errors, spinner, etc. easily. — dnagirl
– dnagirl, Commented Nov 15, 2012 at 16:58

Manuel Schweigert · Accepted Answer · 2012-11-15 16:57:34Z

1

For the simplest solution for the loading image, you can use the jquery plugin prettyLoader.

You then only need to initialize the plugin once the DOM is loaded like this:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $.prettyLoader();
    });
</script>

And then it will display a loading Icon whenever an ajax request is made, automatically.

Updating the table can be done in two ways: Either you load the HTML in the ajax request and simply overwrite it:

$('#myTable').innerHtml = data;

Or you can return a json-object with the table data and put this data into the table. For that, I would recommend you use some kind of a Viewmodel, for example Knockout.js.

answered Nov 15, 2012 at 16:57

Manuel Schweigert

4,9844 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2012-11-15 17:20:11Z

0

you can add this to your script :

// to show the loading spinner

$("#loading").ajaxStart(function(){
    $('#loader').show();
});

// to hide the loading spinner

$("#loading").ajaxStop(function(){
    $('#loader').hide();
});

loader will be your div with absolute positioned div element with 100% of width and height with a loading gif in the center (if you want or that could be just a text message of loading please wait... like this)

answered Nov 15, 2012 at 17:20

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

user244394 Over a year ago

Thanks.. how would i know that my form has finished loading so i can hide the image after the form completes loading?

Jai Over a year ago

There is nothing to do when your ajax request stops then your spinner will be get hide by the .ajaxStop() function. yeah this will do.

user244394 Over a year ago

I added that it didnt seem to display the loading

Collectives™ on Stack Overflow

How to add loading image using jquery?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related