JQuery: 'Uncaught TypeError: Illegal invocation' su richiesta ajax - diversi elementi

Ho due elementi selezionati, A e B: quando l'opzione selezionata di A cambia, le opzioni di B devono essere aggiornate di conseguenza. Ogni elemento in A implica molti elementi in B, è una relazione uno-a-molti (A contiene nazioni, B dovrebbe contenere città situate nella nazione data).

La funzione do_ajaxdovrebbe eseguire la richiesta asincrona:

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

Per aggiornare le opzioni di B ho aggiunto una chiamata di funzione onChangenell'evento di A. Ecco la funzione che viene eseguita quando viene attivato l'evento onChange (of 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');
}

}

Ho letto nei documenti di JQuery che datapossono essere un array (coppie di valori chiave). Ottengo l'errore se metto:

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

Invece, non ottengo quell'errore se i miei dati sono una stringa:

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

Ma ho bisogno della "versione array" della variabile, nel mio codice php lato server.

Si Uncaught TypeError: Illegal invocationtrova nel file "jquery-1.7.2.min.js", che è tutto compresso, quindi non sono riuscito a capire quale parte del codice ha generato l'errore.

C'è qualche impostazione che posso modificare nel mio codice in modo che accetti i dati come array associativo?

Grazie al colloquio con Sarfraz abbiamo potuto trovare la soluzione.

Il problema era che stavo passando un elemento HTML invece del suo valore, che in realtà è quello che volevo fare (infatti nel mio codice php ho bisogno di quel valore come chiave esterna per interrogare la mia citiestabella e filtrare le voci corrette).

Quindi, invece di:

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

dovrebbe essere:

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

Nota: controlla la risposta di Jason Kulatunga , cita il documento JQuery per spiegare perché il passaggio di un elemento HTML causava problemi.

Dai documenti jQuery per processData:

processData Boolean
^{Predefinito: true}
Per impostazione predefinita, i dati passati all'opzione data come oggetto (tecnicamente, qualsiasi cosa diversa da una stringa) verranno elaborati e trasformati in una stringa di query, adattandosi al tipo di contenuto predefinito "application / x-www -Form-urlencoded". Se desideri inviare un DOMDocument o altri dati non elaborati, imposta questa opzione su false.

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

Sembra che dovrai usare processDataper inviare i tuoi dati al server o modificare il tuo script php per supportare i parametri codificati della stringa di query.

Ho ricevuto questo errore durante la pubblicazione di un oggetto FormData perché non stavo impostando correttamente la chiamata ajax. La configurazione di seguito ha risolto il mio 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); 
    }
});

Ho letto nei documenti di JQuery che i dati possono essere un array (coppie di valori chiave). Ottengo l'errore se metto:

Questo è un oggetto non un array:

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

Probabilmente vuoi:

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

Ha avuto lo stesso problema di recente, risolto aggiungendo 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) {}
                  });

Prova questo:

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