web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'toLowerCase' de undefined

Je reçois cette erreur et cela provient du framework jQuery. Lorsque j'essaie de charger une liste de sélection sur le document prêt, j'obtiens cette erreur. Je n'arrive pas à trouver pourquoi je reçois cette erreur.

Cela fonctionne pour l'événement change, mais j'obtiens l'erreur en essayant d'exécuter la fonction manuellement.

Uncaught TypeError: Impossible de lire la propriété 'toLowerCase' of undefined -> jquery-2.1.1.js: 7300

Voici le 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"); 
        }
    });
}
javascriptjqueryajax
42
Ronald

Lorsque vous appelez loadTeachers() sur DOMReady, le contexte de this ne sera pas l'élément #CourseSelect.

Vous pouvez résoudre ce problème en déclenchant un événement change() sur l'élément #CourseSelect Lors du chargement du DOM:

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

Vous pouvez aussi utiliser $.proxy Pour changer le contexte dans lequel la fonction est exécutée:

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

Ou l'équivalent Vanilla JS de ce qui précède, bind():

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

J'avais le même problème, j'essayais d'écouter le changement sur certains objets sélectionnés et le problème était que j'utilisais l'événement au lieu de l'événement.target, qui est l'objet sélectionné.

INCORRECT:

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

CORRECT:

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

Cela fonctionne pour moi !!!

appeler une fonction sans paramètre

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

appeler une fonction avec paramètre

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

Il échoue "when trying to execute the function manually "parce que vous avez un 'ceci' différent. Cela ne fera pas référence à ce que vous avez à l'esprit lorsque vous appelez la méthode manuellement, mais à quelque chose d'autre, probablement à l'objet window, ou à tout autre objet de contexte que vous avez lors de l'appel manuel.

2
Mzn

Cela provoque l’erreur lorsque vous accédez à $(this).val() quand il appelle par l’événement change this pointe sur l’appelant, c’est-à-dire CourseSelect, de sorte que cela fonctionne et obtiendra la valeur de CourseSelect. mais lorsque vous l'appelez manuellement, this pointe sur le document. donc vous devrez soit passer l'objet CourseSelect ou y accéder directement comme $("#CourseSelect").val() au lieu de $(this).val().

2
Rashmin Javiya

votre $ (this) .val () n'a pas de portée dans votre appel ajax, car il ne fait pas partie de la fonction d'événement change

Peut-être avez-vous implémenté cet appel ajax dans votre événement de changement lui-même en premier, dans ce cas, cela fonctionne bien. mais lorsque vous créez une fonction et appelez cette fonction dans l'événement change, la portée de $ (this) .val () n'est pas valide.

simplement obtenir la valeur en utilisant id selector au lieu de

$(#CourseSelect).val()

le code entier devrait être comme ceci:

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