我是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>
当我尝试打开上面代码中的对话框时，我收到错误。我可以找到Uncaught错误。可能是因为jQuery没有按顺序休息一切都很好。任何人都可以把上面的顺序。非常感谢
答案 0 :(得分：0)
您有一个明显的问题，可能会导致问题。您的HTML有一个class="results"的div，但您的选择器显示#results（即找到id="results"的元素）
你可以将选择器更改为.results（如评论中提到的@VeldMuijz），但是你还有一个需要的Ajax ActionLink指定UpdateTargetId="results"
而是将id添加到结果div。
e.g。改变这个：
<div class="results" style="display:none;"></div>
到此：
<div id="results" style="display:none;"></div>
我还建议您使用MVC项目将JS代码放在单独的JS文件中。 Visual Studio无法在同一视图中调试Razor和Javascript，但如果脚本位于自己的文件中，则可以。