How to close pop-up window and redirect using jQuery

Question

I have a pop-up window and a redirect that is supposed to happen after an ajax call and server-side process.

Except the frame does not close and the page does not redirect.

Here is the script:

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

    $('input[name="status"]').on("change", function() {

        if ($('input:radio[name="status"]:checked').val() == 'Y') {

            $.ajax({
                type: "GET",
                url: "http://mydomain.com/ajax/serverScript.php",
                data: "action=" + $('#action').val() + "&id=" + ( $('#id').val() * 1 ) + "&mode=" + $('#mode').val()
            }); // end .ajax()

            alert('server process finished'); // ajax call will not work with out this here -- needs further research and understanding
            //window.parent.closePP(); // tried this here but does not work
            //window.top.location.href = $('#redirect').val();  // tried this here to reload page but does not work

        }   // end if()

        window.parent.closePP(); // this does not work
        window.top.location.href = $('#redirect').val();    // reloads page but does not work

    }); // end .on("change")

}); // end .ready()

Appended Based on Answer from @ZiNNED

My server-side PHP script runs fine. But it is a standalone script per se. Do I need to return something to the ajax .JS call function in order to complete the interaction?

Here is a dump of the [object Object] if it means anything to anyone enter image description here

Here is what I get from console.log(e)

XMLHttpRequest cannot load http://mydomain.com/ajax/serverScript.php?action=insert&id=1&mode=_test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.com' is therefore not allowed access. redirectPage.html:1
Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}

score 2 · Accepted Answer · answered Apr 15 '14 at 12:56

2

Try something like this? Using the success, error or complete functions of ajax?

$(document).ready(function(){
    $('input[name="status"]').on("change", function() {
        if ($('input:radio[name="status"]:checked').val() == 'Y') 
        {
            $.ajax({
                type: "GET",
                url: "http://mydomain.com/ajax/serverScript.php",
                data: "action=" + $('#action').val() + "&id=" + ( $('#id').val() * 1 ) + "&mode=" + $('#mode').val(),
                success: function(d)
                {
                    // do something with the result d?
                    window.parent.closePP();
                    window.top.location.href = $('#redirect').val();
                },
                error: function()
                {
                    // do something when the call goes wrong?
                },
                complete: function()
                {
                    // do something when the call finishes, either successful or not?
                }
            }); 
        } 
    }); 
});

answered Apr 15 '14 at 12:56

ZiNNED

2,620
20
31

Ok, interesting result @ZiNNED. It branched to the `error: function(){}`. I am not sure how to troubleshoot this. The server-side script runs fine as the backend tasks were performed successfully. – H. Ferrence Apr 15 '14 at 13:08
see my amended OQ @ZiNNED if you can help me further. – H. Ferrence Apr 15 '14 at 13:12
1

If the script turns to the `error: function()`, it usually means an uncaught server-error occurred. Have you tried debugging the server code to see what actually happens? The error could be thrown **after** the backend tasks were performed succesfully. You could also try something like FireBug (https://getfirebug.com) to see what's happening when the call to the server is made. – ZiNNED Apr 15 '14 at 13:17
Ok, I ran the script from the browser and got `int(200)` from `var_dump(http_response_code());` @ZiNNED – H. Ferrence Apr 15 '14 at 13:47
I did this to help troubleshoot `error: function(e){}` with `alert(e);` but the alert pop-up shows `[object Object]`. How can I see what the resulting object is trying to tell me @ZiNNED? – H. Ferrence Apr 15 '14 at 13:56
1

HTTP Response Code 200 means it was successful. It's strange the code comes in the error path. You could try logging the error in the console instead of showing it in an alert: `console.log(e);`. Maybe that will give some more information. – ZiNNED Apr 15 '14 at 14:01
I am posting the object dump in my OQ – H. Ferrence Apr 15 '14 at 14:05
I posted the console log result in my OQ @ZiNNED. Thanks for helping me with this ! – H. Ferrence Apr 15 '14 at 14:18
1

The following line seems to be the culprit: "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.com' is therefore not allowed access." There are several questions about that here on SO (http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w for example). Maybe you can find the answer in one of those questions. Good luck with it! – ZiNNED Apr 15 '14 at 14:22
Thanks @ZiNNED. Using the console logger I figured out my problem. I am on http://test.mydomain.com calling to http://mydomain.com (did not realize I could not do that) – H. Ferrence Apr 15 '14 at 14:25

How to close pop-up window and redirect using jQuery

1 Answers1