Redirecting on user click but pop up blocker Is disabling the redirect

Question

I have a situation where a user fills out some information and then clicks submit. When they click submit, an asynch operation gets set in motion. Once, I get a successful response, I want to construct a url based on that info and redirect to that url.

I've read that Smart popup blockers will allow a popup if it is directly associated to a user’s action. If it’s delayed in anyway, there’s a good chance it’s going to get blocked.

Here was one proposed solution:

openReservationForm : function(cmp, selectedDeparture) {
    var newWin = window.open("", "_blank");

    var action = cmp.get("c.getUserInfo");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var userInfo = response.getReturnValue();
            var contactId = '';
            if(userInfo && userInfo.Contact && userInfo.Contact.Id) {
                contactId = userInfo.Contact.Id;
            }

            newWin.location.replace('https://next.rei.com/adventures/book?
                                     departure=' + selectedDeparture + 
                                     '&cId=' + contactId);
        }
    });  
    $A.enqueueAction(action);
}

I've read that a pop up blocker will appear during these asynch operations b/c they interpret it as a warning sign for dangerous/suspicious activity. I thought that having the initial new window set to a location of "_blank" would allow a new window to come up and then when the asynch operation had given a response, it would set that location to what I specified. However, it appears to loose context in this new window and never redirects to the url I want.

Any help would be greatly appreciated!

Answer 1

I got this working in Google Chrome using the following adjustments to your code:

openReservationForm: function(cmp, selectedDeparture) {
    window.open("", "myUniqueWindow");

    var action = cmp.get("c.getUserInfo");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var userInfo = response.getReturnValue();
            var contactId = '';
            if(userInfo && userInfo.Contact && userInfo.Contact.Id) {
                contactId = userInfo.Contact.Id;
            }

            window.open('https://next.rei.com/adventures/book?
                                     departure=' + selectedDeparture + 
                                     '&cId=' + contactId, "myUniqueWindow");
        }
    });  
    $A.enqueueAction(action);
}

My changing the name to "myUniqueWindow" (or really, any value), the browser will actually reuse the same window for you, which won't trigger the popup blocker behavior.

Here's the exact code I used in my org for reference:

---

Apex:

public class q188084 {
    @AuraEnabled public static void wait() {
        Long t = DateTime.now().getTime();
        // We wait ~3 seconds
        while(DateTime.now().getTime()-t<3000);
    }
}

---

Application:

<aura:application controller="q188084">
    <a href="#" onclick="{!c.init}">Do Server Thing</a>
</aura:application>

---

Controller:

({
    init: function(component, event, helper) {
        var action = component.get("c.wait");
        window.open("", "q188084")
        action.setCallback(this, function(result) {
            window.open("https://www.google.com", "q188084");
        });
        $A.enqueueAction(action);
    }
})