Ronald van Helden Ronald van Helden - 2 months ago 24
Ajax Question

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

I'm getting this error and it is originating from jquery framework.
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


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");
}
});
}

Answer

When you call loadTeachers() on DOMReady the context of this will not be the #CourseSelect element.

You can fix this by triggering a change() event on the #CourseSelect element on load of the DOM:

$("#CourseSelect").change(loadTeachers).change(); // or .trigger('change');

Alternatively can use $.proxy to change the context the function runs under:

$("#CourseSelect").change(loadTeachers);
$.proxy(loadTeachers, $('#CourseSelect'))();