Unchaught TypeError: Impossibile leggere la proprietà 'toLowerCase' di undefined

Question

Ricevo questo errore ed è originato dal framework jquery. Quando provo a caricare un elenco di selezione su documento pronto, ottengo questo errore. Non riesco a trovare il motivo per cui sto ricevendo questo errore.

Funziona per l'evento di modifica, ma sto ricevendo l'errore quando si tenta di eseguire la funzione manualmente.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined -> jquery-2.1.1.js:7300

Ecco il codice

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

Quando si chiama loadTeachers() su DOMReady, il contesto di this non è l'elemento #CourseSelect.

È possibile risolvere questo innescando un evento change() sull'elemento #CourseSelect sul carico del DOM:

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

In alternativa è possibile utilizzare $.proxy per cambiare il contesto della funzione gira sotto:

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

O l'equivalente JS vaniglia di quanto sopra, bind():

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

Answer 2

fallisce "when trying to execute the function manually" perché si ha un diverso 'questo'. Ciò si riferirà non alla cosa che hai in mente quando invochi il metodo manualmente, ma qualcos'altro, probabilmente l'oggetto window o qualunque oggetto di contesto che hai quando invochi manualmente.

Answer 3

provoca l'errore quando si accede a $(this).val() quando chiamato da evento di modifica this punti al invoker cioè CourseSelect modo si sta lavorando e ed otterrà il valore di CourseSelect. ma quando si chiama manualmente i punti this per documentare. quindi o dovrai passare l'oggetto CourseSelect o accedere direttamente come $("#CourseSelect").val() anziché $(this).val().

Answer 4

Ho avuto lo stesso problema, stavo cercando di ascoltare la modifica su alcuni select e in realtà il problema era che stavo usando l'evento invece di event.target che è l'oggetto select.

corretto:

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

CORRETTO:

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

Answer 5

tuoi $ (this) .val() non ha alcun margine nella chiamata ajax, perché la sua non nel cambiamento funzione di evento scope

Potrebbe essere stata implementata quella chiamata ajax nel proprio evento di modifica stesso, in tal caso funziona correttamente. ma quando si crea una funzione e si chiama tale funzione nell'evento change, l'ambito per $ (this) .val() non è valido.

semplicemente ottenere il valore tramite il selettore id, invece di

$(#CourseSelect).val() 

codice intero dovrebbe essere simile a questo:

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

Answer 6

questo funziona per me !!!

chiamare una funzione senza parametri

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

chiamare una funzione con parametri

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