在表單提交後在JQ UI-widget中顯示成功，並從UI重定向。對話框

感謝您的參與。在表單提交後在JQ UI-widget中顯示成功，並從UI重定向。對話框

我從數據庫中刪除記錄。用戶使用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，並取得了很好的進展，但仍然試圖圍繞更大的概念，所以我相信可能有更好的方法來做到這一點， m也完全開放的聽到，只要記住，設計師希望特定的風格消息出來，成功。

<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中工作

來源

2012-12-28 Steve Ontologic

也許我誤解了你在做什麼，但爲什麼不直接顯示提交成功而不是重新加載頁面的成功消息？這可以用JavaScript輕鬆完成。 – Zhihao

一些可能有用的信息： –

第一步是選擇一個刪除圖標，該圖標運行一個可顯示該行數據所有細節的ajax函數，以及說明刪除後無法恢復已刪除記錄的文本。我在上面張貼的對話框顯示在另一個刪除按鈕上，在第二步的底部，並且在此對話框中確認刪除。表單在對話框按鈕上提交，並查詢數據庫。因此，我沒有使用Ajax將DIV重新繪製到原始表格，而是將其重定向到同一個頁面，作爲轉換重新加載。感謝您的快速回復。 –

在某些時候，您必須從模態對話框向父頁面發送返回值。這是我幾年前寫的一個例子。請注意，這是使用基本的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();">

再次，一般的想法是你的模態對話窗口發送AV在關閉時顯示父窗口。父窗口然後可以做那個值。

來源

2012-12-28 19:15:17

謝謝你。 –

解決方案

要回答你的問題，你需要告訴你想，當你重新加載頁面顯示成功消息的服務器。這可以通過使用類似查詢字符串的URL來完成。

我不會推薦這個，因爲你會做更多的工作而不是必要的，你所要做的就是顯示一條消息。您已經通過AJAX刪除記錄，因此您可以從客戶端執行此操作，而無需再次請求整個頁面。

（更好的）解決方案

當您打開的第一個對話框，顯示細節，跟蹤記錄在DOM（頁面的記錄，而不是數據庫記錄）。一個簡單的方法來做到這一點，只是它存儲在一個變量上的圖標的單擊事件：

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

現在，如果你的用戶刪除了該行，並在服務器上的異步刪除，你可以做客戶端上的同方：

$deleteTarget.remove();

...，然後顯示您的成功消息：

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

現在你可以刪除重新加載頁面的線，只是有對話框關閉（以上後做）。

我會說這是比重新加載頁面更好/更快的替代方案，因爲客戶機不需要再向服務器發出完整的請求（服務器工作量減少），並且不需要重新加載頁面（爲客戶減少工作）。

延遲編輯：只是想添加，在客戶端刪除記錄之前，您應該確保它實際上被刪除在服務器上。當您提出刪除記錄的請求時，您應該等待服務器的響應。如果記錄在服務器上成功刪除，它應該返回一個響應給客戶端。一旦得到響應以顯示刪除成功，您可以刪除客戶端上的記錄。

來源

2012-12-28 19:20:52 Zhihao

謝謝你的回覆。很容易理解。我搞砸了，並通過向顯示成功消息的div添加cfif語句，並在提交時重定向的URL中附加？success = 1。我敢肯定，這將是充滿了我頭上的問題，所以我會試着實施你提供的，因爲它看起來更有效率。謝謝，我會告訴你我的結果。 –

我沒有意識到你想重新加載整個頁面。既然你這樣做，你選擇的方法和任何方法一樣好。如果您打算使用coldfusion解決方案，您可能需要將coldfusion標籤放回您的問題，以便coldfusion人員可以看到問題。 –

變化

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-02 04:03:17 Nicklepedde

在表單提交後在JQ UI-widget中顯示成功，並從UI重定向。對話框

回答

相關問題