CODEWITHSUNDEEP
jqueryhtmlcss
Phoenix_uy
Phoenix_uy

Reputation: 3294

jQuery Show not working if css class has display:none

I have a class called loading like this:

.loading {
   display: none;
   vertical-align: top; 
   margin: 0; 
   padding: 0; 
   background: url('../images/shared/loading_16x16.gif') center center no-repeat; 
   width: 16px; 
   height: 16px;
}

with following html snippet:

<div id="loading" class="loading"></div>

and my jQuery code (on document ready):

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

But show() is not working at all. Even if I trigger it from the chrome developer window. On the chrome developer window if I uncheck the display: none from the loading class then the tag appears.

What's happening?

Upvotes: 6

Views: 16035

Answers (5)

Thomas Williams
Thomas Williams

Reputation: 1548

Actually I have come across this problem myself and there is a much simpler solution. Just remove the class.

$('#loading').removeClass('loading');

Upvotes: 0

Prakash R
Prakash R

Reputation: 409

Try this:

$.ajaxSetup({
      beforeSend:beforeSendFunction(),
      complete:onCompleteFunction()
  });
  });
  function beforeSendFunction(){
      setTimeout(function(){
          $("#loading").show();
      },2000)
  }
  function onCompleteFunction(){
      $("#loading").hide();
  }

you can remove setTimeout function in beforesend ,

here is the working jsfiddle link,i replaced background image to background color:" JsFiddle"

Upvotes: 2

Phoenix_uy
Phoenix_uy

Reputation: 3294

I just figured out!

I fix it by doing this on my jQuery:

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

Hope helps to some else :)

Upvotes: 3

Krish R
Krish R

Reputation: 22721

Use $("#loading").show(); instead of that $("#loading").show().children().show();

You trying this in local instance, though it is completed very fast, so that you can't able to view loading.

To verify the same, you just dump the loading hide line from your code and you can try, now you can find the loading text.

      complete: function () {
               // $("#loading").hide();
            }

Upvotes: 0

codeepic
codeepic

Reputation: 4112

Your code is not working because you are mixing classes with ids. In your css you have a .loading which is a class, but in your jQuery you use id selector $("#loading") . Your jQuery simply can't find the element.

Upvotes: 0

Related Questions