Question

I’m going to be dynamically loading certain information in a modal window via ajax.

I’ve noticed on other sites that a small circular loading animation will appear in a modal window prior to loading the content. Does anyone know how this effect is achieved and possibly where to find the loading animation?

Thanks

Answer 1

The jQuery $.ajax() method provides for this by allowing you to specify a method to call upon ajax invoke and another method to call upon ajax response. The logical extension of this functionality is displaying a div containing an animated gif in the first call and clearing it in the second call. Here’s an example. I do this in my $.ajaxSetup call when setting my ajax call defaults so that all of my ajax calls have the same behavior, but you can implement this at the $.ajax level to have potentially a different type of start/stop behavior depending on situation.

    beforeSend: function() {
        $('div#ajaxProcessingMessageDiv').show();
    },
    complete: function() {
        $('div#ajaxProcessingMessageDiv').hide();
    }

Happy coding,