如何使用jquery UI對話框作為javascript確認？

Question

我讀了很多關於這個的問題，但是每個解決方案都使用相同的解決方法，在jquery對話框中提交表單，如下所示：

 $("#dialog").dialog({
  buttons : {
    "Confirm" : function() {
      window.location.href = targetUrl;
    },
    "Cancel" : function() {
      $(this).dialog("close");
    }
  }

是不是有更簡單的方法，更像是javascript確認？

<input type="submit" onclick="return confirm('are you sure?');" />

為什么返回true，返回false不起作用？

Answer 1

這是您可以做的，您將輸入類型從“提交”更改為“按鈕”，然后，您可以像這樣使用您的腳本：

$(document).ready(function(){ 
  $("#dialog").dialog({
    autoOpen: false, 
    buttons : {
        "Confirm" : function() {
          $('#form1').submit();
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });
  $('#submitButton').click(function(){
      $("#dialog").dialog('open');
  });
});

這樣，只有在使用確認對話框時才會提交表單。

在您的情況下返回false或true無關緊要的原因是對話框剛剛顯示，但submit事件中的代碼將繼續執行，除非您在顯示對話框后返回false。

Answer 2

我編寫了以下代碼，使用JQuery的UI Dialog作為模態確認。 通過事件目標提交表單，不會對遞歸事件處理程序進行遞歸調用。

$(function () {
    $('form[action*="/Delete"]').submit(function (e) {
        e.preventDefault();

        $("<div>Are you sure you want to delete this?</div>").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                Ok: function () {
                    e.target.submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
}); 

Answer 3

這是因為jQuery UI對話框在技術上不是模態的，與confirm和alert不同。 他們不會暫停你正在執行的javascript。 但你可以得到基本相同的東西：

function restOfTheCode(returnValue)
{
    //do stuff
}

$("#dialog").dialog({
    buttons : {
        "Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
        "Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
    }
});

//anything down here executes immediately after the dialog is shown, so that's no good.

相當於：

var returnValue = confirm("Are you sure you want to confirm?");
//do stuff

編輯：好的，添加提交問題，這里的備用代碼沒有任何意義。 但解釋是一樣的：它不是模態的。 如果你真的想，你可以模擬這個：

function modalDialogConfirm()
{
    var buttonClicked = false;
    var valueSelected;

    $("#dialog").dialog({
        buttons : {
            "Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
            "Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
        }
    });

    function y { setTimeOut("x()", 100); }
    function x { setTimeOut("y()", 100); }

    while(!buttonClicked);

    return valueSelected;
}

...但這只會凍結瀏覽器，所以它不是很有用......