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

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

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

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

Vous pouvez également utiliser $.proxy pour changer le contexte dans $.proxy s'exécute la fonction:

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

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

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

J'ai eu le même problème, j'essayais d'écouter la modification de certains et, en fait, le problème était que j'étais en train d'utiliser l'événement au lieu de l'event.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()); }); 

Il échoue " when trying to execute the function manually " parce que vous avez un autre 'ceci'. Cela ne se référera pas à ce que vous avez à l'esprit lors de l'appel de la méthode manuellement, mais quelque chose d'autre, probablement l'objet de fenêtre, ou quel que soit l'objet de contexte que vous avez en invoquant manuellement.

Cela provoque l'erreur lorsque vous accédez à $(this).val() lorsqu'il est appelé par changement d'événement, this indique à l'invocateur, c'est-à-dire CourseSelect afin qu'il fonctionne et que vous obtiendrez la valeur de CourseSelect . Mais lorsque vous appelez manuellement, this indique le document. Ainsi, vous devrez passer l'objet CourseSelect ou accéder directement à $("#CourseSelect").val() au lieu de $(this).val() .

Cela fonctionne pour moi !!!

Appeler une fonction sans paramètre

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

Appeler une fonction avec un paramètre

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

Votre $ (this) .val () n'a aucune portée dans votre appel ajax, car il n'est pas dans la portée de la fonction d'événement de changement

Peut-être que vous avez implémenté que l'appel ajax dans votre événement de changement lui-même en premier, dans ce cas ça fonctionne bien. Mais lorsque vous avez créé une fonction et appeler ce funciton dans l'événement de changement, la portée de $ (this) .val () n'est pas valide.

Obtenez simplement la valeur en utilisant le sélecteur d'identification au lieu de

 $(#CourseSelect).val() 

Tout le code 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"); } }); }