javascript - javascriptでOKボタンがクリックされるまで何もしない方法は?

Question

文字列の場所で何かを要求する $.ajax() 関数があります。

ajax 応答で result.location = "Somewhere" と仮定しますが、理論的には任意の文字列である可能性があります。

成功（結果）すると、次のようになります。

Line 1: alert("Hello There");
Line 2: alert("Look Here" + result.location); // Look here Somewhere

「Hello There」のアラート ボックスがポップアップ表示され、ユーザーが「Hello There」アラート ボックスを閉じるまで、「Look here」アラート ボックスは表示されません。

ただし、アラートの代わりに行 1 の場合、たとえば次のように表示されるアラート ボックスの代わりに div があります。

<div>Hello There <input type="button">OK</input></div>

だから代わりに私は持っています：

Line 1: showDivAlert();
Line 2: alert("Look Here" + result.location); // Look here Somewhere

次に、div が表示され、"Look Here" というアラートがポップアップ表示されます。ユーザーが「OK」ボタンをクリックするまで showDivAlert() の下のコードが実行されないようにするには、関数「showDivAlert()」に何を入れることができますか?

注: ここで重要なのは、ajax リクエストの result.location 文字列を保持することです。

Answer 1

ダイアログを表示する同じブロックで OK 後のコードを定義するのではなく、カスタム ダイアログで [OK] ボタンを押すイベント ハンドラーが追加の動作をトリガーする必要があります。

このようなもの：

<div>Hello There <input type="button" onclick="okClicked()" value="OK"/></div>

---

function okClicked() {
    alert('Look Here');
}

Answer 2

次のように HTML を変更します。

<div>Hello There <input type="button" id="alert-ok">OK</input></div>

これで、#alert-ok id を使用してボタンをターゲットにできるようになりました。

jQuery を使用している場合は、イベントを添付するだけです。

showDivAlert();
$("#alert-ok").click(function() {
    //do work
});

Answer 3

alert()javascript で実行スレッドを効果的にブロックし、ダイアログが閉じられるまで次のコード行が実行されないようにします。

対照的に、あなたshowDivAlert();はスレッドをブロックせず、通常どおり実行を続けます。これを修正するには、メソッドにコールバック機能を追加する必要があります。

の場合と同様に、サーバーから有効な応答があるまで$.ajax()wheresuccessは実行されません。次のように引数を追加できます。

function showDivAlert(callbackOK_){
    //render a fancy popup with a #btn-ok
    $('#btn-ok').click(callbackOK_);//attach the callback passed
}

「失われた」別の回答を指摘しましたresult.locationが、代わりに、コールバック関数の実行スコープでは利用できませんでした。

showDivAlert(function(){
    alert("Look Here" + result.location);
});  

フィドル