Question

Short Version: I can't seem to process the data returned by the server upon completing a jQuery AJAX request.

Long version: I'm writing an inventory system using mostly the Kendo UI Grid to process the invoices in the system. When I'm creating a new invoice I need to create the invoice first, and then add the line items to the invoice and save it. I'm creating my invoice through an AJAX request and then using the create method of the Kendo UI DataSource to add the line items. I'm able to submit the invoice through my Web API 2 controller and get back a response from the server with the newly created object, however how do I get the newly created object to interact with my Grid? Specifically I need the ID of the new invoice to add to the InvoiceID field of each of the line items of my Grid.

I've gone through the quite definitive answer located here: How do I return the response from an asynchronous call? Still, there's something that I'm missing as it hasn't quite "clicked" for me. My code is below:

$("#grid").kendoGrid({
        dataSource: {
            batch: false,
            transport: {
                create: { ... },
                parameterMap: function (data, operation) {
                    return JSON.stringify(data);
                }
            },
            schema: { ... }
                }
            }
        },
        toolbar: [ ... ],
        columns: [ ... ],
        save: function(e) { ... },
        saveChanges: function (e) {
            CreateInvoice().done(function (data) {
                // process invoice
            }).fail(function () {
                // display error message
            }); 
        }
    });
});

function CreateInvoice(invoice) {
    invoice = {
        ClientID: $('#IDText').text(),
        Status: 1,
        ...
    };

    $.ajax({
        url: '/api/invoice/',
        type: 'POST',
        data: JSON.stringify(invoice),
        contentType: "application/json",
    });
};

The .done and .fail methods are never called. Using Fiddler I can see that data is returned from the server, however I am unable to look at the returned data in either the CreateInvoice() function or the saveChanges function and I'm not sure what I'm doing wrong.

Answer 1

You're almost there! Just a silly detail. In CreateInvoice() you need to return the ajax result:

function CreateInvoice(invoice) {
    invoice = {
        ClientID: $('#IDText').text(),
        Status: 1,
        ...
    };

    return $.ajax({
        url: '/api/invoice/',
        type: 'POST',
        data: JSON.stringify(invoice),
        contentType: "application/json",
    });
};

Then you will be able to bind the callbacks .done() and .fail() directly in the function's result, as you are doing.

Getting data returned from an AJAX request submitted to the server

1 个答案: