Question

I had a problem with combining som javascript functions through one function. I’m trying to build a little system to show at work. A kind a show how it could improve. Not for deployment.

The functions look like this.

// To choose an errand or with a zero start a new errand. 
function buildErrandBox(number)
{
$.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    data: { customerNumber: $("#customerNumber").val(), errandNumber: number },
    success: function(build){ $('#newErrandsBoxResult').empty(); $('#newErrandsBoxResult').append(build.buildForm); $('#newErrandsBoxTextResult').empty(); $('#newErrandsBoxTextResult').append(build.buildText); showMinorContent('#newErrands'); $('#errandArea').val(build.area); $('#errandGroup').val(build.group); $('#errandType').val(build.type); escalateOptions(); getEscalationGroups(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save changes on a errand. 
function saveErrand()
{
$.ajax({
    url: 'db/saveErrandsForCustomer.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(),
            telephone: $("#errandTelephoneNumber").val(),
            email: $("#errandEmail").val(),
            area: $("#errandArea").val(),
            group: $("#errandGroup").val(),
            type: $("#errandType").val()
    },
    success: function(output_string){ showCustomerErrands(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save a new note on an errand. 
function saveTextForErrand()
{
$.ajax({
    url: 'db/saveErrandsText.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(), text: $("#newTextForErrandTextArea").val() },
    success: function(output_string){ buildErrandBox($("#errandID").val()); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

These are three seperate functions that work when a use the buttons on the webpage. First click to start a new errand. The change what type of errand it is. Put in some notes. And save the errand. All works fine.

In the background the build errand function build the whole box of inputs and selects to show the errand. But the next function to save the errand recognizes the errand number and saves the errand in the database.

But when i combine these like below

function preMadeErrand(area, group, type, text, servicetext)
{
buildErrandBox(0); 
alert($("#errandID").val());
$('#errandArea').val(area);
changeErrandBoxes();
$("#errandGroup").val(group);
changeErrandBoxes();
$("#errandType").val(type);
$("#newTextForErrandTextArea").val(servicetext);
saveTextForErrand();
$("#newTextForErrandTextArea").val(text);
saveTextForErrand();
alert($("#errandID").val());

saveErrand();
}

The errandID becomes undefined. Any ideas?

Update!

When i had the alert in the beginning of the function it works. It seems as the function for building the box is not finished before it try to use the errandID. With two alerts the second gets the errandID.

Is there any way to make it finish execution one function like buildErrandBox(0) before it continues?

Answer 1

If you want the AJAX function to complete before proceeding, set the async option to false:

$.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    async: false, // <-- add this line
    ...

This will block further execution of the next statement until the result has been returned (or timeout).

Documentation