CODEWITHSUNDEEP
jqueryjquery-callback
goe
goe

Reputation: 343

How to do a callback in jQuery?

I have two buttons "Save" and "Close". I need the Close button to ask a question whether the user wants to save before it redirects back to the main page. The below code shows what I want to accomplish.

$('#closeButton').click(function() {
  if(confirm("CloseWarning")) {
    $('#saveButton').click();
    window.location.href = "main.html";
  } else {
    window.location.href = "main.html";
  }
});

However the issue is that the saveButton click event doesn't have enough time to finish before the entire page redirects. So my question is what's the best way to do a callback in this situation so that save button is clicked and then we redirect to the main page.

Upvotes: 1

Views: 505

Answers (3)

musefan
musefan

Reputation: 48415

Assuming your save button calls a javascript function, you could do something like this:

function saveFunction(doRedirect){
    //normal save code
    if(doRedirect)
        window.location.href = "main.html";
}

NOTE: If your "normal save code" is an AJAX call, you should add the doRedirect check in the success callback of your ajax request.

and then you can use like so:

$('#closeButton').click(function() {
  if(confirm("CloseWarning")) {
    saveFunction(true);
  } else {
    window.location.href = "main.html";
  }
});

Alternative approach with your own callback:

function saveFuncton(callback){
   //normal save code

   //when done (or on AJAX success)
   if(callback)
      callback(true);//or false if not successful
}

and then....

$('#closeButton').click(function() {
  if(confirm("CloseWarning")) {
    saveFunction(function(success){
       if(success){
          window.location.href = "main.html";
       }
    });
  } else {
    window.location.href = "main.html";
  }
});

The HACKY approach (DO NOT USE UNLESS YOU HAVE ABSOLUTELY NO OTHER ALTERNATIVE)

var isSaving = false;
$(document).ajaxStop(function () {
    if (isSaving) {
        window.location.href = "main.html";
    }
});

and then...

$('#closeButton').click(function() {
  if(confirm("CloseWarning")) {
    isSaving = true;
    $('#saveButton').click();
  } else {
    window.location.href = "main.html";
  }
});

This MIGHT work, but it really depends on how your save function works, and if anything else might be doing an ajax call at the same time. Also, if you save function does more than one AJAX call this method will likely fail. It is a hacky approach, use it at your own risk!

Upvotes: 2

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

You can pass data to events when you trigger them, so you could do something like this:

$('#closeButton').click(function(e) {
    if(confirm('..')) {
         $('#saveButton').trigger('click', [true]);
    } else {
         window.location.href = "main.html";
    }
});

$('#saveButton').click(function(e, close) {
    // do saving stuff ..
    // for normal clicks "close" will be undefined, otherwise close when done
    if(close) {
        window.location.href = "main.html";
    }
});

If you wanted to be more DRY about it, you could have the closing code in the saveButton be a similar trigger to the closeButton with a force variable of sorts that would force the close, so you would not repeat the redirect URL in two different parts of the code.

If you can't modify your Save logic (which seems like a questionable thing, but okay...) you could do this, assuming the Save logic consists of a single AJAX call and you don't have any other AJAX requests firing off. If you did, you can check the settings variable to make sure its the right one before you close:

$('#closeButton').click(function(e) {
    if(confirm('..')) {
         $(document).ajaxComplete(function(e, xhr, settings) {
             window.location.href = "main.html";
         });
         $('#saveButton').click();
    } else {
         window.location.href = "main.html";
    }
});

Upvotes: 1

Nishu Tayal
Nishu Tayal

Reputation: 20820

Whatever script is executed on saveButton click, set the response in a variable there, when form is saved. Then check the value of that. Here is the example :

$('#closeButton').click(function() {
  if(confirm("CloseWarning")) {
    $('#saveButton').click(function(){
         // Code to save the form 
         if(saved == true){
              window.location.href = "main.html";
         }
    });
  } else {
    window.location.href = "main.html";
  }
});

Upvotes: 0

Related Questions