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, 2022 in Web Development by gaurav
• 23,260 points
1,654 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, 2022 by rajatha
• 7,680 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, 2022 in Web Development by gaurav
• 23,260 points
678 views
0 votes
0 answers

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

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

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
1,864 views
0 votes
0 answers

showing result of calculating in textbox with jquery

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

Jul 25, 2022 in Web Development by gaurav
• 23,260 points
487 views
0 votes
0 answers

jquery virtual keyboard - Curser not blinking in Chrome and Edge

I used the jQuery virtual keyboard, but ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
326 views
0 votes
1 answer

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

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

answered Feb 23, 2022 in JQuery by Aditya
• 7,680 points
9,441 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

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

Jun 23, 2022 in Web Development by gaurav
• 23,260 points
995 views
0 votes
1 answer

jQuery dialog popup

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

answered Jun 28, 2022 in Web Development by rajatha
• 7,680 points
1,097 views
0 votes
1 answer

Date range picker on jquery ui datepicker

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
4,833 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, 2022 in Web Development by rajatha
• 7,680 points
31,541 views
0 votes
1 answer

jQuery Load function not loading the file

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

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