0

ユーザーが私のアプリで対応するボタンをクリックしたときに、いくつかのポップアップウィンドウを起動したいと思います。私が使う

$('#modal').on('show', function () {
    $.ajax({  ...  });
});

そしてajaxを使用して、モーダルヘッダー、モーダルボディ、モーダルフッターに挿入したいmysqlからのjsonコンテンツを要求します。これは、ボタンの選択が行われたときに更新して表示したいWebページで一般的に使用するhtmlです。

        <div class="modal hide fade" id="modal">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>

問題は、モーダルが空に見えるか、以前に配信されたコンテンツを表示し、1秒ほど後にajaxが更新されたグッズなどをもたらすことです。そのため、コンテンツの更新はユーザーの目の前で悲しいことに実行されます。モーダルAPIは、「表示」よりも優れたオプションを提供しないため、モーダルは、コンテンツ全体がajaxによって提供され、エンドユーザーの画面に配信される準備ができている場合にのみ表示できます。

4

1 に答える 1

1

わかりました、私は別のsthを試しました。ボタンがクリックされ、成功オプションで最初のコンテンツが保持されたときにajax呼び出しを実行し、次に手動でモーダルウィンドウを呼び出して更新されたグッズを表示します。

$('a[href=#viewProperty]').click(function(e) {

    var dataString = "action=viewProperty&propertyId=" + $.cookie('propertyId');

    $.ajax({
        type     : "GET",
        dataType : "json",
        url      : "ajax/property.php",
        data     : dataString,
        success  : function(data){
            console.log("ajax works");
            //$.removeCookie('propertyId');
            console.log(data.house_type);
            $('#viewProperty h3').empty().html('View Property: ' + data.house_type);

            $('#viewProperty').modal('show');               
        },
        error    : function(){
            console.log("ajax failed");
        }
    }); 

    return false;   
});

正常に動作します。残っているのは、ajax呼び出しが完了する前にローダーを追加することだけです。

于 2013-01-10T18:36:42.530 に答える