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…}
Was it helpful?

Solution

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?
                }
            }); 
        } 
    }); 
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top