1

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.

Community
  • 1
  • 1
Nse
  • 305
  • 4
  • 21

1 Answers1

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.

DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
  • 1
    Great, that worked thanks! Quick question though: why am I unable to examine the contents of `data` in a variable? I actually **did** have the return statement in there, but assumed it didn't work because I couldn't examine the data variable in the `saveChanges` function when debugging from my browser, however when I assigned it to a DIV the correct value appeared as text. – Nse Aug 31 '16 at 21:45
  • @Nse sorry, I dont get what you mean. You're trying to check `data` contents where, specifically? Inside `saveChanges` but outside `done` callback ? Beucase it will be available only inside the callbacks. – DontVoteMeDown Sep 01 '16 at 10:52
  • Maybe I'm not getting this then. The asynchronous nature of JavaScript is somewhat confusing. Using the `done` callback I'm trying to alter the `url` property of the `create` on my grid so that I can send the newly created InvoiceID to my API through my grid but that's not working either. How can I get the newly created InvoiceID to my API? – Nse Sep 13 '16 at 02:00
  • @Nse how is your `create` ? – DontVoteMeDown Sep 13 '16 at 17:32