jquery change css dynamically not refreshing in chrome

Question

In the following code I am trying to show div before ajax request and after completion I want to hide div. hide() is working fine but show() is not working. It works well in Firefox.

$("#btnpst").click(function () {
   $('#dvloading').show();
   $.ajax({
       url: url,
       type: "POST",
       async: false,
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (data, st) {
           if (st == "success") {
               $('#dvloading').hide();
           }
       },
       error: function () {
           $('#dvloading').hide();
       }
   });
   } //<
});

HTML

<div id="dvloading" style="width: 480px; height: 320px; position: absolute; overflow: hidden;">
    <image src="../loading_2.gif" style="margin-top: 120px;">
</div>

how you are sure that `hide` is working? The element itself would ve been rendered right? — sundar, Aug 10 '12 at 05:37
its either showing the `DIV` and closing it very quickly (if the ajax call is not taking much time), OR , the `DIV` itself is not rendered correctly, thus giving the illusion that its hidden.. try to give a breakpoint or `alert()` after show to see if its working.. — redDevil, Aug 10 '12 at 05:40
If I put alert above hide() I am able to see it. without alert it's not visible. ajax call is taking about 10 sec. — Punna Reddy, Aug 10 '12 at 05:48
I've just edited it and found an extra `}`, is this a mistake ? — The Alpha, Aug 10 '12 at 06:07

score 0 · Answer 1 · answered Aug 10 '12 at 05:58

0

I think that you are testing is locally and the response is pretty fast. Why not change this line

$('#dvloading').hide();

to this

setTimeout(function(){$('#dvloading').hide();},5000);

to see if thats the case. Also it would be helpful to check if there are no js related errors from the javascript console

answered Aug 10 '12 at 05:58

Jaspreet Chahal

2,759
1
15
17

If I say setTimeout(function(){$('#dvloading').hide();},5000); it is showing div after ajax success. if (st == "success") { $('#dvloading').hide(); alert('success'); } I can clearly observe more than 10 sec delay from button click to alert. – Punna Reddy Aug 10 '12 at 06:26

score 0 · Answer 2 · answered Aug 10 '12 at 20:34

"If I put alert above hide() I am able to see it". "without alert it's not visible. ajax call is taking about 10 sec"

these two statements somehow seem contradictory, if your DIV is actually shown and then hidden and the ajax call takes about 10 seconds, it should appear so without the alert box also.. I really doubt whether the ajax call takes about 10 sec..

Here is a fiddle to illustrate your scenario, i have removed the content type attribute from the ajax call and used flickr's json response page. its working fine.

jsfiddle

jquery change css dynamically not refreshing in chrome

2 Answers2