1
我一直一個簡單的jQuery對話框的形式對載荷通過AJAX。它使用JQuery Tools進行驗證，如果成功，則通過AJAX提交併關閉。下面是打開通過AJAX的對話框代碼（通過一個可愛的小鏈接）：jQuery UI的對話形式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」。與它自己的處理腳本，一旦填寫併成功提交該對話框負載，通過AJAX發送的數據，如果沒有錯誤，會自行關閉和破壞了驗證和對話：
<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都能正確啓動，每個人都很開心。然後，當你第二次嘗試時，驗證器不再工作，點擊創建註釋按鈕基本上什麼也不做......對話框永遠不會提交，並且AJAX永遠不會觸發。
我並確定它關閉後破壞對話和驗證。對話框重新打開，但日期選擇器在第二次打開時不起作用，沒有更多的驗證並且表單無法提交。
遺憾的是我，包括所有的代碼，但我真的不知道哪裏的錯誤是在這裏。我確信它與我關閉它的方式有關（或者重新打開它，或者兩者都有）。誰能幫忙？
沒有東西立刻跳出來。我不認爲你有這個網頁的公開訪問版本，是嗎？ – jefflunt
我不知道在這裏添加它，因爲它只能用於測試目的，但在這裏是：http://cp.thewebpro.com/clients/test_dialog.php – Michael
輕微切線，而不是問題，但我發現了一個小功能錯誤，您可能想要修復。當您單擊Create Note鏈接並顯示對話框時，單擊Create Note按鈕顯示錯誤工具提示，然後立即單擊Cancel按鈕，對話框將消失，但錯誤工具提示不會。只是FYI。 –