Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Question

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

Accepted 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'))();
```

Or the vanilla JS equivalent of the above, `bind()`:

```
$("#CourseSelect").change(loadTeachers);
loadTeachers.bind($('#CourseSelect'));
```

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Solution

Problem