javascript - solucion - Unkeught TypeError: no se puede leer la propiedad ''toLowerCase'' de undefined

tolowercase que es

Question

Recibo este error y se origina de jquery framework. Cuando intento cargar una lista de selección en el documento listo, obtengo este error. Parece que no puedo encontrar por qué estoy recibiendo este error.

Funciona para el evento de cambio, pero obtengo el error cuando intento ejecutar la función manualmente.

Unkeught TypeError: no se puede leer la propiedad ''toLowerCase'' de undefined -> jquery-2.1.1.js: 7300

Aquí está el código

$(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 1

Causa el error cuando accedes $(this).val() cuando se llama por evento de cambio this apunta al invocador, es decir, CourseSelect por lo que está funcionando y obtendrá el valor de CourseSelect . pero cuando lo llamas manualmente, this apunta al documento. por lo tanto, deberá pasar el objeto CourseSelect o acceder directamente como $("#CourseSelect").val() lugar de $(this).val() .

Answer 2

Cuando llame a loadTeachers() en DOMReady, el contexto de this no será el elemento #CourseSelect .

Puede solucionar esto activando un evento change() en el elemento #CourseSelect al cargar el DOM:

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

Alternativamente, puede usar $.proxy para cambiar el contexto en el que se ejecuta la función:

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

O el equivalente JS vainilla del anterior, bind() :

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

Answer 3

Esto funciona para mí!

Llamar a una función sin parámetro

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

Llamar a una función con parámetro

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

Answer 4

No funciona " when trying to execute the function manually " porque tiene un "this" diferente. Esto se referirá no a lo que tiene en mente al invocar el método de forma manual, sino a otra cosa, probablemente el objeto de ventana, o cualquier objeto de contexto que tenga al invocar manualmente.

Answer 5

Tuve el mismo problema, estaba tratando de escuchar el cambio en algunos select y en realidad el problema era que estaba usando el evento en lugar del event.target que es el objeto seleccionado.

INCORRECTO:

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

CORRECTO:

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

Answer 6

su $ (this) .val () no tiene alcance en su llamada ajax, porque no está en el alcance de la función de evento de cambio

Puede ser que hayas implementado esa llamada ajax en tu evento de cambio primero, en ese caso funciona bien. pero cuando creó una función y llamó a ese funciton en evento de cambio, el alcance de $ (this) .val () no es válido.

simplemente obtenga el valor usando el selector de id. en lugar de

$(#CourseSelect).val()

todo el código debería ser así:

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