從jquery對話框中刪除未保存的文本

Question

我有一個jQuery對話框，允許用戶保存筆記。這裏的情景：

1. 用戶打開的第一次對話，並增加了一記
2. 用戶打開的對話框中（當他們重新打開該對話框中的新便箋顯示出來），類型的東西，然後點擊取消（當他們重新打開對話框時，註釋顯示爲在步驟1中保存的好）
3. 用戶打開對話框並更新註釋（當它們重新打開對話框時註釋已根據需要更改）
4. 用戶打開對話框並單擊取消（現在當他們重新打開對話框時，該註釋將恢復步驟1中保存的值）

因此，當用戶更新筆記時，問題出現，然後重新打開對話框並點擊取消。該表格將恢復到第一次保存。這裏的腳本：

jQuery(function() { 
    var originalContent; 
    jQuery("#dialog-form").dialog({ 
     autoOpen: false, 
     resizable: false, 
     height: 480, 
     width: 460, 
     modal: true, 
     buttons: { 
     "Save": function() { 
      jQuery(".edit_user_property").submit(); 
      jQuery("#dialog-form").dialog('close'); 
     },   
     "Cancel": function(event, ui) { 
      jQuery("#dialog-form").html(originalContent).dialog('close'); 
     }, 
     }, 
     open: function(event, ui) { 
     originalContent = jQuery("#dialog-form").html(); 
     }, 
    }), 
    jQuery('.ui-dialog-titlebar-close').click(function() { 
     originalContent = jQuery("#dialog-form").html(); 
     jQuery(".edit_user_property").submit(); 
    }) 
    }); 

我想存儲爲這裏概述當用戶取消https://stackoverflow.com/a/8969084/2074243然後傳遞當前狀態。我試圖更新我的變量和提交，但都沒有工作。看起來這個變量落後了一步。我的對話框是通過link_to_function打開的：

<%=link_to_function("Notes", 'jQuery("#dialog-form").dialog("open")' %> 

如果有問題。另外，我運行Rails 2.3.17，因此使用jQuery與$。另外，如果有幫助，請使用以下格式：

<div id="dialog-form" title="Notes";"> 
     <form action="/properties/add_notes" class="edit_user_property" id="edit_user_property_108458" method="post" onsubmit="new Ajax.Request('/properties/200465/add_notes', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;"><div style="margin:0;padding:0;display:inline"><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="6/D6syvFo5nuLxla9dzcIadK5NbYxpPGKqilOwT+7Xw=" /></div> 
     <textarea id="user_property_notes" name="user_property[notes]" placeholder="Add notes" rows="20">Great property right</textarea> 
     </form> 
    </div> 

Answer 1

originalContent的值正被原始dom的值覆蓋。如果你設定了一個你希望改變的斷點，你會發現它沒有。

但是，您可以使用form.serializeArray將值保存在窗體中，並在用戶成功保存某些內容時保存data = tmp...。如果他們「取消」，則通過循環顯示值並將表單字段重置爲之前保存的值data.forEach...來恢復它。根據您使用的表單元素的類型，如果某些表單元素是小部件，您可能需要重新初始化這些元素。

這裏是一個codepen.io

如果您使用的是相同的HTML，從中刪除您的onsubmit功能（見codepen）

否則，鑑於你的HTML ...

$(function(){ 

    var 
     form = $(".edit_user_property"), 
     data = form.serializeArray(), 
     close = function(){ 
      form.dialog("close"); 
     }, 
     cancel = function(){ 
      data.forEach(function(v){ 
       form.find('[name="'+v.name+'"]').val(v.value) 
      }); 
      close(); 
     }, 
     save = function(){ 
      var tmp = form.serializeArray(); 
      console.log("save",tmp) 
      $.ajax('/properties/200465/add_notes', { 
       asynchronous:true, 
       evalScripts:true, 
       parameters:form.serialize() 
      }) 
       .done(function(response){ 
        alert("PASS"); 
        data = tmp; 
        close(); 
       }) 
       .fail(function(response){ 
        alert("FAIL"); 
        close(); 
       }); 
     }; 
    form 
     .dialog({ 
      autoOpen:false, 
      modal: true, 
      buttons: { 
       "Save":save, 
       "Cancel":cancel 
      }, 
      close:close 
     }) 
     .on("submit",function(){return false;}) 
    $("a").click(function(){ 
     form.dialog("open"); 
    }); 
}) 

Answer 2

我用變量的val（）而不是html（）解決了這個問題，只抓取了textarea，只保存了save/close（我想接近保存）並重置取消。這裏的更新功能：

jQuery(function() { 
     var originalContent; 
     jQuery("#dialog-form").dialog({ 
     autoOpen: false, 
     resizable: false, 
     height: 480, 
     width: 460, 
     modal: true, 
     buttons: { 
      "Save": function() { 
      originalContent = jQuery("#dialog-form textarea").val(); 
      jQuery(".edit_user_property").submit(); 
      jQuery("#dialog-form").dialog('close'); 
      },   
      "Cancel": function(event, ui) { 
      jQuery("#dialog-form textarea").val(originalContent); 
      jQuery("#dialog-form").dialog('close'); 
      }, 
     }, 
     }), 
     jQuery('.ui-dialog-titlebar-close').click(function() { 
     originalContent = jQuery("#dialog-form textarea").val(); 
     jQuery(".edit_user_property").submit(); 
     }) 
    });