CODEWITHSUNDEEP
ajaxjquery-ui
user1431083
user1431083

Reputation: 177

Adding a Loading div to jquery ui dialog that is using .load

So I have this jQuery ui dialog that loading in a html file. But it takes a few seconds to load in the information, so I was curious how using jquery dialog can I add a loading div until the content finishes loading.

 <div class="loadingIt"></div>
 $('<div />').load('http://PathToURL', { something : el }, function() {
  more logic
}).dialog({ 
    modal: true, 
    width: 800,
    draggable: false,
    resizable: false,
    title: "Results",
    position: { 
        my: 'top',
        at: 'top',
        of: '#nav_wrapper',

    },

Upvotes: 0

Views: 634

Answers (2)

intuitivepixel
intuitivepixel

Reputation: 23322

You could also do something more elaborate like:

jQuery.ajaxSetup({
  beforeSend: function() {
    $('#loadingIt').show();
  },
  complete: function(){
    $('#loadingIt').hide();
  }
});

You can then put some loading spinner gif in your loadingIt div. Note that this solution would show the loading div for every ajax call you will make.

Upvotes: 2

A.O.
A.O.

Reputation: 3763

before the ajax call set the innerHTML of the div to an img with loading-gif of your choice. Then replace the innerHTML with response data on ajax.success() callback.

Upvotes: 0

Related Questions