1

次の JavaScript 関数の例を見てください。

function Admin_AccountDetails(UserID) {
    //$.colorbox({ title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px" });
    $.ajax({
        url: "ajax.aspx?ajaxid=3&UserID=" + UserID,
        cache: false,
        success: function(response) {
            $.colorbox({ title: "Account Details (UserID: " + UserID + ")", opacity: "0.5", width: "700px", height: "250px", html: response });
        },
        error: function(xhr) {
            HandleBadAjaxResponse(xhr.status);
        }
    });
}

この関数の考え方は、既存の関数 ( HandleBadAjaxResponse()etc の使用に注意してください) を使用して ajax コンテンツを読み込み、結果のコンテンツを ColourBox div に表示することです。

これは機能しますが、ajax コンテンツが返されるまでカラーボックスは表示されません。

私たちがやりたいことは、Ajax リクエストが大量に処理されている間、Colourbox のデフォルトのロード アニメーションを起動することです。

編集：これまでの結果

最初に、David が提案した iframe メソッドを試しました。

$.colorbox({ iframe: true, title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px", html: " ", fastIframe: false });

ただし、これは意図したとおりには機能しません。はい、ajax リクエストの実行中にカラーボックスがすぐに表示されますが、使用iframeしたためhtml: " "、最初のボックスに読み込み gif がないため、読み込み gif が一瞬表示されます。 ajax 呼び出しが完了し、ボックスのサイズが変更されました。この問題を示すために、ajax バックエンド コードに 2 秒の遅延を挿入しました。

http://www.heavencore.co.uk/filehub/Videos/StackOverflow/WithTwoSecondDelay.avi

次に、最初のボックスから iframe タグと html タグを削除してみました。これは、読み込み中の gif が ajax リクエストの全期間にわたって表示されるという意味で機能しますが、幅と高さのパラメーターも無視し、大量のカラーボックスを描画します。サイズは、ajax リクエストが戻ってきたときにのみ修正されます。これを示す別のビデオ:

$.colorbox({ title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px" });

http://www.heavencore.co.uk/filehub/Videos/StackOverflow/AlmostCorrect.avi

このように機能させることができれば、正しいサイズで完璧です-何かアイデアはありますか?

私が考えることができる唯一のことは、ColorBox js ファイル自体のデフォルトの幅と高さを変更することです:

(function ($, document, window) {
    var
    // Default settings object.
    // See http://jacklmoore.com/colorbox for details.
    defaults = {
        transition: "elastic",
        speed: 300,
        width: false,
        initialWidth: "500",
        innerWidth: false,
        maxWidth: false,
        height: false,
        initialHeight: "200",
4

1 に答える 1

0

私があなたのニーズを正しく理解していれば、次の $.ajax ソリューションが機能するはずです。本当に必要なことは、通話を開始する前にカラーボックスを設定することだけです。応答は、ロジックを自動的に処理するエラー コールバックを使用して、その時点で表示する内容を決定します。

function Admin_AccountDetails(UserID) {
    $.colorbox({iframe:true, title: "Loading, Please wait", width: "500px", height: "200px", html: " ", fastIframe:false });

    var url = "ajax.aspx?ajaxid=3&sid=" + Math.random();
    url = url + "&UserID=" + UserID;

    $.ajax({
        type: "GET",
        url: url,
        success: function(response) {
            $.colorbox({ title: "Account Details (UserID: " + UserID + ")", width: "500px", height: "200px", html: response });
        },
        error: function(xhr) {
            HandleBadAjaxResponse(xhr.status);
        }
    })
}
于 2013-03-14T17:22:11.163 に答える