jQuery - Doa ilegal

jQuery v1.7.2

Saya memiliki fungsi ini yang memberi saya kesalahan berikut saat menjalankan:

Uncaught TypeError: Illegal invocation

Berikut fungsinya:

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

Jika saya menghapus datadari panggilan ajax, itu berhasil .. ada saran?

Terima kasih!

Saya pikir Anda perlu memiliki string sebagai nilai datanya. Sepertinya ada sesuatu secara internal dalam jQuery yang tidak mengkodekan / membuat serial dengan benar Objek Ke & Dari.

Mencoba:

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

Perhatikan juga pada baris:

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

Anda tidak memerlukan pembungkus jQuery karena To & From sudah menjadi objek jQuery.

Coba atur processData: false dalam pengaturan ajax seperti ini

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

Sebagai catatan, itu juga bisa terjadi jika Anda mencoba menggunakan variabel yang tidak dideklarasikan dalam data seperti

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

Jika Anda ingin mengirimkan formulir menggunakan Javascript FormData API dengan mengunggah file, Anda perlu menyetel dua opsi di bawah ini:

processData: false,
contentType: false

Anda dapat mencoba sebagai berikut:

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

Dalam kasus saya, saya baru saja berubah

Catatan: Ini dalam kasus Django, jadi saya menambahkan csrftoken. Dalam kasus Anda, Anda mungkin tidak membutuhkannya.

Ditambahkan contentType: false,processData: false

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

    }
})

untuk

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

    }
})

dan itu berhasil.

Dalam kasus saya, saya belum menentukan semua variabel yang saya teruskan ke data di ajax.

var page = 1;

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

Saya baru saja mendefinisikan variabel var search_candidate = "candidate name";dan cara kerjanya.

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

Masalah saya tidak terkait dengan processData. Itu karena saya mengirim fungsi yang tidak dapat dipanggil nanti applykarena tidak memiliki cukup argumen. Secara khusus saya seharusnya tidak digunakan alertsebagai errorpanggilan balik.

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

Lihat jawaban ini untuk informasi lebih lanjut tentang mengapa itu bisa menjadi masalah: Mengapa panggilan fungsi tertentu disebut "pemanggilan ilegal" di JavaScript?

Cara saya dapat menemukan ini adalah dengan menambahkan a console.log(list[ firingIndex ])ke jQuery sehingga saya dapat melacak apa yang ditembakkannya.

Ini adalah perbaikannya:

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

Dalam kasus saya (menggunakan webpack 4) dalam fungsi anonim, yang saya gunakan sebagai panggilan balik.

Saya harus menggunakan window.$.ajax()alih-alih $.ajax()meskipun memiliki:

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

Juga ini penyebabnya juga: Jika Anda membuat koleksi jQuery (melalui .map () atau yang serupa) maka Anda tidak boleh menggunakan koleksi ini dalam data .ajax (). Karena itu masih objek jQuery , bukan JavaScript Array biasa . Anda harus menggunakan .get () di dan untuk mendapatkan array js biasa dan harus menggunakannya pada setelan data di .ajax ().