CODEWITHSUNDEEP
htmlajaxjquery
Nadir Sampaoli
Nadir Sampaoli

Reputation: 5555

JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

I have two select elements, A and B: when A's selected option changes, B's options must be updated accordingly. Each element in A implies many elements in B, it's a one-to-many relationship (A contains nations, B should contain cities located in the given nation).

The function do_ajax should run the asynchronous request:

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

In order to update B's options I've added a function call in A's onChange event. Here is the function that runs when onChange event (of A) is triggered:

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

}

I've read in JQuery docs that data can be an array (key value pairs). I get the error if I put:

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

Instead, I don't get that error if my data is a string:

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

But I need the "array version" of the variable, in my server-side php code.

The Uncaught TypeError: Illegal invocation is located in the "jquery-1.7.2.min.js" file, which is all compressed, so I couldn't figure out what part of code raised the error.

Is there any setting I can change in my code so that it accepts data as an associative array?

Upvotes: 153

Views: 331197

Answers (13)

Ali Safaei
Ali Safaei

Reputation: 337

JQUERY CHANGES : on your JQUERY you need to put this to make your data send as an array

JSON.stringify(yourArr);

LARAVEL CHANGES : then you need to do this on your LARAVEL controller to get the array correctly (just like a php array) :

json_decode($request->theArray);

Upvotes: 0

TeeBeeGee
TeeBeeGee

Reputation: 368

Ajax does no allow for a JSON object as the data. Using JSON.stringify() might solve the issue. Something like this:

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: JSON.stringify(mydata), //Here's the change
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

Upvotes: 0

Deshan Dissanayake
Deshan Dissanayake

Reputation: 126

I was getting the same problem and I could correct it as follows.

var formData = new FormData(document.getElementById('form_id'));
                                
$.ajax({
  type: 'POST',
  url: '/Settings/de_acc',
  data: formData,
  cache: false,
  contentType: false,
  processData: false,
  success: function(res){
    console.log(res);
  }
})

Upvotes: 8

Martlark
Martlark

Reputation: 14581

My illegal invocation error on $.getJSON was caused by passing undefined as one of the values for the data object. Fixing that solved the error.

Upvotes: 3

Eishfaq Ahmed
Eishfaq Ahmed

Reputation: 159

Please follow the procedure to get rid of this problem:

$.ajax({
   url: 'https://your-api-endpoint',
   type: 'post',
   data: new formData(this),
   processData: false,
   contentType: false,
   success: function(response) {
      console.log(response)
   }
})

You have to use processData: false and contentType: false, these two lines. Your problem will be solved.

Upvotes: 12

Mike Volmar
Mike Volmar

Reputation: 2093

I was getting this error while posting a FormData object because I was not setting up the ajax call correctly. Setup below fixed my issue.

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

Upvotes: 84

Nadir Sampaoli
Nadir Sampaoli

Reputation: 5555

Thanks to the talk with Sarfraz we could figure out the solution.

The problem was that I was passing an HTML element instead of its value, which is actually what I wanted to do (in fact in my php code I need that value as a foreign key for querying my cities table and filter correct entries).

So, instead of:

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

it should be:

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

Note: check Jason Kulatunga's answer, it quotes JQuery doc to explain why passing an HTML element was causing troubles.

Upvotes: 187

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

From the jQuery docs for processData:

processData Boolean
Default: true
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

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

Looks like you are going to have to use processData to send your data to the server, or modify your php script to support querystring encoded parameters.

Upvotes: 56

Derly Pacheco
Derly Pacheco

Reputation: 45

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

Upvotes: 1

Nitin Sharma
Nitin Sharma

Reputation: 7

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

Upvotes: -1

deco
deco

Reputation: 137

Had the same issue recently, solved by adding traditional: true,

Upvotes: 11

Ali Asad
Ali Asad

Reputation: 133

Try This:

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

Upvotes: -1

Sarfraz
Sarfraz

Reputation: 382756

I've read in JQuery docs that data can be an array (key value pairs). I get the error if I put:

This is object not an array:

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

You probably want:

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

Upvotes: 14

Related Questions