CODEWITHSUNDEEP
jqueryajax
Tim Webster
Tim Webster

Reputation: 9196

Prevent code from running until ajax complete

I want to execute an ajax call and prevent the code after it running until the ajax call has completed.

Say I have this code

.on('pageloadfailed', function(event){

    //if I move event.preventDefault to here the popup doesn't show. But I only want
    //to prevent the default bahaviour if the condition in the ajaxe response if met.

    $.when(ajax1()).done(function(response){
        if(resposne.success == true){
            event.preventDefault();
        }
    });

    function ajax1() {
        return $.ajax({
            url: "someUrl",
            dataType: "json",
            data:  yourJsonData,            
            ...
        });
    }

    alert("test");

}

The alert will always fire, I only want it to fire if the code within the "when" method doesn't return false.

Thanks for the responses folks, I'll go into thing a little further.

I'm using jquery mobile. And when a page load fails jqm displays a popup telling the user to refresh. However in some instances I don't want this to happen I actually want to handle the error myself.

So when the pageloadfailed event is fired I wasn't to check something via ajax. In some cases I'll handle what happens but in other I just want to carry on.

The alert isn't actually there in my code I was just trying to use that to illustrate the point.

Upvotes: 1

Views: 4646

Answers (4)

damian
damian

Reputation: 5444

Use the success and error callbacks:

  $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,
        success: function() {
            doSomethingOnSuccess();
        },
        error: function() {
            doSomethingOnError();
        }
    })

Upvotes: 2

Kamil T
Kamil T

Reputation: 2216

I would use $.when() function. 

$.when(ajaxFunction()).done(function(response){
    if(response.text != "false"){ 
        alert("test");
    }
})

function ajaxFunction() {
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  dataInJson,            
    });
}

in the code above I used response.text, but it's a guess - I don't remember how exactly does the response structure look like, you have check it yourself. All I know is that it is made of 3 parameters, and text of the response is one of them.

Upvotes: -1

geedubb
geedubb

Reputation: 4057

If looks like you are almost there:

function ajax1() {
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

$.when(ajax1()).done(function(){
  alert("this should run when your AJAX call is completed. Put your code here");
});

Upvotes: 0

ebram khalil
ebram khalil

Reputation: 8321

just put attribution async into false

from jQuery ajax:

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

Upvotes: 2

Related Questions