如何在AJAX调用完成之前隐藏页面元素？

I am writing HTML that looks like this:

我正在编写看起来像这样的HTML:

<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:

在我的JavaScript中,我尝试了以下两种AJAX调用:

$.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.

问题是虽然SVG元素最初是隐藏的,但在两种情况下加载图表后都无法显示。

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

如何让页面的CSS部分等到AJAX调用完成后才会出现?

2 个解决方案

#1

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

你需要#来表明你的jQuery选择器是针对HTML元素的id属性。

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>.

作为参考,要使用jQuery选择器定位任何id属性,您需要在属性值之前加上#符号前缀。对于类选择器,使用a。字首。没有任何一个,你的目标是指定名称的标签;在这种情况下,您将尝试定位标记。

Ex:

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

$('#my_grad')。show()<==>

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

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

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

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

#2

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

使用“style = display:none”代替“style = visibility:hidden”

And you are missing the # character to refer your id

你错过了#字符来引用你的id

#1