JQuery: 'Uncaught TypeError: Illegal invocation' à la demande ajax - plusieurs éléments

J'ai deux éléments de sélection, A et B: lorsque l'option sélectionnée par 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_ajaxdoit 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 l' onChangeévénement de A. Voici la fonction qui s'exécute lorsque l'événement onChange (of 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 des documents JQuery qui datapeuvent être un tableau (paires clé / valeur). J'obtiens l'erreur si je mets:

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

Au lieu de cela, je n'obtiens pas cette erreur si mes données sont une chaîne:

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 invocationse trouve dans le fichier "jquery-1.7.2.min.js", qui est entièrement compressé, donc je n'ai pas pu déterminer quelle partie du code a provoqué l'erreur.

Y a-t-il un paramètre que je peux modifier dans mon code pour qu'il accepte les données sous forme de tableau associatif?

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 clé étrangère pour interroger ma citiestable et filtrer les entrées correctes).

Donc, au lieu de:

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

ça devrait être:

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

Remarque: vérifiez la réponse de Jason Kulatunga , il cite le document JQuery pour expliquer pourquoi le passage d'un élément HTML causait des problèmes.

À partir de la documentation jQuery pour processData:

processData Boolean
^{Par défaut: true}
Par défaut, les données transmises à l'option data en tant qu'objet (techniquement, autre chose qu'une chaîne) seront traitées et transformées en une chaîne de requête, correspondant au type de contenu par défaut "application / x-www -form-urlencoded ". Si vous souhaitez envoyer un DOMDocument ou d'autres données non traitées, définissez cette option sur false.

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

Il semble que vous allez devoir utiliser processDatapour envoyer vos données au serveur, ou modifier votre script php pour prendre en charge les paramètres encodés de la chaîne de requête.

J'obtenais cette erreur lors de la publication d'un objet FormData car je ne configurais pas correctement l'appel ajax. La configuration ci-dessous a résolu 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); 
    }
});

J'ai lu dans la documentation JQuery que les données peuvent être un tableau (paires clé / valeur). J'obtiens l'erreur si je mets:

Ceci est un objet pas 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,

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

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

Essaye ça:

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