JQuery: 'Uncaught TypeError: Illégal invocation" à la requête ajax lorsque les données de paramètre est la matrice de
j'ai deux éléments select, A et B: lorsque L'option sélectionnée de A change, les options de B doivent être mises à jour en conséquence. Chaque élément dans A implique de nombreux éléments dans B, c'est une relation un-à-plusieurs (A contient des nations, B devrait contenir des villes situées dans la nation donnée).
La fonction do_ajax doit exécuter la requête asynchrone:
function do_ajax(elem, mydata, filename)
{
$.ajax({
url: filename,
context: elem,
data: mydata,
datatype: "html",
success: function (data, textStatus, xhr) {
elem.innerHTML = data;
}
});
}
afin de mettre à jour les options de B j'ai ajouté un appel de fonction dans onChange événement. Voici la fonction qui s'exécute lorsque l'événement onChange (de A ) est déclenché:
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');
}
}
j'ai lu dans JQuery docs que data peut être un tableau (couples de valeurs clés). J'obtiens l'erreur si je mets:
var data = {
'mode': 'filter_city',
'id_A': e[e.selectedIndex]
};
à la place, Je ne reçois pas cette erreur si mes données sont une chaîne de caractères:
var data = 'mode=filter_city&id_A=' + e[e.selectedIndex];
mais j'ai besoin de la "version Tableau" de la variable, dans mon code php côté serveur.
Le Uncaught TypeError: Illegal invocation est situé dans le "jquery 1.7.2.min.JS", qui est tout compressé, donc je ne pouvais pas comprendre quelle partie du code a soulevé l'erreur.
y a-t-il un paramètre que je puisse modifier dans mon code pour qu'il accepte les données comme un tableau associatif?
8 réponses
grâce à l'entretien avec Sarfraz nous avons pu trouver la solution.
le problème était que je passais un élément HTML au lieu de sa valeur, ce qui est en fait ce que je voulais faire (en fait dans mon code php j'ai besoin de cette valeur comme une clé étrangère pour interroger ma table cities et filtrer les entrées correctes).
ainsi, au lieu de:
var data = {
'mode': 'filter_city',
'id_A': e[e.selectedIndex]
};
il devrait être:
var data = {
'mode': 'filter_city',
'id_A': e[e.selectedIndex].value
};
Note: vérifiez la réponse de Jason Kulatunga 1519170920" , il cite jQuery doc pour expliquer pourquoi passer un élément HTML causait des problèmes.
de jQuery docs pour processData :
processData Boolean
Default: true
Par défaut, les données transmises à l'option data en tant qu'objet (techniquement, tout ce qui n'est pas une chaîne de caractères) seront traitées et transformées en une chaîne de caractères d'interrogation, correspondant au type de contenu par défaut "application/x-www-form-urlencoded". Si vous voulez envoyer un DOMDocument, ou d'autres données non traitées, définissez cette option à false.
Source: http://api.jquery.com/jquery.ajax
semble que vous allez devoir utiliser processData pour envoyer vos données au serveur, ou modifier votre script php pour prendre en charge les paramètres encodés de querystring.
j'ai lu dans JQuery docs que les données peuvent être un tableau (paires de valeurs clés). J'obtiens l'erreur si je mets:
ceci est un objet et non un tableau:
var data = {
'mode': 'filter_city',
'id_A': e[e.selectedIndex]
};
Vous voulez probablement:
var data = [{
'mode': 'filter_city',
'id_A': e[e.selectedIndex]
}];
a eu le même problème récemment, résolu en ajoutant traditional: true,
j'ai eu cette erreur en affichant un objet FormData parce que je ne configurais pas correctement l'appel ajax. La configuration ci-dessous a réglé mon problème.
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);
}
});
$.ajax({
url:"",
type: "POST",
data: new FormData($('#uploadDatabaseForm')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
Essayez Ceci:
$.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;
}
});
}