How do I stop all JavaScript executing from within an ajax call?

359
November 23, 2016, at 2:43 PM

I have the following JavaScript code:

Interface.init = function()
{
    $.ajax({
        type: "POST",
        url: "/Validate",
        async: false,
        success: function (data) {
            if (data.Valid) {
                // All good, continue executing JS code
            }
            else {
                // Display error messsage, attempt to stop executing JS code...
                return false;
            }
        },
        error: function () {
            // Display error message, attempt to stop executing JS code...
            return false;
        }
    });
    // More JavaScript functions used to load content, etc...
}

The index page calls Interface.init() on load:

<html>
    <script type="text/javascript">
        $(document).ready(function () {
            Interface.init();
        });
    </script>
</html>

The ajax function is used to check if the device loading the page is valid. It is run synchronously so the page waits for the validation to complete before continuing. If the validation is successful, the ajax function is exited and the rest of the JavaScript code continues to execute. If the validation fails (or there is an error during the validation), I don't want any of the remaining JavaScript code to be executed.

I'm currently using return false, but I've also tried just return and throwing an error such as throw new Error("Validation failed") (as suggested by numerous other questions).

All these seem to do is exit the ajax function and all remaining JavaScript on the page continues to execute. Outside of the ajax function, these methods work as expected to stop the remaining code from executing, but I was hoping for this to be done from within the ajax function. Is this at all possible?

Answer 1

You can create an outside variable before the function and use it after it, e.g:

Interface.init = function()
{
    var error = false;
    $.ajax({
        type: "POST",
        url: "/Validate",
        async: false,
        success: function (data) {
            if (data.Valid) {
                // All good, continue executing JS code
            }
            else {
                error = true;
            }
        },
        error: function () {
            error = true;
        }
    });
    if (error) return;
    // More JavaScript functions used to load content, etc...
}

But in fact, I recommend to not use the async=false, and instead of that, you could wrap the rest of your code in a function, and call it inside the callback, e.g:

Interface.init = function()
{
    $.ajax({
        type: "POST",
        url: "/Validate",
        success: function (data) {
            if (data.Valid) {
                // All good, continue executing JS code
                loadAll();
            }
        },
        error: function () {
        }
    });
    function loadAll() {
        // More JavaScript functions used to load content, etc...
    }
}
READ ALSO
change color of selected rows in bootstrap table

change color of selected rows in bootstrap table

how to change the colour of checked/selected rows in bootstrap table, when selected row of a table colour that specific row should be changed.

715
unable to load a site in firefox

unable to load a site in firefox

I have a webpage which works well with chrome. But if i load the same site in Firefox i'm getting the error as below.

339
Static div&#39;s for pagination

Static div's for pagination

I have a static div's and I want to create a pagination for this using PHP or JS. Let's say I have 25 div's and I want only to display 5 div's per page.

218