javascript - net - el tipo de error no capturado indefinido no es una función

asp net mvc jquery

Question

Soy nuevo en JQuery y no sé cómo manejar errores como TypeError: undefined is not a function . No sé cómo poner el código jQuery a continuación en orden. ¿Puede alguien arreglarlo en orden ...?

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

El siguiente código funciona bien

<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="[email protected]">@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="[email protected]">@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="[email protected]">@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="[email protected]" class="edit">Edit</a>
<a href="#" id="[email protected]" style="display:none" class="update">Update</a>
<a href="#" id="[email protected]" style="display:none"  class="cancel">Cancel</a>
<a href="#" id="[email protected]"  class="delete">Delete</a>
<a href="#" id="[email protected]" class="details">Details</a>
@Ajax.ActionLink("Ajax Link","AjaxView",new{[email protected]},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>

Acabo de recibir el error cuando intento abrir el cuadro de diálogo en el código anterior. Puedo encontrar un error no detectado. Puede ser por el jQuery no está en orden descansar todo está bien. ¿Alguien puede poner lo anterior en orden? Muchas gracias

Answer 1

Usted tiene un problema obvio que puede causar problemas. Su HTML tiene un div con class="results" , pero su selector dice #results (es decir, encuentra un elemento con id="results" )

Puede cambiar el selector a .results (como @VeldMuijz se sugiere en el comentario), pero también tiene un Ajax ActionLink que requiere una identificación, ya que especifica UpdateTargetId="results"

En lugar de eso, agregue el id a su div de resultados.

por ejemplo, cambiar esto:

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

a esto:

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

También recomiendo con proyectos de MVC que coloque su código JS en archivos JS separados. Visual Studio no puede depurar tanto Razor como Javascript en la misma vista, pero puede hacerlo si el script está en su propio archivo.