Continue running script once jquery ajax call is successful

Question

I have a click function that has a popup window that I need to open once the ajax call is successful. I have tried setting async: false. I tried putting the popup in the ajax call but that makes the popup blocked by the browser. And my last attempt was to set a timeout until the ajax call completes and each with no luck. Any suggestions???

var currentStatus = "false";
var success = "false";

function waitForSuccess(){
    if (success == "false"){
        var t = setTimeout("waitForSuccess()", 300);
    }
    else{
        stopTimer(t);
        return "true";
    }
}
function stopTimer(t){
    clearTimeout(t);
}

 function checkReps(clicked){
$.ajax({
            cache: false,
            url: "chat_new_files/chat_new.php",
            success: function(data){
                       success = "true";
                    }
      });

$('#chatT').live('click', function (event) {
         success = "false";
             checkReps("true");
         var changed = waitForSuccess();
        if(changed == "true"){
                  BG.startChatWithIssueId('0', true);    //THIS IS THE POPUP
        }
});

I am thinking that my logic for this last attempt with the setTimeout is messed up. So any ideas on how to fix this or a brand new idea? Thanks!

Answer 1

Open the popup in the success: function for the ajax call. That is the only place that you both know that the ajax call has completely successfully and that you have access to the data that is returned from the ajax call.

Do not use timers to try to guess when the ajax function is done.

Answer 2

Use a callback that you can call in success of $.ajax() . Then open you popup window in the callback.

 function checkReps(clicked){
      $.ajax({
            cache: false,
            url: "chat_new_files/chat_new.php",
            success: function(data){
                       success = "true";
                       openPopup();
                    }
      });

Answer 3

You are over-complicating things:

$('#chatT').live('click',function(){
    $.ajax({
        cache: false,
        url: "chat_new_files/chat_new.php",
        success: function(data){
            BG.startChatWithIssueId('0', true);
        }
    });
});

As far as the browser popup blocker issue, a simple work-around is to create a div which acts as a popup container, like <div id="popup"></div> . Inside that div you can add an iframe with the url being the same of what your oldskool popup was. Initially, give that div the CSS #popup { display:none; position:relative; z-index:99999; /* etc...*/ } #popup { display:none; position:relative; z-index:99999; /* etc...*/ } #popup { display:none; position:relative; z-index:99999; /* etc...*/ } Then in your click event, you simply show() or fadeIn() that div.

Example, check out Colorbox - on the demo page, click the link that reads "Outside Webpage (Iframe)"

Answer 4

Browsers tend to block popups that aren't originated from an event handler because those popups tend not to be user-initiated (duh). To get around this, you have 2 choices:

1. launch the popup immedately and have its content be filler, probably including some sort of http://ajaxload.info spinner gif

2. avoid opening a new window, and instead put your content in a 'modal' div that you show and hide as required.