1

感谢您甚至看一看。

我正在从数据库中删除一条记录。用户通过 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" );
        }
    });





});

表单提交后，我想在页面顶部显示“删除成功”消息。 此主题滚动页面上的突出显示/错误框位于右侧的一半

基本上，我想在重定向/页面重新加载后显示一个隐藏的成功 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 工作

4

3 回答 3

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();">

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

于 2012-12-28T19:15:17.563 回答
1

解决方案

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

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

（更好）解决方案

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

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

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

$deleteTarget.remove();

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

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

现在您可以删除重新加载页面的行并关闭对话框（在执行上述操作之后）。

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

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

于 2012-12-28T19:20:52.937 回答
0

改变

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);
 });
于 2013-01-02T04:03:17.840 回答