1

我有一个 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>
4

2 回答 2

0

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");
    });
})
于 2013-06-12T07:13:41.780 回答
0

我通过对变量使用 val() 而不是 html() 解决了这个问题，仅抓取文本区域，仅在保存/关闭时存储内容（我想关闭以保存）并在取消时重置。这是更新功能：

    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();
      })
    });
于 2013-06-13T13:53:50.923 回答