Jquery .load() with Data

Question

I want to load a div and pass formdata on submission.

https://api.jquery.com/load/

This is what I have tried. I am struggling to get the data to pass through as well. But without the data my load() is working and submitting to my controller. (MVC)

var formdata = new FormData;
formdata.append("documentType", $("#invoice-type").find(":selected").val());
formdata.append("documentStatus", $("#invoice-status").val());

The below works with no data added

$('#document-table').load('documents/document-list/filter' + '#document-table');

The below breaks when I add data :

$('#document-table').load('documents/document-list/filter'+formdata+'#document-table', );

I also tried this

$('#invoice-table').load('invoices/invoice-list/filter',formdata,'#invoice-table');

Pleas can you help me to just pass the formdata as well.

Below is the error I am receiving

jquery.min.js: 2 Uncaught TypeError: Illegal invocation
    at i(jquery.min.js: 2)
    at Dt(jquery.min.js: 2)
    at Function.S.param(jquery.min.js: 2)
    at Function.a.param(jquery - migrate - 3.0.0.min.js: 2)
    at Function.ajax(jquery.min.js: 2)
    at Function.a.ajax(jquery - migrate - 3.0.0.min.js: 2)
    at a.fn.init.S.fn.load(jquery.min.js: 2)
    at a.fn.init.a.fn.< computed > [as load](jquery - migrate - 3.0.0.min.js: 2)
    at HTMLSelectElement.<anonymous>(invoice - list: 965)
    at HTMLSelectElement.dispatch(jquery.min.js: 2)

Perhaps `$('#document-table').load('invoices/invoice-list/filter?'+new URLSearchParams(formdata).toString()+' #document-table');` — mplungjan, Mar 05 '21 at 08:32

score 0 · Accepted Answer · answered Sep 27 '21 at 07:45

Below is an implementation of the .load() function for a table displaying data returned from a route.
https://api.jquery.com/load/

$("#form").on('submit', function(e) {
    e.preventDefault();
    var data = new FormData(this);

    $("#table-to-update").DataTable().destroy();
    
    $("#table-body").load("route/function/where_you_get_your_table_body_data", {
            formTableColumn1Filter: $("#form-table-column-1-filter").val(), // This set's the status to fetch all records
            formTableColumn2Filter: $("#form-table-column-2-filter").val(),
            formTableColumn3Filter: $("#form-table-column-3-filter").val(),
            formTableColumn4Filter: $("#form-table-column-4-filter").val()
            // ...
    }, function (response,status,xhr) {
            $("#table-to-update").DataTable();
            fetchTableData(response);
    });
});
function fetchTableData(response) {
    $(this).html(response);
}

Jquery .load() with Data

1 Answers1