1
我正在開發一個MVC4移動應用程序，它使用幾種通過ajax加載到佈局部分的表單。我已經關閉了Ajax的jQuery移動設置，因此我可以自己管理Ajax。大多數表單工作正常，負載和通過Ajax提交，因爲他們應該。但是，到目前爲止，有一種形式拒絕將表單提交併通過ajax像其他表單一樣提交表單。首先，形式，當用戶點擊添加聯繫人加載，這工作得很好：jQuery Ajax表單提交失敗
// Handle the add contact button click
$('#btnAddNewContact').on('click', function (e) {
e.preventDefault();
// Make sure a location was selected first.
var locationID = $('#cboLocation').val();
if (locationID.length === 0) {
//$('#alertTitle').text('REQUIRED');
$('#alertMsg').html("<p>A Contact must be associated with a Location.</p><p>Please select or add a Location first.</p>");
$('#alertDialogDisplay').click();
} else {
SaveOpportunityFormState();
$.cookie('cmdLocationId', locationID, { path: '/' });
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'GET',
cache: false,
success: function (response, status, XMLHttpRequest) {
$('section.ui-content-Override').html(response);
// Refresh the page to apply jQuery Mobile styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
},
complete: function() {
$.cookie('cmdPreviousPage', '/Opportunity/Add', { path: '/' });
AddContactLoad();
ShowSearchHeader(false);
$.mobile.loading('hide');
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
注意，後成功加載形式AddContactLoad()功能被激發。這工作得很好，在這裏是代碼：
function AddContactLoad() {
$('#contactVM_Phone').mask('(999) 999-9999? x99999');
$('#frmAddContact').on('submit', function (e) {
e.preventDefault();
if ($(this).valid()) {
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'POST',
cache: false,
data: $(this).serialize(),
success: function (response, status, XMLHttpRequest) {
if (!response) { // Success
ReturnToAddOpportunity();
} else { // Invalid Form
$('section.ui-content-Override').html(response);
// Force jQuery Mobile to apply styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
AddContactLoad();
$.mobile.loading('hide');
}
},
complete: function() {
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
$('#btnCancel').on('click', function (e) {
e.preventDefault();
// See where add contact was called from.
var previousPage = $.cookie('cmdPreviousPage');
if (previousPage.indexOf("Detail") >= 0) {
ReturnToOpportunityDetails();
} else {
ReturnToAddOpportunity();
}
return false;
});
}
如果我點擊取消按鈕，該代碼被解僱，所以我知道這是工作壓力太大。這裏是我的表單代碼：
@using (Html.BeginForm("Add", "Contact", FormMethod.Post, new { @id = "frmAddContact" }))
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()
-- Form Fields Here --
<div class="savecancel" >
<input type="submit" value="Save" data-mini="true", data-theme="b", data-inline="true" />
<a href="#" id="btnCancel" data-role="button" data-inline="true" data-theme="b" data-mini="true">Cancel</a>
</div>
}
正如你所看到的形式命名frmAddContact，這是什麼AddContactLoad()功能附加提交事件。爲了節省我的資金，我無法弄清楚爲什麼表單不會像應用程序中的其他任何表單一樣通過ajax提交。我是否缺少某種初始化，我只是不知道。如果任何人都可以請幫助，我會很感激它！
你有沒有看過你的開發者工具控制檯，看看可能存在哪些錯誤或問題？ –
是的，我有，並沒有錯誤。這真讓我感到困惑。我無法看到我在這裏做什麼與應用程序中其他任何地方工作正常的任何區別。 – Darrell
這裏有一些我注意到可能會幫助或可能會增加挫折。當我點擊保存而沒有在表單域中輸入任何數據時，不顯眼的ajax驗證會觸發並且提交事件觸發！但是，如果表單字段全部填寫正確，則提交事件不會觸發！ – Darrell