jQuery 对话框不适用于 HTML 表单

Question

我有一个简单的用户帐户管理页面，它允许管理员删除用户帐户。

我希望当管理员用户单击“删除”按钮要求确认时弹出并停止 jQuery UI 对话框。

jQuery 代码：

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                      return true;
                      $( this ).dialog( "close" );          
            },
            Cancel: function() {
                      return false;
                      $( this ).dialog( "close" );  
            }
        }

    });}

PHP 代码：

print "<form action='admin_index.php' method=post>";
print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";
print "</form>";

问题是 jQuery 对话框窗口确实弹出，但它没有停止并等待用户反应，而是很快消失了。页面被重定向并且用户帐户被删除。

然后我尝试更改代码，如下所示；

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
               "Delete": function() {
                     window.location = 'admin_index.php';   
                     $( this ).dialog( "close" );
            },
                Cancel: function() {
                     $( this ).dialog( "close" );   
            }
        }
    });

并

删除 HTML 中的表单标签，仅保留输入标签，

print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";

jQuery UI 对话框窗口现在可以停止，但无论我单击“删除”还是“取消”，相应的用户帐户都不会被删除。这似乎是由于 php 变量没有传递引起的。

我只是想知道如何使整个事情正常进行。

希望我已经弄清楚了我的问题，并感谢任何帮助！

Answer 1

您的问题是 getDeleteConfirmation 将在对话框执行任何操作之前返回。事情是这样发生的：

1. 点击提交按钮。
2. 调用getDeleteConfirmation。
3. 对话框已创建。
4. getDeleteConfirmation 返回。
5. 由于 getDeleteConfirmation 未返回 false，因此会触发标准提交按钮行为。
6. 表格已提交。

您需要在getDeleteConfirmation中return false来停止提交。然后您需要删除按钮来提交表单。首先，您需要告诉 getDeleteConfirmation 使用什么表单，然后您可以通过按钮进行购买：

<input type="submit" onclick="return getDeleteConfirmation(this)">

然后对 getDeleteConfirmation 进行一些调整：

function getDeleteConfirmation(button) {
    $("#dialog-confirm-delete").dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                $(this).dialog("close");
                $(button).closest('form').submit(); // <--- Trigger the submit.
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }

    });
    return false;  // <--- Stop the submit.
}

演示（使用非功能表单，以便您提交时会出现错误）： http://jsfiddle.net/ambiguously/kGSCk/

Answer 2

JavaScript 不可能等待某事发生。您可以使用确认，否则您必须以不同的方式提交页面。您可以通过在 getDeleteConfirmation 中返回 false 并在对话框中的表单上调用 submit() 来取消单击事件。

或者您可以使用 Ajax 将表单发布到服务器。

此外，您的对话框代码也有无法访问的代码。 return语句之后的代码不可能运行。

Answer 3

我认为 jQuery UI 对于如此简单的事情来说有点过分了。您是否想过将其放在链接的点击上：

if (confirm("Are you sure you want to contiune with this request?")) {
     //Do stuff
}

编辑：
或者

你可以这样做。简而言之，我们创建了 2 个盒子。第一个带有链接，第二个是弹出框。在弹出框中我们放置链接。一个是删除路径的链接，另一个将隐藏新的弹出窗口。简单。您需要对弹出框进行样式设置，使其性感可爱:)

css:

.deleteSexyBox {
    display: none;
}

html:

//This box is just the simple link
     <div class="delete">Delete</div>
// deleteSexyBox style this up to be sexy however you want. i suggest position: fixed to keep it in the middle of the screen
<div class="deleteSexyBox">
    <a href="linkToWhereEverYouDoTheDeleting">Delete me pleaaaseeee</a>
    <div>Cancel</div>
</div>

根据您的需要设置删除样式。现在对于 JS

$('.delete').click(function(){
     $('.deleteSexyBox').fadeIn();
});
$('.deleteSexyBox div').click(function(){
     $('.deleteSexyBox').fadeOut();
});

如果有多个，那么 js 选择器将需要更多的工作，我假设会有；）
我不确定这是否有帮助。所以如果不是的话请打招呼