Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"); 
        }
    });
}
like image 390
Ronald Avatar asked May 18 '14 14:05

Ronald


People also ask

What does Cannot read property toLowerCase of null mean?

The "Cannot read Property 'toLowerCase' of null" error occurs when the toLowerCase() method is called on a variable that stores a null value. To solve the error, make sure to only call the toLowerCase method on strings.

What does Cannot read property of undefined mean?

What Causes TypeError: Cannot Read Property of Undefined. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects.

How do you use lowercase in JavaScript?

JavaScript String toLowerCase()The toLowerCase() method converts a string to lowercase letters. The toLowerCase() method does not change the original string.


3 Answers

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'));
like image 106
Rory McCrossan Avatar answered Oct 12 '22 06:10

Rory McCrossan


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.

INCORRECT :

$(document).on('change', $("select"), function(el) {
    console.log($(el).val());
});

CORRECT :

$(document).on('change', $("select"), function(el) {
    console.log($(el.target).val());
});
like image 32
lenybernard Avatar answered Oct 12 '22 06:10

lenybernard


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());
});
like image 5
Aravinthan K Avatar answered Oct 12 '22 06:10

Aravinthan K