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

2022-01-11 00:00:00 jquery jquery-plugins javascript asp.net-mvc-4

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

I am new to JQuery and doesn't know how to handle errors like uncaught TypeError: undefined is not a function. I don't know how to put the jQuery code below in order. Can someone please arrange it in order....

@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>

下面的代码可以正常工作

The below code works fine

<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 不是为了休息一切都很好.谁能把上面的顺序整理一下.非常感谢

I just get the error when I try to open the dialog box in above code. I can find Uncaught error. Might be because of the jQuery is not in order rest all it is fine. Can anyone put the above in order. Many thanks

推荐答案

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

You have one obvious issue that may cause problems. Your HTML has a div with class="results", but your selector says #results (i.e. find an element with id="results")

您可以将选择器更改为 .results(正如@VeldMuijz 在评论中建议的那样)，但是您也有一个 Ajax ActionLink 需要一个 id，因为它指定 UpdateTargetId="results"

You could change the selector to .results (as @VeldMuijz suggested in comment), but you also have an Ajax ActionLink which requires an id as it specifies UpdateTargetId="results"

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

Instead add the id to your results div.

例如改变这个:

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

到这里:

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

我还建议在 MVC 项目中将 JS 代码放在单独的 JS 文件中.Visual Studio 无法在同一视图中同时调试 Razor 和 Javascript，但如果脚本位于其自己的文件中，则可以.

I also recommend with MVC projects that you put your JS code in separate JS files. Visual Studio can't debug both Razor and Javascript in the same view, but it can if the script is in its own file.

相关文章