CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
tlewis3348
tlewis3348

Reputation: 486

How can I hide page elements till an AJAX call completes?

I am writing HTML that looks like this:

<div>
    <div id='chart_div'></div>
    <div style='visibility:hidden;' id='my_grad'>
        <svg>
            <!-- The SVG element I want to hide until the data for the chart
                 in chart_div is obtained and the chart renders -->
        </svg>
    </div>
</div>

In my JavaScript, I have tried both of the following AJAX calls:

$.ajax({
    url: 'http://example.com/path/to/source/data',
    dataType: 'jsonp',
    success: function(data) {
        // Parse data and create chart (for chart_div).
    },
    complete: function (data) {
        $('#my_grad').show();
    }
});

$.ajax({
    url: 'http://example.com/path/to/source/data',
    dataType: 'jsonp',
    success: function(data) {
        // Parse data and create chart (for chart_div).
    }
}).done(function(){
    $("#my_grad").show(); 
});

The problem is that although the SVG element is hidden as it is supposed to be initially, it fails to be shown after the charts are loaded in both cases.

How can I make a CSS portion of a page wait till the AJAX call finishes to appear?

Upvotes: 1

Views: 1611

Answers (2)

AlienHoboken
AlienHoboken

Reputation: 2800

You need the # to indicate your jQuery selector is targeting an id attribute for an HTML Element.

Use the following:

$('#my_grad').show()

Further, you need to change the visibility:hidden; property to display:none;

jsFiddle

For reference, to target any id attribute with a jQuery selector you need to prefix a # sign before the value of the attribute. For a class selector use a . prefix. Without either you are targeting a tag of the specified name; in this case you'd be trying to target the tag <my_grad>.

Ex:

$('#my_grad').show() <==> <div id="my_grad">

$('.my_grad').show() <==> <div class="my_grad">

$('my_grad').show() <==> <my_grad>

Upvotes: 6

rolo1091
rolo1091

Reputation: 159

Use "style=display:none" instead of "style=visibility:hidden"

And you are missing the # character to refer your id

Upvotes: 1

Related Questions