jQuery - Illegal invocation

Question

jQuery v1.7.2

I have this funcion that is giving me the following error while executing :

Uncaught TypeError: Illegal invocation

Here's the function :

$('form[name="twp-tool-distance-form"]').on('submit', function(e) {
    e.preventDefault();

    var from = $('form[name="twp-tool-distance-form"] input[name="from"]');
    var to = $('form[name="twp-tool-distance-form"] input[name="to"]');
    var unit = $('form[name="twp-tool-distance-form"] input[name="unit"]');
    var speed = game.unit.speed($(unit).val());

    if (!/^\d{3}\|\d{3}$/.test($(from).val()))
    {
        $(from).css('border-color', 'red');
        return false;
    }

    if (!/^\d{3}\|\d{3}$/.test($(to).val()))
    {
        $(to).css('border-color', 'red');
        return false;
    }

    var data = {
        from : from,
        to : to,
        speed : speed
    };

    $.ajax({
        url : base_url+'index.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        cache : false
    }).done(function(response) {
        alert(response);
    });

    return false;
});

If I remove data from ajax call, it works .. any suggestions?

Thanks!

try removing `from` from data. Maybe it is conflicting with jquery's from — gopi1410, Apr 25 '12 at 22:18
You realize your trying to push jQuery objects, not JSON right? — asawyer, Apr 25 '12 at 22:18
Happens to me regularly when I forget the .val() on some jQuery object... — userfuser, Jul 16 '14 at 13:47

score 145 · Answer 1 · answered Jan 03 '14 at 15:52

145

Try to set processData: false in ajax settings like this

$.ajax({
    url : base_url+'index.php',
    type: 'POST',
    dataType: 'json',
    data: data,
    cache : false,
    processData: false
}).done(function(response) {
    alert(response);
});

answered Jan 03 '14 at 15:52

Justo

1,703
1
10
6

13

`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.` – Tilak Raj Apr 12 '16 at 21:34
5

You may also need to add `contentType: false` . I did when uploading a file. See https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload – khylo Mar 05 '20 at 12:44

score 125 · Accepted Answer · edited Sep 11 '18 at 12:39

125

I think you need to have strings as the data values. It's likely something internally within jQuery that isn't encoding/serializing correctly the To & From Objects.

Try:

var data = {
    from : from.val(),
    to : to.val(),
    speed : speed
};

Notice also on the lines:

$(from).css(...
$(to).css(

You don't need the jQuery wrapper as To & From are already jQuery objects.

edited Sep 11 '18 at 12:39

KaraKaplanKhan

629
1
13
26

answered Apr 25 '12 at 22:27

LessQuesar

3,055
1
19
27

3

Thanks, forgot I had loaded objects instead of strings, usually I load strings :) – yoda Apr 25 '12 at 22:31
3

This approach helps me. I name my variables as `$from = $('#from');` This helps me remember that it represents a jQuery object which helps avoid calling a method on something that's a string or trying to manipulate a string with `.toString()` or something when it's a jQuery object. – timbrown Apr 16 '13 at 15:13
I had the `.val()` part missing, so it wasn't passing the value. – SharpC Oct 23 '15 at 13:41

score 20 · Answer 3 · answered Feb 26 '14 at 09:02

20

Just for the record it can also happen if you try to use undeclared variable in data like

var layout = {};
$.ajax({
  ...
  data: {
    layout: laoyut // notice misspelled variable name
  },
  ...
});

answered Feb 26 '14 at 09:02

Ivan Ivanic

2,869
1
19
19

1

Thanks for that!! That totally was where I was being blocked. – Matt Zelenak Jul 22 '15 at 16:44

Bablu Ahmed · Answer 4 · 2019-01-24T03:54:34.400

If you want to submit a form using Javascript FormData API with uploading files you need to set below two options:

processData: false,
contentType: false

You can try as follows:

//Ajax Form Submission
$(document).on("click", ".afs", function (e) {
    e.preventDefault();
    e.stopPropagation();
    var thisBtn = $(this);
    var thisForm = thisBtn.closest("form");
    var formData = new FormData(thisForm[0]);
    //var formData = thisForm.serializeArray();

    $.ajax({
        type: "POST",
        url: "<?=base_url();?>assignment/createAssignment",
        data: formData,
        processData: false,
        contentType: false,
        success:function(data){
            if(data=='yes')
            {
                alert('Success! Record inserted successfully');
            }
            else if(data=='no')
            {
                alert('Error! Record not inserted successfully')
            }
            else
            {
                alert('Error! Try again');
            }
        }
    });
});

What these two options does, could you explain? – rahim.nagori May 26 '20 at 14:14 — rahim.nagori, May 26 '20 at 14:14

hygull · Answer 5 · 2019-07-15T02:48:36.953

In my case, I just changed

Note: This is in case of Django, so I added csrftoken. In your case, you may not need it.

Added contentType: false, processData: false

Commented out "Content-Type": "application/json"

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    headers: {
        "X-CSRFToken": csrftoken,
        "Content-Type": "application/json"
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

to

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    contentType: false,
    processData: false,
    headers: {
        "X-CSRFToken": csrftoken
        // "Content-Type": "application/json",
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

and it worked.

score 4 · Answer 6 · answered Jul 15 '19 at 12:20

In My case I have't define all variables which I am passing to data in ajax.

var page = 1;

$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

I have just defined variable var search_candidate = "candidate name"; and its working.

var page = 1;
var search_candidate = "candidate name"; // defined
$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

score 0 · Answer 7 · edited May 23 '17 at 10:31

My problem was unrelated to processData. It was because I sent a function that cannot be called later with apply because it did not have enough arguments. Specifically I shouldn't have used alert as the error callback.

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    processData: false,
    error: alert
});

See this answer for more information on why that can be a problem: Why are certain function calls termed "illegal invocations" in JavaScript?

The way I was able to discover this was by adding a console.log(list[ firingIndex ]) to jQuery so I could track what it was firing.

This was the fix:

function myError(jqx, textStatus, errStr) {
    alert(errStr);
}

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    error: myError // Note that passing `alert` instead can cause a "jquery.js:3189 Uncaught TypeError: Illegal invocation" sometimes
});

score 0 · Answer 8 · answered Oct 16 '19 at 05:56

0

In my case (using webpack 4) within an anonymous function, that I was using as a callback.

I had to use window.$.ajax() instead of $.ajax() despite having:

import $ from 'jquery';
window.$ = window.jQuery = $;

answered Oct 16 '19 at 05:56

zanderwar

2,483
1
19
42

score 0 · Answer 9 · answered Jan 28 '20 at 16:11

Also this is a cause too: If you built a jQuery collection (via .map() or something similar) then you shouldn't use this collection in .ajax()'s data. Because it's still a jQuery object, not plain JavaScript Array. You should use .get() at the and to get plain js array and should use it on the data setting on .ajax().

score 0 · Answer 10 · answered Feb 27 '22 at 09:46

Working for me. processData: false, contentType: false, is required for working.

 var formData = new FormData($('#author_post')[0]);
 formData.append('t','author-add');
 $.ajax({
        type: 'POST',
        url: 'url-here',
        cache: false,
        processData: false,
        contentType: false,
        data:formData,
        success: function(response) {
           //success code
        }
 });

jQuery - Illegal invocation

10 Answers10

Linked

Related