未捕获的类型错误未定义不是一个函数

uncaught typeerror undefined is not a function

本文关键字:函数 一个 类型 未定义 错误      更新时间:2023-09-26

我是 JQuery 的新手,不知道如何处理未捕获TypeError: undefined is not a function等错误。我不知道如何按顺序排列下面的jQuery代码。有人可以按顺序安排吗?

@model Mvc4_WebGrid_CRUD.Models.PagedCustomerModel
@{
ViewBag.Title = "WebGrid CRUD Operations";
WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
grid.Bind(Model.Customer,
          autoSortAndPage: false,
          rowCount: Model.TotalRows
); 
}   
    <style type="text/css">
    #grid {
    clear: both;
    width: 80%;
    margin: 0px;
    border: 1px solid #c7c5c7;
}
    #grid thead, #grid tfoot td {
        text-align: left;
        font-weight: bold;
        height: 35px;
        color: #000;
        background-color: #d2d0d2;
        border-bottom: 1px solid #e2e2e2;
    }
    #grid td {
        padding: 4px 6px 0px 4px;
        vertical-align: top;
        background-color: #f5f5f5;
        border-bottom: 1px solid #e2e2e2;
    }
input {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 2px 0 2px 0px;
    padding: 2px;
    width: 170px;
}
 </style>   
 <script src="~/Scripts/jquery-1.8.2.js"></script>
 <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
//Here is where I get the error
    $("#results").dialog({
    autoOpen: false,
    title: 'Title',
    draggable: false,
    width: 500,
    height: 400,
    model: true,
    success: function () {
        alert('working fine');
    }
});
});
function openPopup() {
    $("#results").dialog("open");
}
</script>

下面的代码工作正常

<script type="text/javascript">
$(".add").live("click", function () {
    var existrow = $('.save').length;
    if (existrow == 0) {
        var index = $("#grid tbody tr").length + 1;
        var Name = "Name_" + index;
        var Address = "Address_" + index;
        var ContactNo = "ContactNo_" + index;
        var Save = "Save_" + index;
        var Cancel = "Cancel_" + index;
        var tr = '<tr class="alternate-row"><td></td><td><span> <input id="' + Name + '" type="text" /></span></td>' +
             '<td><span> <input id="' + Address + '" type="text" /></span></td>' +
             '<td><span> <input id="' + ContactNo + '" type="text" /></span></td>' +
             '<td> <a href="#" id="' + Save + '" class="save">Save</a><a href="#" id="' + Cancel + '"  class="icancel">Cancel</a></td>' +
         '</tr>';
        $("#grid tbody").append(tr);
    }
    else {
        alert('First Save your previous record !!');
    }
});
$(".icancel").live("click", function () {
    var flag = confirm('Are you sure to cancel');
    if (flag) {
        $(this).parents("tr").remove();
    }
});
$(".save").live("click", function () {
    var id = $("#grid tbody tr").length;
    var Name = $("#Name_" + id).val();
    var Address = $("#Address_" + id).val();
    var ContactNo = $("#ContactNo_" + id).val();
    if (id != "") {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("SaveRecord", "Home")',
            data: { "name": Name, "address": Address, "contactno": ContactNo },
            dataType: "json",
            beforeSend: function () { },
            success: function (data) {
                if (data.result == true) {
                    $("#divmsg").html("Record has been saved successfully !!");
                    setTimeout(function () { window.location.replace("WebGridCRUD"); }, 2000);
                }
                else {
                    alert('There is some error');
                }
            }
        });
    }
});
$(".edit").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var Name = "#Name_" + id;
    var spanName = "#spanName_" + id;
    var Address = "#Address_" + id;
    var spanAddress = "#spanAddress_" + id;
    var ContactNo = "#ContactNo_" + id;
    var spanContactNo = "#spanContactNo_" + id;
    $(Name).show();
    $(spanName).hide();
    $(Address).show();
    $(spanAddress).hide();
    $(ContactNo).show();
    $(spanContactNo).hide();
    $(this).hide();
    $("#Update_" + id).show();
    $("#Cancel_" + id).show();
});
$(".cancel").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var Name = "#Name_" + id;
    var spanName = "#spanName_" + id;
    var Address = "#Address_" + id;
    var spanAddress = "#spanAddress_" + id;
    var ContactNo = "#ContactNo_" + id;
    var spanContactNo = "#spanContactNo_" + id;
    $(Name).hide();
    $(spanName).show();
    $(Address).hide();
    $(spanAddress).show();
    $(ContactNo).hide();
    $(spanContactNo).show();
    $(this).hide();
    $("#Update_" + id).hide();
    $("#Edit_" + id).show();
});
$(".update").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var Name = $("#Name_" + id).val();
    var spanName = $("#spanName_" + id).val();
    var Address = $("#Address_" + id).val();
    var spanAddress = $("#spanAddress_" + id).val();
    var ContactNo = $("#ContactNo_" + id).val();
    var spanContactNo = $("#spanContactNo_" + id).val();
    if (id != "") {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateRecord", "Home")',
            data: { "id": id, "name": Name, "address": Address, "contactno": ContactNo },
            dataType: "json",
            beforeSend: function () {//alert(id);
            },
            success: function (data) {
                if (data.result == true) {
                    $("#Update_" + id).hide();
                    $("#Cancel_" + id).hide();
                    $("#Edit_" + id).show();
                    var Name = "#Name_" + id;
                    var spanName = "#spanName_" + id;
                    var Address = "#Address_" + id;
                    var spanAddress = "#spanAddress_" + id;
                    var ContactNo = "#ContactNo_" + id;
                    var spanContactNo = "#spanContactNo_" + id;
                    $(Name).hide();
                    $(spanName).show();
                    $(Address).hide();
                    $(spanAddress).show();
                    $(ContactNo).hide();
                    $(spanContactNo).show();
                    $(spanName).text($(Name).val());
                    $(spanAddress).text($(Address).val());
                    $(spanContactNo).text($(ContactNo).val());
                }
                else {
                    alert('There is some error');
                }
            }
        });
    }
});
$(".delete").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var flag = confirm('Are you sure to delete ??');
    if (id != "" && flag) {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("DeleteRecord", "Home")',
            data: { "id": id },
            dataType: "json",
            beforeSend: function () { },
            success: function (data) {
                if (data.result == true) {
                    $("#Update_" + id).parents("tr").remove();
                }
                else {
                    alert('There is some error');
                }
            }
        });
    }
});
</script>
<div id="divmsg" style="color: green; font-weight: bold"></div>
<a href="#" class="add">Add New</a>
<br />
<br />
@grid.GetHtml(
htmlAttributes: new { id = "grid" },
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
 columns: new[] {
    grid.Column("CustID", 
                header: "ID", canSort: false),
    grid.Column(header: "Name",format: @<span> <span id="spanName_@item.CustID">@item.Name</span> @Html.TextBox("Name_"+(int)item.CustID,(string)item.Name,new{@style="display:none"})</span>),
    grid.Column(header: "Address",format: @<span> <span id="spanAddress_@item.CustID">@item.Address</span> @Html.TextBox("Address_"+(int)item.CustID,(string)item.Address,new{@style="display:none"})</span>),
    grid.Column(header: "Contact No",format: @<span> <span id="spanContactNo_@item.CustID">@item.ContactNo</span> @Html.TextBox("ContactNo_"+(int)item.CustID,(string)item.ContactNo,new{@style="display:none"})</span>),
    grid.Column(header: "Action",format:@<text>
<a href="#" id="Edit_@item.CustID" class="edit">Edit</a>
<a href="#" id="Update_@item.CustID" style="display:none" class="update">Update</a>
<a href="#" id="Cancel_@item.CustID" style="display:none"  class="cancel">Cancel</a>
<a href="#" id="Delete_@item.CustID"  class="delete">Delete</a>
<a href="#" id="Details_@item.CustID" class="details">Details</a>
@Ajax.ActionLink("Ajax Link","AjaxView",new{Id=@item.CustID},new AjaxOptions    { HttpMethod="GET",UpdateTargetId="results",
 InsertionMode= InsertionMode.Replace, OnSuccess="openPopup"})
<div id="dialog-detail" style="display: none">
</div>
</text>)
})
<div class="dialog"></div>
<div class="results" style="display:none;"></div>

当我尝试在上面的代码中打开对话框时,我只是收到错误。我可以找到未捕获的错误。可能是因为jQuery不是为了休息而没事。任何人都可以将上述内容整理好。非常感谢

您有一个明显的问题可能会导致问题。你的 HTML 有一个带有 class="results" 的div,但你的选择器说#results(即找到一个带有 id="results" 的元素)

您可以将选择器更改为.results(如注释中@VeldMuijz建议的那样),您也有一个 Ajax ActionLink它需要一个 id,因为它指定了UpdateTargetId="results"

而是将 id 添加到结果div 中。

例如,更改此内容:

<div class="results" style="display:none;"></div>

对此:

<div id="results" style="display:none;"></div>

我还建议在MVC项目中将JS代码放在单独的JS文件中。Visual Studio不能在同一视图中同时调试Razor和Javascript,但如果脚本在自己的文件中,则可以