web-dev-qa-db-fra.com

jQuery - Invocation illégale

jQuery v1.7.2

J'ai cette fonction qui me donne l'erreur suivante lors de l'exécution:

Uncaught TypeError: Illegal invocation

Voici la fonction:

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

Si je retire data de l'appel ajax, cela fonctionne .. des suggestions?

Merci!

jqueryajaxpost
85
yoda

Je pense que vous devez avoir des chaînes comme valeurs de données. Il est probable que quelque chose à l'intérieur de jQuery ne soit pas encodé/sérialisé correctement.

Essayer:

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

Remarquez aussi sur les lignes:

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

Vous n'avez pas besoin de l'encapsuleur jQuery car To & De sont déjà des objets jQuery.

101
LessQuesar

Essayez de définir processData: false dans les paramètres ajax comme ceci

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

Pour mémoire, cela peut également arriver si vous essayez d’utiliser une variable non déclarée dans des données telles que

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

Si vous souhaitez soumettre un formulaire à l'aide de Javascript FormData API avec téléchargement de fichiers, vous devez définir ci-dessous deux options:

processData: false,
contentType: false

Vous pouvez essayer comme suit:

//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');
            }
        }
    });
});
5
Bablu Ahmed

Dans mon cas, je n'ai pas défini toutes les variables que je transmets aux données en ajax.

var page = 1;

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

Je viens de définir la variable var search_candidate = "candidate name"; et son fonctionnement.

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

Mon problème n'était pas lié à processData. C'est parce que j'ai envoyé une fonction qui ne peut pas être appelée plus tard avec apply car elle ne contenait pas assez d'arguments. Plus précisément, je n'aurais pas dû utiliser alert comme rappel error.

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

Voir cette réponse pour plus d'informations sur les raisons pour lesquelles cela peut poser problème: Pourquoi certains appels de fonction sont-ils appelés "invocations illégales" en JavaScript?

J'ai pu découvrir cela en ajoutant un console.log(list[ firingIndex ]) à jQuery afin de pouvoir suivre le déroulement de l'opération.

C'était le correctif:

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

Dans mon cas, je viens de changer

Note: C'est dans le cas de Django, donc j'ai ajouté csrftoken. Dans votre cas, vous n'en aurez peut-être pas besoin.

Ajouté contentType: false, processData: false

Commenté "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) => {

    }
})

à

$.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) => {

    }
})

et cela a fonctionné.

0
hygull