When finished parsing the json into the specified span tags I wanted to automatically hide the imperial tags currentimperial and forecastimperial but when I try to do this use

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

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

and view the result in chrome and look in the console I see that instead of

style="display: none; "

they actually have

style="display: inline; "

Here is my whole javascript and html on jsBin ,html

Thanks for any help I recieve.

When finished parsing the json into the specified span tags I wanted to automatically hide the imperial tags currentimperial and forecastimperial but when I try to do this use

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

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

and view the result in chrome and look in the console I see that instead of

style="display: none; "

they actually have

style="display: inline; "

Here is my whole javascript and html on jsBin http://jsbin./efaguv/edit#javascript,html

Thanks for any help I recieve.

• javascript
• jquery
• hide

Share Improve this question Follow edited Jan 2, 2012 at 8:08 samir chauhan 1,52511 gold badge1717 silver badges4444 bronze badges asked Jan 2, 2012 at 7:19 Jake ChampionJake Champion 5711 silver badge88 bronze badges 1

• Can you show the relevant JS and html in your question? Your jsbin link seems to just have the default jsbin "hello world" html rather than your html. – nnnnnn Commented Jan 2, 2012 at 7:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I think the problem is that you haven't allowed for the fact that your ajax call is asynchronous.

A much simplified example of what's happening:

1 jQuery(document).ready(function($) {
2   $('#warning').remove('#warning');   
3   $.ajax({
4        url: 'http://api.wunderground./api/APIKEYREMOVED/geolookup/conditions/forecast/q/51.773079,-1.591353.json',
5        dataType: "jsonp",
6        success: function(parsed_json) {
7           $('#currentimperial').fadeIn(1000).append(+temp_f+ '℉ ');
8        }
9    });
10 
11   $('#celcius').hide();
12   $('#currentimperial').hide();
13   $('#forecastimperial').hide();
14 });

• line 2 executes
• line 3 executes to make the ajax request (response will be received at some point in the future)
• lines 11-13 execute to hide the items
• line 14: your document ready function pletes
• (eventually) ajax response is received and success handler is called so line 7 executes.

Because (in your full code) the ajax success callback makes the elements visible (using .fadeIn()) the end result is that they are visible.

Can you instead hide the elements within that ajax success callback?

You can use

$('#currentimperial').slideUp();

or

document.getElementById('currentimperial').style.display="none";

I had a similar issue where hide was not hiding. I am using angular and found that a directive was using the !important css feature on the display style attribute forcing it to remain a block and preventing hide from changing the display to none.

elem.attr('style', 'display: none !important;');