3

For some reason, my Ajax loader icon is not showing and hiding as it should. Here's my snippet of jQuery code that handles the ajax call. I can see the #loading DIV with Chrome's Developer Tools...the problem lies is that jQuery is not showing the DIV (inline style set to display:none on the div itself). If I remove that inline style, it shows up where it should...

Anything I'm missing here?

//website URL grab - Ajax call
$('.loadBTN').on("click", function(){

    var check_url = $('#web_address').val();

    if (!check_url || check_url == 'http://') { // form validation
        //alert('Please enter valid URL');
        // Do nothing
        return false;
    };

    var web_url = {
        url: $('#web_address').val(),
        ajax: '1' // needed for controller, to verify that request is ajax
    };         

    //display ajax loader animation
    $('#loading').show();

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        success: function(msg) {
            $('#ajaxContent').html(msg); // output success in this container
            $('#loading').hide();
        } 
    });        


    return false;
});
4

2 回答 2

5

我建议订阅所有 ajax 启动/停止事件，而与谁负责无关：

$("#loading")
    .ajaxStart(function(){ $(this).show(); })
    .ajaxStop(function(){ $(this).hide(); });

加载将在有 ajax 请求时立即出现，然后在没有 ajax 请求正在进行时隐藏...

见http://api.jquery.com/ajaxStart/

于 2012-11-14T18:31:13.373 回答
2

一个更干净的 Ajax 请求 IMO。利用Context和BeforeSend

var scope = $("#container"); // wrap in a container div to use as the context

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        context : scope,
        beforeSend : function(){ // use beforeSend 
            $('#loading').animate({
                'display'   :   'block'
            });
        },
        success: function(msg) {
            $(this).html(msg); // $(this) == context => #container
        } 
    });
于 2012-11-14T18:54:53.807 回答