3

何らかの理由で、Ajaxローダーアイコンが表示および非表示になりません。これが、ajax呼び出しを処理するjQueryコードのスニペットです。Chromeの開発ツールで#loadingDIVを見ることができます...問題は、jQueryがDIV（display:nonediv自体に設定されたインラインスタイル）を表示していないことです。そのインラインスタイルを削除すると、本来あるべき場所に表示されます...

ここで足りないものはありますか？

//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 に答える