Question

我有一个jQuery对话框表单，允许用户保存笔记。这是场景：

用户首次打开对话框并添加备注（当他们重新打开对话框时会显示新备注）
用户打开对话框，键入内容然后单击取消（当他们重新打开对话框时，注释显示为在步骤1中保存，这很好）
用户打开对话框并更新注释（当他们重新打开对话框时，注释已根据需要更改）
用户打开对话框并单击取消（现在当他们重新打开对话框时，注释将从步骤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 vs. $。此外，如果有帮助，这是表格：

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

从jquery对话框中删除未保存的文本

2 个答案: