Loading gif in jQuery ajax call is not showing

0 votes

I am sure this must be a basic error on my part - but I am completely failing to see it.

I have a jQuery UI dialog which I use to present a form to edit a record .. at the bottom of the html (which itself is loaded via ajax) it has a div containing an (animated loading gif). The loading div is hidden after loading the html.

The CSS puts the div in an absolute position in the bottom right corner.

When the Save button on the dialog is clicked I call a function to save the info via ajax. In the ajax call I have:

beforeSend: function() {
              $("#ajaxLoading").show();
        },
  complete: function() {
              $("#ajaxLoading").hide();
        }

The problem is that the image does not show.

If I remove the hide() after the initial dialog load, then the gif is displayed throughout.

I tried putting the show() just before the ajax call rather than in the beforeSend .. still nothing.

I tried putting the show() in the dialog setup - in the "Save" button click. Nothing.

If I put a breakpoint in the script with Chrome and step through then I DO see the gif! So, I tried putting a couple of second timeout after the show() .. but still nothing.

I have no more ideas what to try.

Jun 23 in Web Development by gaurav
• 17,000 points
19 views

1 answer to this question.

0 votes

  1. Create a div with your image.
  2. Make it visible in jQuery.ajaxStart.
  3. Hide it in jQuery.ajaxStop.
answered Jun 27 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
0 answers

jQuery: Test if checkbox is NOT checked

I'm having trouble figuring this out. I ...READ MORE

Jun 29 in Web Development by gaurav
• 17,000 points
15 views
0 votes
0 answers

JQuery $.ajax() post - data in a java servlet

I want to send data to a ...READ MORE

Jun 29 in Web Development by gaurav
• 17,000 points
50 views
0 votes
0 answers

showing result of calculating in textbox with jquery

I want to calculate division of 2 ...READ MORE

Jul 25 in Web Development by gaurav
• 17,000 points
7 views
0 votes
0 answers
0 votes
1 answer

TypeError: $(...).autocomplete is not a function

You would definitely have missed the Jquery ...READ MORE

answered Feb 23 in JQuery by Aditya
• 7,300 points
262 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from ...READ MORE

Jun 23 in Web Development by gaurav
• 17,000 points
4 views
0 votes
1 answer

jQuery dialog popup

This HTML is fine: <a href="#" id="contactUs">Contact Us</a> ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
13 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
43 views
0 votes
1 answer

JQuery Ajax Post results in 500 Internal Server Erro

The 500 Internal Server Error is a ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
16 views
0 votes
1 answer

jQuery Load function not loading the file

The jQuery load() method allows HTML or ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,040 points
120 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP