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会在对话框执行任何操作之前返回。事情就是这样：

点击提交按钮。
getDeleteConfirmation被召唤。
创建对话框。
getDeleteConfirmation返回。
由于getDeleteConfirmation未返回false，因此会触发标准提交按钮行为。
表格已提交。

您需要return false getDeleteConfirmation停止提交。然后，您需要删除按钮才能提交表单。首先，您需要告诉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/ambiguous/kGSCk/

Answer 2

我认为jQuery UI对于这么简单的事情来说太过分了。你有没有想过点击你的链接：

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

编辑：或

你可以这样做。简而言之，我们创建了2个盒子。一个是链接，第二个是弹出框。在弹出框中我们放置链接。一个是删除路径的链接，另一个是隐藏新的弹出窗口。 Simples。你需要设置弹出框的样式以使其性感和可爱：）

的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选择器需要更多的工作，如果有多个，我认为会有;）我不确定这是否会有所帮助。如果它不是

，那就好了

Answer 3

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

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

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

jQuery对话框不适用于HTML表单

3 个答案: