Question

谢谢你们一看。

我正在删除数据库中的记录。用户使用Ajax表单提交确认JQ UI.Dialog中的删除，然后基本上重定向到同一页面以重新加载更新的数据。

这一切都很好，花花公子：

<script type="text/javascript">
$(function() {


    $( "#delete-invoice" ).click(function(event){
            event.preventDefault()
            $( "#confirmDelModal" ).dialog( "open" );
     });



    $( "#confirmDelModal" ).dialog({
        autoOpen: false,
        height: 220,
        width: 680,
        modal: true,
        buttons: {
            "Delete Invoice": function() {
              var options = {   
                    success: function(){
                        $("#confirmDelModal").dialog("close");
                        window.location.href="same-page.cfm";

                    }
                }; 
                $('#confirmDelete').ajaxSubmit(options);

                return false; 
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            $( this ).dialog( "close" );
        }
    });





});

表单提交后，我想在页面顶部显示“删除成功”消息。 The Highlight/Error boxes on this theme roller page half way down on the right

基本上，我想在重定向/页面重新加载后显示隐藏的成功DIV。

过去几周我一直在学习Ajax，并且取得了很好的进展，但仍然试图绕过更大的概念，所以我确信有更好的方法可以做到这一点，我是也完全开放听到，请记住，设计师希望特定风格的消息出现，成功。

<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Deletion Successful</p>
</div>

非常感谢您提前

PS。在Coldfusion工作

Answer 1

在某些时候，您必须将模态对话框的返回值发送到父页面。这是我几年前写的一个例子。请注意，它使用的是基本的javascript，没有ajax，但确实显示了一般的想法。

这是在父页面上：

<cfoutput>
<script language="JavaScript">
function ServiceOther() {
if (document.Serviceform.service_id.value == "OTHER" ) {

NewContact=window.showModalDialog("#K.QryHome#ComplexCare/Contacts/OutsideNewService.cfm?    callPage=Addf","NewService","Dialogwidth:600px; Dialogheight:420px; center:yes ");

if (NewContact == true) // return value from dialogue
window.location="#K.QryHome#ComplexCare/Contacts/OutsideServices.cfm?callPage=AddWithNew";

} // end if
}// end of function

</script>
</cfoutput>

在您的情况下，您希望将window.location命令替换为显示消息的内容。

就我而言，模态对话框页面中有一个表格如下：

<cfform name="SKNewContactform" Action="ProcessNewOutsideService.cfm" method="post" 
onsubmit="window.returnValue = true; window.close();">

ProcessNewOutsideService.cfm包含：

<script language=javascript>
function CloseWindow() {
window.open('','_self','');
window.opener = top;
window.close();
}

然后是一堆coldfusion代码，最后，这个

<body onload="window.returnValue = true;  CloseWindow();">

再一次，一般的想法是你的模态对话框窗口在关闭时向父窗口发送一个值。然后父窗口可以使用该值执行某些操作。

Answer 2

<强>解决方案

要回答您的问题，您需要在重新加载页面时向服务器指明您要显示成功消息。这可以通过使用类似查询字符串的URL来完成。

我不建议这样做，因为你会做更多的工作而不是必要的，所有你想做的就是显示一条信息。您已经通过AJAX删除了记录，因此您可以从客户端执行此操作，而无需再次请求整个页面。

（更好）解决方案

当您打开第一个显示详细信息的对话框时，跟踪DOM中的记录（页面记录，而不是数据库记录）。一种简单的方法是将其存储在图标点击事件的变量中：

$deleteTarget;
$('.delete_icon').click(function() {
    $deleteTarget = $(this).closest('.myRowClass');
});

现在，如果您的用户删除了该行并且您在服务器上异步删除，则可以在客户端执行相同的操作：

$deleteTarget.remove();

...然后显示您的成功信息：

$('#successMessage').show();

现在你可以删除重新加载页面的行，然后关闭对话框（完成上述操作后）。

我想说这是一个比重新加载页面更好/更快的替代方案，因为客户端机器不需要向服务器发出另一个完整请求（服务器的工作量减少），也不需要重新加载页面（为客户减少工作量。）

延迟编辑：只是想在客户端删除记录之前添加它，您应该确保它在服务器上实际删除。当您发出删除记录的请求时，应等待服务器的响应。如果在服务器上成功删除记录，则应该向客户端返回响应。一旦您收到显示删除成功的响应，您就可以删除客户端上的记录。

Answer 3

更改

window.location.href="same-page.cfm";

要：

window.location.href="same-page.cfm?deleted=1";

在CF中有：

<cfif structKeyExists(url,"deleted")>.. {Div here}..</cfif>

有点天赋加入：

$(document).ready(function(){
   setTimeout(function(){ $("div.mydiv").fadeOut("slow"); }, 2000);
 });

在表单提交后显示JQUERY UI窗口小部件中的成功，以及从UI.Dialog重定向

3 个答案: