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

javascript

ajax

jquery

data-format

byAlex Kataev·Nov 12, 2024

To quickly resolve the Uncaught TypeError: Illegal invocation error during a jQuery AJAX call, make sure the data you pass is a plain object, not a DOM reference. Here's a clean-cut AJAX setup:

$.ajax({
  url: 'your_url',
  type: 'POST',
  data: { key: 'value' }, // Insert plain object for data
  success: function(response) {}, // Response handling 
  error: function(error) {} // Error handling 
});

Remember: Simple key-value pairs for data and always correctly use this if needed.

Digging the error

Comprehending an "Illegal invocation" error in jQuery $.ajax call generally roots back to a misfit data format. jQuery is all geared up for "associative arrays", easily consumable by your PHP server-side code. If you pass a jQuery or DOM object directly, jQuery can't transform it to "correct" associative array, leading to an error.

var formData = {
  id: $('#element').val(), // Getting the value of #element, ain't that nice?
  anotherKey: 'anotherValue'
};

$.ajax({
  url: 'your_url',
  type: 'POST',
  data: formData
});

Handling complex data

Embrace FormData

For file uploads or when gathering disparate form fields, FormData is your new best friend:

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]); // Adding a file upload

$.ajax({
  url: 'your_file_upload_handler.php',
  type: 'POST',
  data: formData,
  processData: false,  // Necessary for FormData
  contentType: false,  // Necessary for FormData (No, it's not redundant!, It's necessary!)
  success: function(response) {}
});

When to stringify

In cases where nested objects are involved, consider stringifying your data to avoid unwanted weirdness:

var data = JSON.stringify({ complex: 'data', somewhat: 'structured' });

$.ajax({
  url: 'your_url',
  type: 'POST',
  data: data,
  contentType: 'application/json', // You're sending JSON, remember?
  processData: false
});

Array – a tricky friend

For PHP folks, keep the array structure in the chest of your pirate ship by using the square brackets [ ] :

$.ajax({
  url: 'server.php',
  method: 'POST',
  data: { 'items[]': [val1, val2, val3] } // Sends as an array to PHP, Hurray!
});

Circumventing common pitfalls

Non-processed data

If your data is pretty and already in query string format or you need to dispatch a FormData survey ship, set processData: false (Oh look, FormData again!). It's like saying "Don't mess with my data, jQuery!"

The object reference trap

Bookcase - a natural habitat of a book, not a book itself. Similarly, passing an object reference is not the same as passing the actual values:

// Causes an "Illegal invocation":
$.ajax({
  url: 'your_url',
  type: 'POST',
  data: $('#element') // Nope! You passed the jQuery object, not its value
});

// Let's try it the right way:
$.ajax({
  url: 'your_url',
  type: 'POST',
  data: { 'elementValue': $('#element').val() } // Aah! Now you're sending the value
});

Catching success & errors like a pro

Juggle server responses like a pro with jQuery callback functions:

$.ajax({
  url: 'your_url',
  type: 'POST',
  data: { key: 'value' },
  success: function(response) {
    // Score! Got a response back from the server
    console.log(response); // Logs the response
  },
  error: function(xhr, status, error) {
    // Oops, some error happened
    console.error(error); // Displays the error
  }
});