JQuery: 'Uncaught TypeError: Invocation illégale' à la demande ajax lorsque le paramètre de données est un tableau

Question

J'ai deux de sélectionner des éléments, A et B: lorsque l'option sélectionnée changements, B options doivent être mis à jour en conséquence. Chaque élément dans Un implique de nombreux éléments de B, c'est un un-à-plusieurs relations (contient des nations unies, B doit contenir des villes situées dans les pays donné).

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 B options j'ai ajouté une fonction à appeler Un de l' onChange événement. Voici la fonction qui s'exécute lors de l'événement onChange (de A) est déclenchée:

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 qu' data peut être un tableau (paires clé-valeur). Je reçois le message d'erreur si j'ai mis:

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

Au lieu de cela, je n'ai pas ce message d'erreur si mes données est une chaîne de caractères:

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

Mais j'ai besoin de la "matrice de la version" de la variable, de mon côté serveur php code.

L' Uncaught TypeError: Illegal invocation , est située dans le jquery-1.7.2.min.js" fichier, ce qui est compressé, donc je n'arrivais pas à savoir quelle partie du code a déclenché l'erreur.

Est-il un paramètre que je peux changer dans mon code afin qu'il accepte les données d'un tableau associatif?

Answer 1

Grâce à l'entretien avec le Sarfraz nous avons pu trouver la solution.

Le problème était que j'étais de passage d'un élément HTML à la place de sa valeur, qui est en fait ce que je voulais faire (en fait dans mon code php, j'ai besoin de la valeur de clé étrangère pour l'interrogation de mon cities tableau et de 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
};

Remarque: vérifiez Jason Kulatunga de réponse, elle cite le JQuery doc pour expliquer le pourquoi du passage d'un élément HTML a été à l'origine des troubles.

Answer 2

De jquery de docs pour processData:

processData Boolean
^{Par défaut: true}
Par défaut, les données transmises à l'option de données comme un objet (techniquement, rien d'autre qu'une chaîne de caractères) sera traitée et transformée en une chaîne de requête, l'ajustement à la valeur par défaut du type de contenu "application/x-www-form-urlencoded". Si vous voulez envoyer un DOMDocument, ou d'autres non-traitées de données, définissez cette option à false.

On dirait que vous allez avoir à utiliser processData envoyer vos données sur le serveur, ou de modifier votre script php à l'appui de la chaîne de recherche des paramètres codés.

Answer 3

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

Cet objet n'est 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]
}];