I need help finding an alternative to synchronous jQuery ajax

Question

I have a very complex form which contains multiple tabs. Each tab contains a unique Plupload instance (for uploading multiple images). The form allows a user to upload a medical image 'case' where each case is made up of multiple imaging 'studies' (e.g. CT scans) and each study contains multiple images.

When the user clicks the 'submit' button, I intercept the click with jQuery because I need to do the following:

1. Check the required fields are entered [easy]
2. Get a unique id number from my server. This id number is required by each Plupload instance to know which directory to upload to.

In my function called upon form submission I have the following code snippet:

var case_id;

// Code to check the required fields are entered
....

// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
    case_id = data;
});

// do something with case_id and other things. MUST happen after the ajax call
....

// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
    return false;
}

With my current logic, I need the script to pause UNTIL it gets case_id. This was possible before jQuery 1.8 but the $.ajax() async : false property has been deprecated.

My question is two-fold:

1. Is there a way to hold up the script until I get the required case_id?
2. If not, any idea how I could change my logic to work around this?

You might be wondering why case_id is so important. The plupload instances do their upload before the form submits and they need a directory to upload to. I want the images being uploaded to go into a folder on my server called case_id. This will let the PHP script on the server figure out what to do with them once it gets the rest of the form POSTed data.

Answer 1

This is a very common 'problem' that can be solved pretty easily by using callbacks appropriately.

$("#submitButton").click(function (event) {
    event.preventDefault(); //Don't submit the form, we'll submit it manually.

    var case_id;

    // Code to check the required fields are entered
    ....

    // Get the case id number from the server
    $.get('ajax/unique-case-id').done(function(data){
        case_id = data;

        // do something with case_id and other things. MUST happen after the ajax call
        ....

        // if there was a problem uploading the images, stop the form from submitting
        if (problem_occured) {
            alert("something went wrong");
        } else {
            $("#referenceToTheForm").submit();
        }

    });
});

Long story short, keeping the "deal with problems or submit the form" inside of the callback to the $.get call will essentially cause the script to 'pause' until it gets the data back. Then you can use something like spin.js to give the user a good waiting experience until it's done.