JQuery: „Uncaught TypeError: Illegal invocation” w żądaniu ajax - kilka elementów

Mam dwa wybrane elementy, A i B: kiedy wybrana opcja A ulegnie zmianie, opcje B. muszą zostać odpowiednio zaktualizowane. Każdy element w A implikuje wiele elementów w B, jest to relacja jeden do wielu (A zawiera narody, B powinno zawierać miasta znajdujące się w danej nacji).

Funkcja do_ajaxpowinna uruchomić żądanie asynchroniczne:

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

Aby zaktualizować opcje B, dodałem wywołanie funkcji w onChangezdarzeniu A. Oto funkcja, która działa po wyzwoleniu zdarzenia 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');
}

}

Czytałem w dokumentach JQuery, że datamoże to być tablica (pary klucz-wartość). Otrzymuję błąd, jeśli wstawię:

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

Zamiast tego nie otrzymuję tego błędu, jeśli moje dane są ciągiem:

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

Ale potrzebuję "wersji tablicowej" zmiennej w moim kodzie PHP po stronie serwera.

Uncaught TypeError: Illegal invocationZnajduje się w „jQuery 1.7.2.min.js” pliku, który jest cały sprężonego, więc nie mogłem dowiedzieć się, jaka część kodu podniesiony błąd.

Czy jest jakieś ustawienie, które mogę zmienić w moim kodzie, aby akceptował dane jako tablicę asocjacyjną?

Dzięki rozmowie z Sarfrazem mogliśmy znaleźć rozwiązanie.

Problem polegał na tym, że zamiast jego wartości przekazywałem element HTML, co tak naprawdę chciałem zrobić (w rzeczywistości w moim kodzie php potrzebuję tej wartości jako klucza obcego do odpytywania mojej citiestabeli i filtrowania poprawnych wpisów).

Więc zamiast:

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

powinno być:

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

Uwaga: sprawdź Jason Kulatunga za odpowiedź , to cytuje JQuery doc wyjaśnić dlaczego przechodząc elementem HTML był przyczyną kłopotów.

Z dokumentacji jQuery dla processData:

processData Boolean
^{Domyślnie: true}
Domyślnie dane przekazane do opcji data jako obiekt (technicznie rzecz biorąc, cokolwiek innego niż łańcuch) będą przetwarzane i przekształcane w ciąg zapytania, dopasowany do domyślnego typu treści "application / x-www -form-urlencoded ". Jeśli chcesz wysłać DOMDocument lub inne nieprzetworzone dane, ustaw tę opcję na false.

Źródło: http://api.jquery.com/jquery.ajax

Wygląda na to, że będziesz musiał użyć processDatado wysłania danych na serwer lub zmodyfikować skrypt php, aby obsługiwał zakodowane parametry kwerendy.

Otrzymałem ten błąd podczas wysyłania obiektu FormData, ponieważ nie konfigurowałem poprawnie wywołania ajax. Poniższa konfiguracja rozwiązała mój problem.

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

Czytałem w dokumentacji JQuery, że dane mogą być tablicą (pary klucz-wartość). Otrzymuję błąd, jeśli wstawię:

To jest obiekt, a nie tablica:

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

Prawdopodobnie chcesz:

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

Niedawno ten sam problem został rozwiązany przez dodanie 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) {}
                  });

Spróbuj tego:

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