On my website there is a button that just used to call a function that calls window.open, however, recently an adjustment was needed to do a server-side check before the popup was opened.

Ever since the code was added that does the AJAX call, browsers blocks the popup, that is opened in the success callback of the AJAX call. I read that browsers might block the popup if it's not called by a user click event, so I tried setting the AJAX request to async: false, which solved the problem in Firefox, but Google Chrome still keeps blocking my popup. Is there any way to get around this?

I could move the server-side check to the page that gets opened in the popup, but I'd like to do it before opening the popup, if possible.

Code:

<a id=attackButton href=#>Attack Base!</a>



<script type=text/javascript>

$(function() {

    $('#attackButton').click(function() {

        $.ajax({

            url: baseurl + '/index.php?option=com_pbbgs&format=raw&getinfo=goingame',

            data: { 'gameid': 618 },

            dataType: 'text',

            async: false,

            type: 'POST',

            success: function(data) {

                eval(data);



                if (window.gameURL) {

                    goingameRaw();

                }

            }

        });



        return false;

    });

});



function goingameRaw()

{

    window.open(window.gameURL,'test','left=20,top=20,width=1024,height=640,toolbar=0,resizable=0,location=0');

}

</script>

Example response body:

window.gameURL=http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640;checktutorial('js','attack');