[英]Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
I'm getting this error and it is originating from jquery framework. 我收到此错误,它来自jquery框架。 When i try to load a select list on document ready i get this error. 当我尝试在文档准备好时加载选择列表时,我收到此错误。 I can't seem to find why i'm getting this error. 我似乎无法找到为什么我得到这个错误。
It works for the change event, but i'm getting the error when trying to execute the function manually. 它适用于更改事件,但我在尝试手动执行该函数时收到错误。
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined -> jquery-2.1.1.js:7300 未捕获的TypeError:无法读取未定义的属性'toLowerCase' - > jquery-2.1.1.js:7300
Here is the code 这是代码
$(document).ready(function() {
$("#CourseSelect").change(loadTeachers);
loadTeachers();
});
function loadTeachers() {
$.ajax({
type: 'GET',
url: '/Manage/getTeachers/' + $(this).val(),
dataType: 'json',
cache: false,
success:function(data) {
$('#TeacherSelect').get(0).options.length = 0;
$.each(data, function(i, teacher) {
var option = $('<option />');
option.val(teacher.employeeId);
option.text(teacher.name);
$('#TeacherSelect').append(option);
});
},
error: function() {
alert("Error while getting results");
}
});
}
When you call loadTeachers()
on DOMReady the context of this
will not be the #CourseSelect
element. 当你调用loadTeachers()
在domready中的情况下this
不会是#CourseSelect
元素。
You can fix this by triggering a change()
event on the #CourseSelect
element on load of the DOM: 您可以通过在加载DOM时在#CourseSelect
元素上触发change()
事件来解决此问题:
$("#CourseSelect").change(loadTeachers).change(); // or .trigger('change');
Alternatively can use $.proxy
to change the context the function runs under: 或者可以使用$.proxy
来更改函数运行的上下文:
$("#CourseSelect").change(loadTeachers);
$.proxy(loadTeachers, $('#CourseSelect'))();
Or the vanilla JS equivalent of the above, bind()
: 或者上面的vanilla JS等价物, bind()
:
$("#CourseSelect").change(loadTeachers);
loadTeachers.bind($('#CourseSelect'));
I had the same problem, I was trying to listen the change on some select and actually the problem was I was using the event instead of the event.target which is the select object. 我有同样的问题,我试图在一些选择上听取更改,实际上问题是我使用事件而不是event.target这是选择对象。
INCORRECT : 不正确:
$(document).on('change', $("select"), function(el) {
console.log($(el).val());
});
CORRECT : 正确:
$(document).on('change', $("select"), function(el) {
console.log($(el.target).val());
});
It fails " when trying to execute the function manually
" because you have a different 'this'. 它“ when trying to execute the function manually
失败”因为你有一个不同的'this'。 This will refer not to the thing you have in mind when invoking the method manually, but something else, probably the window object, or whatever context object you have when invoking manually. 这不是指在手动调用方法时想到的东西,而是指其他东西,可能是窗口对象,或者手动调用时的任何上下文对象。
It causes the error when you access $(this).val()
when it called by change event this
points to the invoker ie CourseSelect
so it is working and and will get the value of CourseSelect
. 当你通过更改事件调用它来访问$(this).val()
时,它会导致错误, this
指向调用者,即CourseSelect
因此它正在工作,并且将获得CourseSelect
的值。 but when you manually call it this
points to document. 但是当你手动调用它时, this
指向文档。 so either you will have to pass the CourseSelect
object or access directly like $("#CourseSelect").val()
instead of $(this).val()
. 所以你要么必须传递CourseSelect
对象,要么直接访问$("#CourseSelect").val()
而不是$(this).val()
。
This Works For me !!! 这对我有用!!!
Call a Function without Parameter 调用不带参数的函数
$("#CourseSelect").change(function(e1) {
loadTeachers();
});
Call a Function with Parameter 使用参数调用函数
$("#CourseSelect").change(function(e1) {
loadTeachers($(e1.target).val());
});
your $(this).val() has no scope in your ajax call, because its not in change event function scope 你的$(this).val()在你的ajax调用中没有作用域,因为它不在更改事件函数范围内
May be you implemented that ajax call in your change event itself first, in that case it works fine. 可能是你首先在你的更改事件本身中实现了ajax调用,在这种情况下它可以正常工作。 but when u created a function and calling that funciton in change event, scope for $(this).val() is not valid. 但是当你创建一个函数并在change事件中调用该函数时,$(this).val()的作用域无效。
simply get the value using id selector instead of 只需使用id选择器而不是获取值
$(#CourseSelect).val()
whole code should be like this: 整个代码应该是这样的:
$(document).ready(function ()
{
$("#CourseSelect").change(loadTeachers);
loadTeachers();
});
function loadTeachers()
{
$.ajax({ type:'GET', url:'/Manage/getTeachers/' + $(#CourseSelect).val(), dataType:'json', cache:false,
success:function(data)
{
$('#TeacherSelect').get(0).options.length = 0;
$.each(data, function(i, teacher)
{
var option = $('<option />');
option.val(teacher.employeeId);
option.text(teacher.name);
$('#TeacherSelect').append(option);
});
}, error:function(){ alert("Error while getting results"); }
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.