Question

Question:

Is there any way to pause javascript until after ajax has finished executing its success function?

Relevant Code:

function validateinput (name, parent, access)
{
    //we assume that the input does not exist
    exists = false;
    //validate with server, expected response is true or false
    $.post("AJAXURL", {action: "category", name: name, parent: parent}, 
    function (data, textStatus, xhr)
    {
        //if returned true, the entry does exist for that parent
        if (data == "true")
        {
            alert("AJAX");
            exists = true;
        }
        else
            exists = false;
    });

    switch (true)
    {
        //If the name field is blank (still displaying hint)
        case (name == 'Subcategory Name' || name == 'Category Name'):
            alert("Please enter a name");
            break;
        //if the name already exists for that parent
/*****/     case (exists == true):
            alert("SWITCH");
            break;
        //if the parent field is displaying hint, assume parent is blank
        case (parent == 'Parent Category'):
            parent = '';
            break;
        //if the usergroup field is blank, assume value of parent
        case (access == 'UserGroup Allowed To View'):
            //if parent is also blank, assume lowest level usergroup access
            if (parent == '')
                access = "UserGroupTicketWorkers";
            else
                    $.post("AJAXURL", {action: "specificcat", name: parent}, 
                function (data, textStatus, xhr)
                {
                    access = data['access'];
                }
                );
            break;

        default:
            return true;
    }
    return false;
}

Detailed Explanation Of Issue:

• User clicks a link in page to fire this function.
• function will return true or false whether there is an error with the user input
• When this code executes, I receive alert("SWITCH"); BEFORE I receive alert("AJAX"); (the condition of the second case is currently correct, I inverted it in my debugging to figure out what was happening)
• I have a temporary fix for it which is moving the second case directly before the default, but my guess is that a faster computer may execute the switch comparisons faster than the server will provide a response, and therefore not a permanent solution. (unless it doesn’t work that way), and that if I put in a timer to wait for a preset amount of time, that the same issue could occur if the server is running slower than normal
• I’m aware that I’m not getting the new value from the ajax call because there is the time spent communicating with server, so, my first thought is to find a way to pause the function until the ajax success function is completed.
• I cannot put the switch inside the ajax call since this function needs to return a value.

Resolution

I used the async setting and it worked like a charm. Just had to change my code from $.post() to $.ajax() and set it up to post

$.ajax(
{
    url: "plugins/actions/edittickets/libs/changetickets.php", 
    type: 'POST',
    data: 
    {
        action: "category", 
        name: name, 
        parent: parent
    }, 
    async: false,
    success: function (data, textStatus, xhr)
    {
        //if returned true, the entry does exist for that parent
        if (data == "true")
            exists = true;
    }
}); 

Answer 1

You can send your AJAX query in a synchronous way if that’s what your really want by adding 'async':false in your list of parameters.

See the documentation for more info : http://api.jquery.com/jQuery.ajax/

But as other people pointed out in comments this is NOT how switch works so you still have to understand the switch statement et change the corresponding code. See here for more info : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/switch