3

jQueryonbeforeunloadイベントを jQuery UI Modal Message と組み合わせるのに問題があります。jquery onbeforeunload イベントを使用して、フォームがまだ送信されているかどうかを確認したいと思います。送信されていない場合は、変更を保存するかどうかをユーザーに尋ねます。

最初の関数はシステム プロンプトを提供し、適切に動作しますが、スタイルやボタン テキストをカスタマイズするのは難しく、ユーザーが数回クリックする必要があります。

2 番目の関数は jQuery UI ダイアログ ウィジェットを使用しますが、現在、ユーザーがページを離れようとしたときではなく、フィールドが変更されたときにダイアログを表示する関数をトリガーしています。ユーザーがクリックしてフォームを送信せずにページを離れたときにトリガーされるように、この関数を修正するにはどうすればよいですか?

jquery-1.8.2 と jquery-ui-1.9.1 を使用しています

<form name="form2" id="form2" method="post" action="form2-exec.php">        
    <!-- Form Elements -->
    <div id="dialog-confirm" style="display:none;">
        Would you like to save your changes?
    </div>
    <a href="form1.php">BACK</a>
    <a href="#"><input type="submit" value="SUBMIT" /></a>
</form>

オリジナル機能

$(function () {
    // Set the unload message whenever any form elements are changed
    $('input', 'select').change(function () {
        setConfirmUnload(true);
    });
    // Turn off the unload message whenever a form get submitted properly.
    $('form').submit(function () {
        setConfirmUnload(false);
    });
});
function setConfirmUnload(on) {
    var message = "You have unsaved data. Are you sure to leave the page?";
    window.onbeforeunload = (on) ? function() { return message; } : null;
}

新しい setConfirmUnload(on) 関数 (正しく動作しません)

function setConfirmUnload(on) {
  var message = $("#dialog-confirm").dialog({
        modal: true,
        buttons: {
            "Save": function () {
                $("#form2").submit();
                $(this).dialog("close");
            },
            "Continue": function () {
                $(this).dialog("close");
            }
        }
    });        
    window.onbeforeunload = (on) ? function () { return message; } : null;
}
4

1 に答える 1

-1

次のように、ダイアログの定義をwindow.onbeforeunloadハンドラーに移動してみてください。

function setConfirmUnload(on) { 
    var message;       
    if (on) {
        window.onbeforeunload = function() {
            message = $("#dialog-confirm").dialog({
                modal: true,
                buttons: {
                    "Save": function () {
                        $("#form2").submit();
                        $(this).dialog("close");
                    },
                    "Continue": function () {
                        $(this).dialog("close");
                    }
                }
             });
             return message;
        };
    } else {
        window.onbeforeunload = null;
    }
}
于 2013-03-12T18:07:30.020 に答える