Uncaught TypeError Cannot read property toLowerCase of undefined

Question

I m getting this error and it is originating from jquery framework  When i try to load a select list on document ready i get this error  I can t seem to find why i m getting this error   It works for the change event  but i m getting the error when trying to execute the function manually      Uncaught TypeError  Cannot read property  toLowerCase  of undefined -  jquery-2 1 1 js 7300   Here is the 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       lt option   gt                     option val teacher employeeId                   option text teacher name                       TeacherSelect   append option                                               error  function                  alert  Error while getting results

User · Accepted Answer

When you call loadTeachers   on DOMReady the context of this will not be the  CourseSelect element    You can fix this by triggering a change   event on the  CourseSelect element on load of the DOM       CourseSelect   change loadTeachers  change       or  trigger  change      Alternatively can use   proxy to change the context the function runs under       CourseSelect   change loadTeachers     proxy loadTeachers      CourseSelect         Or the vanilla JS equivalent of the above  bind         CourseSelect   change loadTeachers   loadTeachers bind     CourseSelect

User · Answer

I had the same problem  I was trying to listen the change on some select and actually the problem was I was using the event instead of the event target which is the select object   INCORRECT      document  on  change      select    function el        console log   el  val           CORRECT      document  on  change      select    function el        console log   el target  val

User · Answer

It causes the error when you access   this  val   when it called by change event this points to the invoker i e  CourseSelect so it is working and and will get the value of CourseSelect  but when you manually call it this points to document  so either you will have to pass the CourseSelect object or access directly like     CourseSelect   val   instead of   this  val

User · Answer

It fails  when trying to execute the function manually  because you have a different  this   This will refer not to the thing you have in mind when invoking the method manually  but something else  probably the window object  or whatever context object you have when invoking manually

User · Answer

This Works For me      Call a Function without Parameter      CourseSelect   change function e1       loadTeachers          Call a Function with Parameter      CourseSelect   change function e1        loadTeachers   e1 target  val

User · Answer

your   this  val   has no scope in your ajax call  because its not in change event function scope  May be you implemented that ajax call in your change event itself first  in that case it works fine  but when u created a function and calling that funciton in change event  scope for   this  val   is not valid   simply get the value using id selector instead of     CourseSelect  val     whole code should be like this      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       lt option   gt                     option val teacher employeeId                   option text teacher name                       TeacherSelect   append option                              error function    alert  Error while getting results

[javascript] Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Examples related to javascript

Examples related to jquery

Examples related to ajax