1

問題：

2つのドロップダウンがあります。どちらもデータベースからの情報で入力され、いくつかの初期情報（phpで作成されたjson配列）に依存しています。2番目のドロップダウンも、最初のドロップダウンで選択されたものによって異なります。2番目のドロップダウンが選択されると、ユーザーの選択は別のデータベーステーブルに保存されます。ユーザーが離れてから戻ってきた場合、ドロップダウンを以前に選択したものにリセットできるようにしたいです（ただし、ユーザーが選択を変更できるようにします）。

コンテクスト：

次のようなコードがあります。

function eventHandler2(event) {
    $.ajax({
        url: "someotherurl.php",
        data: event.data["context"],
        success: function(data) {
            // Do some stuff
        }
    });
}

function eventHandler1(event) {
    event.data["context"][$(event.target).id()] = $(event.target).val();
    $.ajax({
        url: "someurl.php",
        data: event.data["context"],
        success: function(data) {
            $("#element").append(build_input("input2", data));
            $("#element input2").change({"context": event.data["context"]}, eventHandler2);
        }
    });
}

$(document).ready(function() {
    var context = // php generated json array.
    $("#element").append(build_input("input1", context));
    $("#element input1").change({"context": context}, eventHandler1);
});

contextイベントハンドラーの外部で初期化する必要があり、durringイベントに追加されるデータが含まれ、またはbuild_inputで決定されるオプションで構築されたフォーム入力要素のhtml文字列を返すだけです。eventHandler1（およびeventHandler2）を含むhtml要素全体が削除され、再初期化される場合があります。datasomeData

私の問題は、データベースから取得したデフォルト値を使用して2つのフォーム入力（build_inputを使用して構築）を初期化したいのですが、これらの値が設定されたら、再初期化やイベント処理でこれらの初期値を使用したくないということです（イベントハンドラをバインドするときにそのオブジェクトが使用されるため、コンテキストオブジェクトへの追加が困難になります）。

入力の値を設定してから変更イベントを呼び出して、ユーザーがそれらの値を選択することをシミュレートしたいのですが、入力要素はajaxデータを使用して構築されているため、これらの変更イベントはajaxリクエストが返され構築される前に呼び出されます入力要素。

タイムアウトでこれを解決することはできますが、javascriptの実行が異なるマシンで遅くなる可能性があり、ajax呼び出しに通常よりも時間がかかる可能性があるため、そのようにする予定はありません。それでも、理想的には次のようなものが欲しいです。

$("#element .input1 option[value='" + initial_value + "']").attr('selected', true);
$("#element .input1").change();

ページが読み込まれたときに呼び出されますが、要素がビルドされてバインドされた後にのみ呼び出されます。

質問：

ページが最初にロードされたとき、およびhtml入力要素を構築するためのajaxリクエストが返された後にのみ、変更イベントをトリガーする（ユーザーがオプションを選択することをシミュレートする）方法はありますか？

4

1 に答える 1

1

変更イベントをトリガーする方法（ユーザーがオプションを選択することをシミュレートする）は、

ページが最初に読み込まれます

そしてのみ

ajaxリクエストの後

HTML入力要素を構築するために戻ってきましたか？

これらは2つの別々のイベントです。両方のイベントが発生したことを確認し、成功を利用する必要がある場合：次のような関数<body onload="loadedBody=true">の属性：$.ajax

function eventHandler1(event) {
    event.data["context"][$(event.target).id()] = $(event.target).val();
    $.ajax({
        url: "someurl.php",
        data: event.data["context"],
        success: function(data) {
            $("#element").append(build_input("input2", data));
            $("#element input2").change({"context": event.data["context"]}, eventHandler2);
            ajaxComplete();
        }
    });
}
var ajaxCompleted;
function ajaxComplete() {
    if((loadedBody == true) && (ajaxCompleted == false)) {
        $("#element .input1 option[value='" + initial_value + "']").attr('selected', true);
        $("#element .input1").change();
    } else {
        setTimeout('ajaxComplete()', 100);
    }
}

setTimeoutについて心配する必要はありません。AJAXの結果が到着する前にページが読み込まれる可能性があるため、使用されることはめったにありません。

于 2012-05-16T22:06:12.997 に答える