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.
}

Demo（表单无效，提交时会报错）：http://jsfiddle.net/ambiguous/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 选择器，则需要做更多工作，我假设会有 ;) 我不确定这是否会有所帮助。如果不是，那么请你好