Uncaught TypeError: Не удается прочитать свойство 'toLowerCase' undefined

Я получаю эту ошибку, и она происходит из jquery framework. Когда я пытаюсь загрузить список выбора в готовом документе, я получаю эту ошибку. Я не могу найти, почему я получаю эту ошибку.

Он работает для события изменения, но я получаю сообщение об ошибке при попытке выполнить функцию вручную.

Uncaught TypeError: Не удается прочитать свойство 'toLowerCase' из undefined → jquery-2.1.1.js: 7300

Вот код

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

Ответ 1

Когда вы вызываете loadTeachers() в DOMReady, контекст this не будет элементом #CourseSelect.

Вы можете исправить это, вызвав событие change() в элементе #CourseSelect при загрузке DOM:

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

В качестве альтернативы можно использовать $.proxy для изменения контекста, в котором работает функция:

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

Или ванильный JS-эквивалент выше, bind():

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

Ответ 2

У меня была такая же проблема, я пытался прослушать изменение на каком-то элементе, и на самом деле проблема заключалась в том, что я использовал событие вместо event.target, который является объектом select.

НЕПРАВИЛЬНО:

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

ПРАВИЛЬНО:

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

Ответ 3

Не получается "when trying to execute the function manually", потому что у вас есть другой 'this'. Это будет означать не то, что вы имеете в виду при вызове метода вручную, но что-то еще, возможно, объект окна или любой другой объект контекста, который вы используете при вызове вручную.

Ответ 4

Он вызывает ошибку при доступе $(this).val(), когда он вызывает событие change this, указывает на invoker i.e. CourseSelect, поэтому он работает и получает значение CourseSelect. но при ручном вызове this указывает на документ. поэтому либо вам придется передать объект CourseSelect, либо получить доступ непосредственно, как $("#CourseSelect").val(), а не $(this).val().

Ответ 5

Это работает для меня!!!

Вызов функции без параметров

$("#CourseSelect").change(function(e1) {
   loadTeachers();
});

Вызов функции с параметром

$("#CourseSelect").change(function(e1) {
    loadTeachers($(e1.target).val());
});

Ответ 6

ваш $(this).val() не имеет области в вашем вызове ajax, потому что ее не в области функций событий изменения

Возможно, вы впервые внедрили этот аякс-вызов в свое событие изменения, в этом случае он отлично работает. но когда u создал функцию и вызвал этот funciton в событии изменения, область действия для $(this).val() недействительна.

просто введите значение с помощью селектора id вместо

$(#CourseSelect).val()

весь код должен выглядеть следующим образом:

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