jQuery - Invocation illégale

Question

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-t-il ... des suggestions ?

Merci !

Answer 1

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

Answer 2

Je pense que vous devez avoir des chaînes comme valeurs de données. C'est probablement quelque chose en interne au sein de jQuery qui ne code pas/ne sérialise pas correctement les objets de & départ.

Essayez :

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

Notez également sur les lignes :

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

Vous n'avez pas besoin de l'enveloppe jQuery car les objets To & From sont déjà jQuery.

Answer 3

Juste pour mémoire, cela peut également se produire si vous essayez d'utiliser une variable non déclarée dans des données comme

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

Answer 4

Si vous souhaitez soumettre un formulaire en utilisant l'API Javascript FormData avec le 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');
            }
        }
    });
});

Answer 5

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

A 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 ça a marché.