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

変数に html() の代わりに val() を使用し、テキストエリアのみを取得し、保存/クローズ時にのみコンテンツを保存し (保存するためにクローズしたかった)、キャンセル時にリセットすることで問題を解決しました。更新機能は次のとおりです。

    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 に答える