Question

我有一个主要的详细信息页面，我在外部文件中创建了一个javascript函数，该函数总是在提交任何表单时调用，此函数将ajax post调用发送到相应的ASP.NET MVC控制器，并在成功后将该控制器发送给将一个json对象返回到SubmitForm（）函数，该函数依次重新加载数据表实例并显示通知，它工作正常，但是现在我需要在同一页面中动态显示多个数据表，我总是会报错（无法读取属性“重新加载”未定义）

我尝试在SubmitForm（form，id =''）函数中添加一个可选参数，以防万一我的表单返回一个id，它会重新加载相应的数据表，但它给了我同样的错误。

//JS function in file.js
function SubmitForm(form, id = '') {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
    $.ajax({
        type: "POST",
        url: form.action,
        data: $(form).serialize(),
        success: function (data) {
            if (data.success) {
                //global variable that is always present in all pages
                datatable.ajax.reload();
                if (id) {
                    var tbl = $(id).dataTable();
                    tbl.ajax.reload();
                }
                $(form)[0].reset();
                $.notify(data.message, { globalPosition: "top center", className: "success" });
                if (data.type != "Add") {
                    $("#myModal").modal('hide');
                }
            }
        }
    });
}
return false;
}
  //MVC FORM in partial view
@using (Html.BeginForm("AddOrEditSE", "ProjectStaff", FormMethod.Post, new 
{ id = "form", onsubmit = "return SubmitForm(this,'#SE')" }))
{
    // elements
}

预期结果：

Notify.js成功消息，并重新加载相应的数据表（在本例中为#SE）

实际结果：

错误无法读取未定义的属性'reload'

Answer 1

经过一些挖掘，我设法解决了这个问题，我在变量中定义了数据表瞬间，并以onsubmit属性的形式发送了该变量名，在if语句中，我通过使用variablename.DataTable（）访问了数据表API。 ajax.reload（）;

function SubmitForm(form, tbl = null) {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
    $.ajax({
        type: "POST",
        url: form.action,
        data: $(form).serialize(),
        success: function (data) {
            if (data.success) {
                datatable.ajax.reload();
                if (tbl) {
                    //to access datatable instance, use varname.DataTable().
                    tbl.DataTable().ajax.reload();
                }
                $(form)[0].reset();
                $.notify(data.message, { globalPosition: "top center", className: "success" });
                if (data.type != "Add") {
                    $("#myModal").modal('hide');
                }
            }
        }
    });
}
return false;
}

表单局部视图

@using (Html.BeginForm("AddOrEditSE", "ProjectStaff", FormMethod.Post, new { id = "form", onsubmit = "return SubmitForm(this,SETable)" }))
{
      // elements
}

索引视图

  var SETable;
  SETable = $("#SE").dataTable({ //parameters });

将Jquery DataTables实例传递给onsubmit函数

1 个答案: