为什么我会得到周期性的未捕获类型错误:无法读取属性'值'在设置多个下拉列表的值时，为undefined
Why do I get periodic Uncaught TypeError: Cannot read property 'value' of undefined when setting the value of multiple dropdownlists?
前几天我发布了一个关于这类错误的问题，一直在寻找解决方案和原因，但没有找到合适的解决方案或原因来解决我遇到的问题，我遇到的原因和解决方案之一是这个
未捕获的TypeError:无法设置null的属性"foo"，未捕获的类型错误：无法设置未定义的属性"foo"相关错误：TypeError:someVal未定义，无法设置未定义或空引用的属性"foo"
试图将null或未定义写入，就好像它是一个对象一样。例如：
var someVal=null；someVal.foo=1；如何修复这个错误：这通常也是由打字错误引起的。检查错误指向的行附近的变量名。
我已经复习了我的html和变量，我没有打字错误。
然后我在我的函数中添加了一个try-catch，它填充了我的下拉列表，这里是
TypeError:无法读取未定义的属性"value"在MaterialUpdateData（评估(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:4994），：254:45）在Object.success（在(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:4994），：290:13）在c(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:26036）在Object.fireWith〔as resolveWith〕(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:26840）在k(http://localhost:23289/Scripts/jquery-1.10.2.分钟：23:14258）位于XMLHttpRequest.r(http://localhost:23289/Scripts/jquery-1.10.2.分钟：23:18646）
以下是在MaterialUpdateData（eval at(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:4994），：254:45）
$("#Type").data('kendoDropDownList').value(parseInt(Material[0].MaterialTypeID));
以下是Object.success（eval at(http://localhost:23289/Scripts/jquery-1.10.2.分钟：21:4994），：290:13）
function GetMaterialDataByID(id) {
$.ajax({
type: "GET",
url: URLParam.GetMaterialForUpdate + "?id=" + id,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
MaterialUpdateData(data);
}
})
}
现在奇怪的是，错误从来没有发生在完全相同的地方，有时它指向这个
$("#Category").data('kendoDropDownList').value(parseInt(Material[0].MaterialCategoryID));
或者这个
$("#ddBuyUOM").data('kendoDropDownList').value(parseInt(Material[0].PurchaseUOMID));
或者这个
$("#ddSellUOM").data('kendoDropDownList').value(Material[0].SellUOMID);
我不知道发生了什么，从昨天和今天早上开始，我一直在寻找解决方案和/或原因，但我的问题还没有得到解决。
编辑
因此，经过进一步的调查，我注意到我返回的数据有时是一个数组，有时是对象，并将我的控件添加到一个var中，将typeof添加到我的每个控件var中，有时它们会返回为未定义的。
对我来说，这对我来说没有意义，有时我必须多次重新选择唱片才能一切正常。可以肯定地说，我的代码被破坏了。
MaterialJS文件这是关于我所有问题的文件，如果有点乱，我很抱歉
$(document).ready(function () {
// Validation
MaterialValidation();
// Loading of dropdownlists
LoadCategoryDropdownlist();
LoadTypeDropdownlist();
//LoadSubTypeDropdownlist(1);
LoadActiveVendorDropdownlist();
GlobalScript.GetAllUOM("BuyUOM");
GlobalScript.GetAllUOM("SellUOM");
if (HomeStorage.Keys.AddOrEdit == "Add") {
console.log("Add");
}
else {
GetMaterialDataByID(HomeStorage.Keys.CurrentID);
}
});
function NewMaterialForVendor() {
}
// #region DropdownLists
// Category
function LoadCategoryDropdownlist() {
$.ajax({
type: "GET",
url: URLParam.GetMaterialCategory,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowCategoryDropdownlist(data);
}
});
}
function ShowCategoryDropdownlist(catData) {
$("#Category").kendoDropDownList({
dataTextField: "MaterialCategory1",
dataValueField: "MaterialCategoryID",
dataSource: catData,
index: 0,
optionLabel: "Select Category"
});
}
// Type
function LoadTypeDropdownlist() {
$.ajax({
type: "GET",
url: URLParam.GetMaterialType,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowTypeDropdownlist(data);
}
});
}
function ShowTypeDropdownlist(typeData) {
$("#Type").kendoDropDownList({
dataTextField: "MaterialType1",
dataValueField: "MaterialTypeID",
dataSource: typeData,
index: 0,
optionLabel: "Select Type",
change: function (e) {
//var dd = $("#SubType").data("kendoDropDownList");
//dd.enable(true);
//console.log(this.value());
LoadSubTypeDropdownlist(this.value());
}
});
}
// SubType
function LoadSubTypeDropdownlist(id) {
$.ajax({
type: "GET",
url: URLParam.GetMaterialSubType + "?id=" + id,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowSubTypeDropdownlist(data);
}
});
//ShowSubTypeDropdownlist(data);
}
function ShowSubTypeDropdownlist(subData) {
$("#SubType").kendoDropDownList({
dataTextField: "MaterialSubType1",
dataValueField: "MaterialSubTypeID",
dataSource: subData,
index: 0,
optionLabel: "Select SubType",
change: function (e) {
//console.log(this.value());
}
});
}
// Active Vendors
function LoadActiveVendorDropdownlist() {
$.ajax({
type: "GET",
url: URLParam.GetActiveVendors,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowActiveVendorDropdownlist(data);
}
});
}
function ShowActiveVendorDropdownlist(typeData) {
$("#DefaultVendor").kendoDropDownList({
dataTextField: "VendorName",
dataValueField: "VendorID",
dataSource: typeData,
index: 0,
optionLabel: "Select Vendor"
});
}
// #endregion
// #region New Material Data
function NewMaterialToSubmit() {
var mv = {
MaterialCategoryID: $("#Category").val(),
MaterialTypeID: $("#Type").val(),
MaterialSubTypeID: $("#SubType").val(),
DLength: $("#txtLength").val(),
DWidth: $("#txtWidth").val(),
DHeight: $("#txtSize").val(),
PurchaseUOMID: $("#ddBuyUOM").val(),
SellUOMID: $("#ddSellUOM").val(),
VendorID: $("#DefaultVendor").val(),
MaterialDetail: null,
Description: $("#txtDescription").val(),
PurchaseItemQuantity: $("#txtPurchaseQuantity").val(),
SellItemQuantity: $("#txtSellQuantity").val(),
NewPrice: null,
RemodelPrice: $("#txtRemodel").val(),
ServicePrice: $("#txtRemodel2").val()
};
console.log(mv);
return mv;
}
// #endregion
// #region Save Material
function SubmitNewMaterial() {
var newMaterial = NewMaterialToSubmit();
$.ajax({
type: "POST",
url: URLParam.AddNewMaterial,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(newMaterial),
success: function (data, textStatus, jqXHR) { },
complete: function (e) {
ClearMaterialFields();
GetMaterialGridData();
//CloseTheWindow();
}
})
}
// #endregion
// #region Update Material By ID
function UpdateMaterial(id) {
var updatedMaterial = NewMaterialToSubmit();
$.ajax({
type: "POST",
url: URLParam.UpdateMaterial + "?id=" + id,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(updatedMaterial),
success: function (data, textStatus, jqXHR) { },
complete: function (e) {
ClearMaterialFields();
GetMaterialGridData();
//CloseTheWindow();
}
})
}
// #endregion
// #region Get Material UpdateData
function MaterialUpdateData(Material) {
try{
//var categoryDropdown = $("#Category").data('kendoDropDownList');
//console.log(typeof (categoryDropdown));
//console.log(categoryDropdown);
$("#Category").data('kendoDropDownList').value(parseInt(Material[0].MaterialCategoryID));
$("#Type").data('kendoDropDownList').value(parseInt(Material[0].MaterialTypeID));
$("#ddBuyUOM").data('kendoDropDownList').value(parseInt(Material[0].PurchaseUOMID));
bu.text(Material[0].UnitOfMeasure);
$("#ddSellUOM").data('kendoDropDownList').value(Material[0].SellUOMID);
su.text(Material[0].UnitOfMeasure2);
var dv = $("#DefaultVendor").data('kendoDropDownList');//.value(Material[0].VendorID);
dv.text(Material[0].VendorName);
$("#txtDescription").val(Material[0].Description);
$("#txtWidth").val(Material[0].DWidth);
$("#txtLength").val(Material[0].DLength);
$("#txtSize").val(Material[0].DHeight);
$("#txtRemodel").val(Material[0].RemodelPrice);
$("#txtRemodel2").val(Material[0].ServicePrice);
$("#txtPurchaseQuantity").val(Material[0].PurchaseItemQuantity);
$("#txtSellQuantity").val(Material[0].SellItemQuantity);
}
catch (e) {
//alert(e);
console.log(e);
}
}
function GetMaterialDataByID(id) {
$.ajax({
type: "GET",
url: URLParam.GetMaterialForUpdate + "?id=" + id,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
MaterialUpdateData(data);
}
})
}
// #endregion
// #region Clear Material
function ClearMaterialFields() {
// Dropdowns
//$("#ddState").val(-1);
// End Dropdowns
$("#txtDescription").val("");
$("#txtDetail").val("");
$("#txtWidth").val("");
$("#txtLength").val("");
$("#txtSize").val("");
$("#txtPurchaseQuantity").val("");
$("#txtSellQuantity").val("");
}
// #endregion
// #region Validation
function ResetMaterialForm() {
$("#MaterialData").data("bootstrapValidator").resetForm();
}
function MaterialValidation() {
var validator = $("#MaterialData").bootstrapValidator({
//excluded: ':disabled',
//container: 'tooltip',
//feedbackIcons: {
// valid: "glyphicon glyphicon-ok",
// invalid: "glyphicon glyphicon-remove",
// validating: "glyphicon glyphicon-refresh"
//},
fields: {
description: {
message: "Description is required",
validators: {
notEmpty: {
message: "Please add Description"
}
}
},
detail: {
message: "Detail is required",
validators: {
notEmpty: {
message: "Please add Detail"
}
}
},
width: {
message: "Width is required",
validators: {
notEmpty: {
message: "Please add Width"
}
}
},
length: {
message: "Length is required",
validators: {
notEmpty: {
message: "Please add Length"
}
}
},
size: {
message: "Size is required",
validators: {
notEmpty: {
message: "Please add Size"
}
}
},
new1: {
message: "New is required",
validators: {
notEmpty: {
message: "Please add New"
}
}
},
new2: {
message: "New is required",
validators: {
notEmpty: {
message: "Please add New"
}
}
},
remodel: {
message: "Remodel is required",
validators: {
notEmpty: {
message: "Please add Remodel"
}
}
},
remodel2: {
message: "Remodel is required",
validators: {
notEmpty: {
message: "Please add Remodel"
}
}
},
quantity: {
message: "Quantity is required",
validators: {
notEmpty: {
message: "Please add Quantity"
}
}
},
quantity2: {
message: "Quantity2 is required",
validators: {
notEmpty: {
message: "Please add Quantity2"
}
}
},
uom: {
message: "UOM is required",
validators: {
notEmpty: {
message: "Please add UOM"
}
}
},
uom2: {
message: "UOM2 is required",
validators: {
notEmpty: {
message: "Please add UOM2"
}
}
}
}
});
}
// #endregion
function CloseTheWindow() {
$("#window").data("kendoWindow").destroy();
localStorage.clear();
}
$("#btnCloseMaterialEditor").click(function () {
ClearMaterialFields();
CloseTheWindow();
GetMaterialGridData();
});
$("#btnSaveMaterial").click(function () {
var validator = $("#MaterialData").data("bootstrapValidator");
validator.validate();
if (validator.isValid()) {
if (HomeStorage.Keys.AddOrEdit == "Add") {
SubmitNewMaterial();
ResetMaterialForm();
CloseTheWindow();
}
else if (HomeStorage.Keys.AddOrEdit == "Edit") {
UpdateMaterial(HomeStorage.Keys.CurrentID);
ResetMaterialForm();
CloseTheWindow();
}
}
});
我的GlobalMethods脚本这只是为了以防万一，有人想看看我对BuyUOM和SellUOM的填充来自
// #region Get IDS from Grid
var GlobalScript = {
GetAllStates: function () {
var self = this;
$.ajax({
type: "GET",
url: URLParam.GetStatesForDropdown,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
self.ShowStates(data);
// or this way
// GlobalScript.ShowStates(data);
}
})
},
ShowStates: function (stateData) {
$("#acVendorState").kendoDropDownList({
dataSource: stateData,
dataTextField: "StateName",
dataValueField: "StateID",
animation: false,
optionLabel: {
StateName: "-- Select State --"
}
});
},
GetAllUOM: function (whichDropdown) {
var self = this;
$.ajax({
type: "GET",
url: URLParam.GetUOMForDropdown,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
self.ShowUOM(data, whichDropdown);
// or this way
// GlobalScript.ShowStates(data);
}
});
},
ShowUOM: function (uomData, whichDropdown) {
$("#dd"+whichDropdown).kendoDropDownList({
dataSource: uomData,
dataTextField: "UnitOfMeasure1",
dataValueField: "UnitOfMeasureID",
animation: false,
index: 0,
optionLabel: {
UnitOfMeasure1: "Select"
}
//change: function (e) {
// var value = this.value();
// alert(value);
//}
});
},
GetGridCheckboxIDs: function (gridName, idToGet) {
var idsToSend = [];
var grid = $("#" + gridName).data("kendoGrid")
var ds = grid.dataSource.view();
for (var i = 0; i < ds.length; i++) {
var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
var checkbox = $(row).find(".checkbox");
if (checkbox.is(":checked")) {
idsToSend.push(ds[i].idToGet);
}
}
HomeStorage.KeysAssignmentIDString = idsToSend;
}
}
Html这是这个脚本的所有html
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MaterialEditor</title>
<style>
.max-size {
max-width: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: white;
background-color: #347AB6;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.panel {
border-radius: 0px;
}
.k-window div.k-window-content {
overflow: hidden;
}
</style>
<script src="~/Scripts/Customjs/GlobalMethods/GlobalMethodsJS.js"></script>
</head>
<body>
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#MaterialData" data-toggle="tab">Material Data</a></li>
<li><a href="#MaterialColorAssignment" data-toggle="tab">Material Color Assignment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="col-md-12">
<fieldset class="Myfieldset">
<div class="form-group">
<div class="col-md-4">
@*<select class="form-control max-size" name="categories" id="Category"></select>*@
<input id="Category" class="form-control max-size" />
</div>
<div class="col-md-4">
@*<select class="form-control" name="type" id="Type"></select>*@
<input id="Type" class="form-control max-size" />
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
<div class="form-group">
<label for="txtDescription" class="control-label col-md-2" id="lblDetail"><b>Description</b></label>
<div class="col-md-9">
<input id="txtDescription" type="text" class="form-control max-size" name="description" />
</div>
@*<label for="txtDetail" class="control-label col-md-1" id="lblDetail"><b>Detail</b></label>
<div class="col-md-3">
<input id="txtDetail" type="text" class="form-control" name="detail" />
</div>*@
</div>
</fieldset>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" />
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" />
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" />
</div>
</div>
<br />
<fieldset class="Myfieldset">
<div class="panel panel-primary col-md-6">
<div class="panel-heading">Pricing and Labor Cost</div>
<div class="panel-body">
<div class="row">
<label for="txtDescription" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtDescription" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
@*<div class="row">
<label for="txtNew" class="control-label col-md-2" id="lblNew">New</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtNew" type="text" class="form-control" name="new1" />
</div>
<div class="col-md-4">
<input id="txtNew2" type="text" class="form-control" name="new2" />
</div>
</div>*@ <!-- end row -->
<br />
<div class="row">
<label for="txtRemodel" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" />
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" />
</div>
</div> <!-- end row -->
<div class="row">
<br />
<br />
</div>
</div>
</div>
<div class="panel panel-primary col-md-6">
<div class="panel-heading">Purchasing and Sales</div>
<div class="panel-body">
<div class="row">
<div class="row">
<label for="txtDescription" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtDescription" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<div class="row">
<label for="txtQuantity" class="control-label col-md-2" id="lblQuantity">Quantity</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" />
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" />
</div>
</div> <!-- end row -->
<br />
<div class="row">
<label for="txtUOM" class="control-label col-md-2" id="lblUOM">U.O.M</label>
<div class="col-md-1 col-md-offset-2">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;"></select>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;"></select>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
<div class="form-group">
<label for="ddDefaultVendor" class="control-label col-md-2" id="lblDefaultVendor">Default Vendor</label>
<div class="col-md-9">
<select class="form-control" name="defaultvendor" id="DefaultVendor"></select>
</div>
</div>
</fieldset>
</div>
</div><!--End Material Data-->
<div class="tab-pane" id="MaterialColorAssignment">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material Color Assignment</strong></div>
<div class="panel-body">
<div id="MaterialColorAssignmentGrid">
</div>
</div>
</div>
</div><!--End Material Assignment-->
</div>
<div class="form-group col-md-12">
<button id="btnCloseMaterialEditor" type="button" class="btn btn-primary pull-right">Close</button>
<button id="btnSaveMaterial" type="button" class="btn btn-primary pull-right">Save</button>
@*<button id="btnTest" type="button" class="btn btn-danger pull-right">Test</button>*@
</div>
</div>
<script src="~/Scripts/Customjs/Material/MaterialEditorJS.js"></script>
</body>
</html>
您有一个竞赛条件。
您的KendoDropDownList仅在ajax调用以填充它们（async）之后绑定，并且您的GetMaterialDataByID在它们全部绑定之前正在调用MaterialUpdateData。这就是错误条件更改为不同行的原因。
您可以延迟此呼叫，直到您的所有kendoDropDownList都可用
function MaterialUpdateData(Material) {
var category = $("#Category").data('kendoDropDownList');
var type = $("#Type").data('kendoDropDownList');
if (category == null || type == null)
return setTimeout(function(){ MaterialUpdateData(Material); }, 20); // kendoDropLists not bound/populated yet
相关文章：
- 将服务中的函数绑定到$scope(错误:无法设置undefined的属性'onChange'）
- 如果我们设置undefined的值会发生什么
- 为什么ajax回调在我的本地变量中设置undefined
- app.render[TypeError:无法设置undefined的属性'content']在Node
- jQuery Tablesorter 错误“未捕获的类型错误:无法设置 undefined 的属性'count&
- Javascript 数组:将条目设置为 undefined
- 类型错误:无法在模块导出中设置 undefined 的属性
- Angularjs 绑定到 JSON 会将值设置为 undefined
- GoogleMaps v3 autocomplete.getBounds(）在设置后返回undefined
- Jquery ui slider tabs不能设置undefined属性
- jquery-mobile事件顺序和为什么setTimeout设置$this为undefined
- 为什么我不能将NODE_ENV设置为undefined ?
- Angular不能设置undefined属性
- jQuery .val()在设置后立即产生undefined
- 为什么将复选框'的假值设置为'undefined'导致添加ng-invalid
- jQuery多维数组(动态键)-不能设置属性undefined
- 将Audio对象设置为undefined会导致内存泄漏吗?
- “undefined"不是检查表数组上的函数设置侦听器
- 如何处理'undefined'当我在Javascript中为对象设置方法时，从控制台中返回
- JavaScript 无法设置 undefined 的属性
