jQuery UI AJAXとバリデーターが1回だけ正常に動作するダイアログフォーム

Question

私はAJAX経由でロードする単純なJQueryダイアログフォームを作成しています。これは、JQueryツールを使用して検証し、成功した場合はAJAX経由で送信して終了します。ここではAJAX（ちょっといいリンクを介して）を経由してダイアログを開き、コードは次のとおりです。

<script type="text/javascript"> 
var activeDialog; 
$(function(){ 
    $('a.ajax').click(function() { 
     var dialogDiv = '<div style="display:hidden" id="dialogDiv" title="'+this.title+'"></div>'; 
     var dialog = $(dialogDiv).appendTo('body'); 
     // load remote content 
     activeDialog = dialog.load(
      this.href, 
      {}, 
      function (responseText, textStatus, XMLHttpRequest) { 
       dialog.dialog({ 
        resizable: true, 
        title: this.title, 
        autoOpen: true, 
        height: 350, 
        width: 600, 
        modal: true, 
        close: function(event, ui) { 
         try {$("#addNoteForm").data("validator").destroy();}catch(e){} 
         $(this).dialog("destroy"); 
        } 
       }); 
      } 
     ); 
     return false; 
    }); 
}); 
</script> 
<BR><BR> 
<a class="ajax" href="dialog_clientEdit.php?cid=172" title="Add New Note">Create note</a> 

あなたが見ることができるように、ダイアログがページ「dialog_clientEdit.php」からロードされます。

<div id="dialogNote9356904" title="Add New Note"> 
    <form action="process_note.php" method="post" name="addNoteForm" id="addNoteForm" class="form has-validation"> 
    <fieldset style="border:none;"> 
     <div class="clearfix"> 
      <label for="form-note" class="form-label">Note <em>*</em></label> 
      <div class="form-input form-textarea"><textarea id="form-note" rows="5" name="note" required="required" /></textarea></div> 
     </div> 
     <div class="clearfix"> 
      <label for="form-notedate" class="form-label">Date <em>*</em><small>mm/dd/yyyy</small></label> 
      <div class="form-input"><input type="date" id="form-notedate" name="date" data-value="03/05/2004" format="mm/dd/yyyy" required="required" /></div> 
     </div> 
     <div class="clearfix"> 
      <label class="form-label">Visibility <em>*</em><small>Private not visible to client</small></label> 
      <div class="form-input"><label for="form-visibility-private"><input type="radio" name="visibility" id="form-visibility-private" value="private" checked /> Private</label> <label for="form-visibility-public"><input type="radio" name="visibility" id="form-visibility-public" value="public" /> Public</label></div> 
     </div> 
     <div class="form-action clearfix"> 
     <button class="button" id="submitNote" type="button" data-icon-primary="ui-icon-circle-check">Create Note</button> 
      <button class="button" type="button" onClick="activeDialog.dialog("close");">Cancel</button> 
      <span id="addDialogLoader"></span> 
     </div> 
    </fieldset> 
    </form> 
</div> 
<script> 
$('#submitNote').click(function() { 
    var form = $('#addNoteForm'); 
    if(form.data("validator").checkValidity()){ 
     var formData = $(form).serialize(); 
     // Save form via AJAX 
     var ajax_load = "<img src='../images/ajax-loader.gif' alt='Saving...' />"; 
     var loadUrl = "process_note.php?cid=172"; 
     $("#addDialogLoader").html(ajax_load).load(loadUrl, formData, function(response, status, xhr) { 
      if (status != "error") { 
       if(response == "1"){ 
        activeDialog.dialog("close"); 
       } else { alert("There was an error saving this note: "+response); } 
      } else { 
       alert("An error occurred while performing your request: " + xhr.status + " " + xhr.statusText); 
      } 
     }); 
    } 
    return false; 
}); 
</script> 

問題がある：それは自身の処理スクリプトだし、一度に充填し、正常に送信され、AJAXを介してデータを送信し、エラーがない場合は、自分自身を閉じ、バリやダイアログを破壊するでダイアログロードこれは、フォームは1回だけ提出します。あなたはそれを記入することができます、検証は正常に動作し、すべてのAJAXは正しく発射され、誰もが満足しています。次に、もう一度試してみると、バリデーターは機能しなくなり、「ノートを作成」ボタンをクリックすると基本的に何も行われません。ダイアログは送信されず、AJAXは決して起動しません。

私はダイアログとバリデータが閉じられた後にそれを確実に破壊しています。ダイアログは正常に再オープンされますが、2番目の開始時にdatepickerは機能しません。これ以上の検証は行われず、フォームは送信できません。

申し訳ありませんが、私はすべてのコードを含めていますが、実際にどこにエラーがあるのか​​は分かりません。私はそれが私がそれを閉じている（または再オープンする）方法と関係があると確信しています。誰も助けることができますか？

Answer 1

、私は毎回ことが判明：私は新しい、公共ノートに初めてを提出しようとする場合でも、私は次のエラーのポップアップを取得するIE 9、アンダー

ダイアログが作成されて閉じられ、残りのフォームとその要素はDOM内に残りました。その後のダイアログの呼び出しは古いフォームで起動します。これは、datepicker、検証、および送信が機能しなくなった理由です。このいずれかで...

$(this).dialog("destroy"); 

：

問題を修正するには、私はちょうどダイアログ関数のCloseイベントでこの行を置き換え

は

$(this).dialog("destroy").remove(); 

この新しい行は、ダイアログを破壊しますDOMからダイアログを保持していたdivを削除します（上記のコードの場合、変数 "dialogDiv"によって参照されます）。

すべての問題が解決しました。

Answer 2

あなたが提供したサンプルリンクで何をしているのかわかりませんが、（1）Chrome for Macにダイアログが表示されない、（2）Firefox 5 for Windowsでほとんど機能しない、 3）完全に不正な形式で、IE 9でレイアウトが乱れている。

Firebugを使ってページの動作を監視すると、文法上のエラーやその他の問題が発生する。私の推測では、カスケード効果を引き起こす小さなタイプミス、またはあらゆる種類の奇妙な動作を引き起こしているあなたのスクリプトの深刻な問題があることです。

私があなただったら、私はFirebugでそれを見てみましょう。最初にすべての構文エラーを取り除いてそこから行ってみましょう。 MUCHテストの後