JQuery: "Not Prepared TypeError: Illegal Call" in an ajax request when the data parameter is an array

Question

I have two select elements: A and B: when a selected option is selected, options B must be updated accordingly. Each element from A implies many elements in B, this is a one-to-many relationship (A contains nations, B must contain cities located in a given country).

The do_ajax function should start an 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; } }); } 

To update options B, I added a function call to the A onChange event. Here is the function that fires when the onChange ( A ) event fires:

 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 read in jQuery docs that data can be an array (key value pairs). I get an error if I put:

 var data = { 'mode': 'filter_city', 'id_A': e[e.selectedIndex] }; 

Instead, I do not get this error if my data is a string:

 var data = 'mode=filter_city&id_A=' + e[e.selectedIndex]; 

But I need a "version of the array" of this variable in my server side php code.

Uncaught TypeError: Illegal invocation is in the jquery-1.7.2.min.js file, which is all compressed, so I could not figure out which part of the code raised the error.

Is there any parameter that I can change in my code so that it accepts data as an associative array?

Answer 1

Thanks to a conversation with Sarfraz, we were able to find a solution.

The problem was that I was passing an HTML element instead of its value, which is actually what I wanted to do (actually in my PHP code I need this value as a foreign key to query the cities table and filter the 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 out the Jason Kulatunga answer , it is quoting a jQuery doc to explain why the HTML element transfer caused problems.

Answer 2

From jquery docs for processData:

processData strong> Boolean
^{Default: true}
By default, the data passed to the data parameter as an object (technically, nothing but a string) will be processed and converted to a query string that matches the standard content types "application / x-www-form-urlencoded". If you want to send a DOMDocument or other raw data, set this parameter to false.

It looks like you will need to use processData to send your data to the server or modify your php script to support encrypted request parameters.

Answer 3

I read in jQuery docs that data can be an array (key value pairs). I get an error if I put:

This object is 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] }]; 

Answer 4

If the same problem were recently resolved by adding traditional: true,

Answer 5

Try the following:

  $.ajax({ url:"", type: "POST", data: new FormData($('#uploadDatabaseForm')[0]), contentType:false, cache: false, processData:false, success:function (msg) {} });