Question

我正在开发一个MVC4移动应用程序，它使用多个表单，通过ajax加载到布局的一个部分。我已经关闭了Ajax的jQuery移动设置，所以我可以自己管理Ajax。大多数表单工作正常，负载并通过ajax提交，因为他们应该。但是，到目前为止，有一种形式拒绝触发表单提交并通过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帖子提交。我错过了某种初始化，我只是不知道。如果有人可以请求帮助我真的很感激!!

Answer 1

事实证明，我为电话号码创建了一个自定义的不显眼的Ajax验证器，然后复制并粘贴它以使用邮政编码执行相同操作。不幸的是，在这个过程中我忘了重命名变量，因此在验证脚本中发生了导致问题的错误。与此同时，如果您正在阅读本文，可以在此处记下代码以及如何通过Ajax和jQuery mobile将HTML注入页面。我从来没有在书中或网上找到它，它包含一些非常有用的方法和语法。在表单上提交我正在检查空响应的原因是我只是从控制器返回null以验证表单是否有效并且保存工作在这种情况下我将它们发送到不同的HTML注入，即它们最初来自的页面。如果未返回null，则使用包含原始表单和错误标记的HTML注入该页面，以便用户可以进行更正，然后重新提交。我也在调用一个表单加载方法，一旦将HTML注入主页面，就会将处理程序附加到HTML上。希望这有助于某人！

jQuery Ajax表单提交失败

1 个答案: