JQuery Uncaught TypeError Illegal invocation at ajax request - several elements

Question

I have two select elements  A and B  when A s selected option changes  B s options must be updated accordingly  Each element in A implies many elements in B  it s a one-to-many relationship  A contains nations  B should contain cities located in the given nation    The function do ajax should run the asynchronous request   function do ajax elem  mydata  filename          ajax           url  filename          context  elem          data  mydata          datatype   html           success  function  data  textStatus  xhr                elem innerHTML   data                        In order to update B s options I ve added a function call in A s onChange event  Here is the function that runs when onChange event  of A  is triggered   function my onchange e      e  is element  A        var sel B            get select element  B          I skipped some code here                 var data              mode    filter city            id A   e e selectedIndex             do ajax city sel  data   ajax handler php           I ve read in JQuery docs that data can be an array  key value pairs   I get the error if I put   var data              mode    filter city            id A   e e selectedIndex       Instead  I don t get that error if my data is a string   var data    mode filter city amp amp id A     e e selectedIndex     But I need the  array version  of the variable  in my server-side php code    The Uncaught TypeError  Illegal invocation is located in the  jquery-1 7 2 min js  file  which is all compressed  so I couldn t figure out what part of code raised the error   Is there any setting I can change in my code so that it accepts data as an associative array

User · Answer

I ve read in JQuery docs that data can be an array  key value pairs     I get the error if I put    This is object not an array   var data              mode    filter city            id A   e e selectedIndex       You probably want   var data               mode    filter city            id A   e e selectedIndex

User · Answer

ajax                       url                         type   POST                       data  new FormData     uploadDatabaseForm   0                        contentType false                      cache  false                      processData false                      success function  msg

User · Answer

Had the same issue recently  solved by adding traditional  true

User · Answer

function do ajax elem  mydata  filename          ajax           url  filename          context  elem          data  mydata            contentType  false          processData  false           datatype   html           success  function  data  textStatus  xhr                elem innerHTML   data

User · Answer

Thanks to the talk with Sarfraz we could figure out the solution   The problem was that I was passing an HTML element instead of its value  which is actually what I wanted to do  in fact in my php code I need that value as a foreign key for querying my cities table and filter correct entries    So  instead of   var data              mode    filter city            id A   e e selectedIndex       it should be   var data              mode    filter city            id A   e e selectedIndex  value      Note  check Jason Kulatunga s answer  it quotes JQuery doc to explain why passing an HTML element was causing troubles

User · Answer

I was getting this error while posting a FormData object because I was not setting up the ajax call correctly   Setup below fixed my issue   var myformData   new FormData            myformData append  leadid       leadid   val     myformData append  date     this  val     myformData append  time     e target  prev   val        ajax       method   post       processData  false      contentType  false      cache  false      data  myformData      enctype   multipart form-data       url   include ajax php       success  function  response                subform   html response  delay 4000  hide 1

User · Answer

Try This                 ajax                       url                         type   POST                       data  new FormData     uploadDatabaseForm   0                        contentType false                      cache  false                      processData false                      success function  msg

User · Answer

Please follow the procedure to get rid of this problem    ajax      url   https   your-api-endpoint      type   post      data  new formData this      processData  false     contentType  false     success  function response          console log response           You have to use processData  false and contentType  false  these two lines  Your problem will be solved

User · Answer

From the jQuery docs for processData      processData Boolean   Default  true   By default  data passed in to the data option as an object  technically  anything other than a string  will be processed and transformed into a query string  fitting to the default content-type  application x-www-form-urlencoded   If you want to send a DOMDocument  or other non-processed data  set this option to false    Source   http   api jquery com jquery ajax    Looks like you are going to have to use processData to send your data to the server  or modify your php script to support querystring encoded parameters

[html] JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

Examples related to html

Examples related to ajax

Examples related to jquery