JQuery: ‘Error de tipo no capturado: Invocación ilegal’ en solicitud ajax – varios elementos

Tengo dos elementos de selección, A y B: cuando la opción seleccionada de A cambia, las opciones de B deben actualizarse en consecuencia. Cada elemento en A implica muchos elementos en B, es una relación de uno a muchos (A contiene naciones, B debe contener ciudades ubicadas en la nación dada).

La función do_ajax debe ejecutar la solicitud asíncrona:

 function do_ajax(elem, mydata, filename) { $.ajax({ url: filename, context: elem, data: mydata, datatype: "html", success: function (data, textStatus, xhr) { elem.innerHTML = data; } }); } 

Para actualizar las opciones de B, he agregado una llamada a la función en el evento onChange de onChange Aquí está la función que se ejecuta cuando se activa el evento onChange (de A ):

 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'); } 

}

He leído en los documentos de JQuery que los data pueden ser una matriz (pares de valores clave). Me sale el error si pongo:

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

En cambio, no recibo ese error si mis datos son una cadena:

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

Pero necesito la “versión de matriz” de la variable, en mi código php del lado del servidor.

The Uncaught TypeError: Illegal invocation se encuentra en el archivo “jquery-1.7.2.min.js”, que está todo comprimido, por lo que no pude averiguar qué parte del código generó el error.

¿Hay alguna configuración que pueda cambiar en mi código para que acepte datos como una matriz asociativa?

Gracias a la charla con Sarfraz pudimos encontrar la solución.

El problema fue que estaba pasando un elemento HTML en lugar de su valor, que en realidad es lo que quería hacer (de hecho, en mi código php necesito ese valor como clave externa para consultar mi tabla de cities y filtrar las entradas correctas).

Entonces, en lugar de:

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

debería ser:

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

Nota: verifique la respuesta de Jason Kulatunga, cita el documento de JQuery para explicar por qué el pasar un elemento HTML estaba causando problemas.

De los documentos de jQuery para processData :

processData Boolean
Predeterminado: verdadero
De forma predeterminada, los datos pasados ​​a la opción de datos como un objeto (técnicamente, cualquier otra cosa que no sea una cadena) se procesarán y transformarán en una cadena de consulta, ajustándose al tipo de contenido predeterminado “application / x-www-form-urlencoded” . Si desea enviar un DOMDocument u otros datos no procesados, establezca esta opción en falso.

Fuente: http://api.jquery.com/jquery.ajax

Parece que va a tener que usar processData para enviar sus datos al servidor, o modificar su script php para que sea compatible con los parámetros codificados de la cadena de consulta.

He leído en los documentos de JQuery que los datos pueden ser una matriz (pares de valores clave). Me sale el error si pongo:

Este es un objeto no una matriz:

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

Probablemente quieras:

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

Recibí este error al publicar un objeto FormData porque no estaba configurando la llamada ajax correctamente. La instalación a continuación solucionó mi problema.

  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); } }); 

Tuvo el mismo problema recientemente, resuelto agregando traditional: true,

 $.ajax({ url:"", type: "POST", data: new FormData($('#uploadDatabaseForm')[0]), contentType:false, cache: false, processData:false, success:function (msg) {} }); 
 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; } }); } 

Prueba esto:

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