Run function on the end of other function(JS)

Question

I have function to get id of calculation from db

Here is code:

function getClaculationId() {

    var appointmentid = parseInt($('#appointmentId').text());
    var model = {
        appointmentId:appointmentid
    }
    $.ajax({
        url: '@Url.Action("GetCalculationId","Calculations")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function(data) {
            var list = data;
           $("#calculationId").text(list[0].calcId);
        }
    });

}

After this I need to get this id and use in another function

Here is code of this function

function getConsumables() {
   var calculationId = $('#calculationId').text();
   var model = {
       calcId: parseInt(calculationId)
   };
   $.ajax({
       url: '@Url.Action("GetConsumables", "Calculations")',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify(model),
       type: 'POST',
       dataType: 'json',
       processData: false,
       success: function(data) {
           var list = data;
           for (var i = 0; i <= list.length - 1; i++) {
               var calculationTable = '<td class="point">' +
                   (i + 1) +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].consumableName +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].quantity +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].description +
                   '</td>' +
                   '<td class="title"> ' +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].summ +
                   '</td>';
               $('#consumables').append(calculationTable);
           };
       }
   });

}

And I calling those function like this

$('#calculate').click(function() {
    $('#main-info').load('@Url.Action("Calculations","PatientDatabase")',function() {
        getClaculationId();
        getConsumables();
    });
});

But problem in that when getConsumables() runs, calculationId is empty.

How I need to write code correctly to pass calculationId to second function?

Thank's for help.

Call `getConsumables()` from *within* the `success` handler function of `getClaculationId()` (you may want to fix the typo in the function name too). You could even pass the `list[0].calcId` value as an argument. — Rory McCrossan, Dec 13 '17 at 09:17
I would pass the getConsumables function as a parameter of the getCalculationId function so that getCalculationId can call getConsumables once the id is ready. Another option is to wrap the getConsumables into a setInterval that runs untill the id is present. — kimy82, Dec 13 '17 at 09:22
@kimy82 no, don't *ever* use timers to handle asynchronicity. — Alnitak, Dec 13 '17 at 09:37

score 2 · Accepted Answer · answered Dec 13 '17 at 09:33

I think to handle this type of scenario Promise approach is better then any. But right now you can try following approach:

function getClaculationId() {

    var appointmentid = parseInt($('#appointmentId').text());
    var model = {
        appointmentId:appointmentid
    }
    $.ajax({
        url: '@Url.Action("GetCalculationId","Calculations")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function(data) {
            var list = data;
           //$("#calculationId").text(list[0].calcId);
           getConsumables(list[0].calcId); // Called here with success value
        }
    });

}

function getConsumables(value) {
   //var calculationId = $('#calculationId').text();
   var model = {
       calcId: parseInt(value)
   };
   $.ajax({
       url: '@Url.Action("GetConsumables", "Calculations")',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify(model),
       type: 'POST',
       dataType: 'json',
       processData: false,
       success: function(data) {
           var list = data;
           for (var i = 0; i <= list.length - 1; i++) {
               var calculationTable = '<td class="point">' +
                   (i + 1) +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].consumableName +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].quantity +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].description +
                   '</td>' +
                   '<td class="title"> ' +
                   '</td>' +
                   '<td class="title"> ' +
                   list[i].summ +
                   '</td>';
               $('#consumables').append(calculationTable);
           };
       }
   });
}

score 0 · Answer 2 · answered Dec 13 '17 at 09:20

0

I see good comments about add code to your success function, other way it's add listener to field $("#fieldId").on("change", yourFunctionName).

Please notice that yourFunctionName written without call ()

This field can be hidden or something else. Problem here that when you call you function response not received yet, way with listeners or adding it to success function solve this problem

answered Dec 13 '17 at 09:20

reconnect

306
3
13

`#fieldId` is hidden `
`, So I think on change will not works.
– Old Balance Dec 13 '17 at 09:28
change it to ````, anyway no one seeing this :-) – reconnect Dec 13 '17 at 09:31
@reconnect just because it's in a hidden field doesn't mean it's not easily readable. – Rory McCrossan Dec 13 '17 at 09:40
Also, using DOM event handlers to trigger the following action is a horrendously bad approach. What would you do if there was no DOM? – Alnitak Dec 13 '17 at 09:44
@Alnitak about this you can ask someone else, I just proposed different solution (from comments) based on info posted in question, maybe he couldn't change source code that set value to the field? In any case each solution good in the scope of some problem – reconnect Dec 13 '17 at 10:08
@RoryMcCrossan and original function could be provided from some other source and if he can't edit it solution with listener will be good. – reconnect Dec 13 '17 at 10:11

Run function on the end of other function(JS)

2 Answers2