Удалить несохраненный текст из диалогового окна 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 является перезапись значения из исходного йота. Если вы установите точку останова, где вы ожидаете, что она будет изменена, вы увидите, что это не так.

Но вы можете сохранить значения в форме с помощью 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(), захватив только текстовое поле, сохраняя содержимое только для сохранения/закрытия (только для сохранения) и сбросив его при отмене. Вот функция обновления:

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