Question

I have an Ajax call to the server that only works when I pass an alert(); to it. Cannot figure out what is wrong. Can anyone help?

OBJECTIVE

1. If “Update” button clicked in PrettyPhoto iFrame – then (a) call server to run PHP script that updates backend database, (b) close PrettyPhoto window, and (c) refresh page
2. If “Don’t Update” button clicked in PrettyPhoto iFrame – just (a) close PrettyPhoto window, and (b) refresh page

This Does Not Work (ie., Ajax call to server does not get made):

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

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

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

        $.ajax({
            url: 'http://mydomain.com/dir/myPHPscript.php?param=' + $('#param').val() + '&id=' + ( $('#id').val() * 1 ) + '&mode=' + $('#mode').val()
        });

    }

    window.parent.closePP();

    window.top.location.href = $('#redirect').val();    // reloads page

});

This Works! (ie., Ajax call to server gets made when I have the alert() present):

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

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

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

        $.ajax({
            url: 'http://mydomain.com/dir/myPHPscript.php?param=' + $('#param').val() + '&id=' + ( $('#id').val() * 1 ) + '&mode=' + $('#mode').val()
        });

        alert('this makes it work');

    }

    window.parent.closePP();

    window.top.location.href = $('#redirect').val();    // reloads page

});

Thanks.

Made numerous revisions based on answers — still can’t get it to work. Here’s latest:

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

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

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

    $.ajax({
        url: 'http://mydomain.com/dir/myPHPscript.php?param=' + $('#param').val() + '&id=' + ( $('#id').val() * 1 ) + '&mode=' + $('#mode').val(),
        success: functions(data) {var $doNothing = data;}
    });

}

window.parent.closePP();
window.top.location.href = $('#redirect').val();    // reloads page

});

Answer 1

You need to do the rest in the Ajax callback

See jquery ajax

$('input[name="status"]').on("change", function() {
    if ($('input:radio[name="status"]:checked').val() == 'Y') {
        $.ajax({
            url: 'http://mydomain.com/dir/myPHPscript.php?param=' + $('#param').val() + '&id=' + ( $('#id').val() * 1 ) + '&mode=' + $('#mode').val()
        },
        success:function() {
          window.parent.closePP();
          window.top.location.href = $('#redirect').val();    // reloads page
        });
     }
     else {
          window.parent.closePP();
     }
 });

You can also just get the data:

$('input[name="status"]').on("change", function() {
    if ($('input:radio[name="status"]:checked').val() == 'Y') {
        $.get('http://mydomain.com/dir/myPHPscript.php?param=' + $('#param').val() + '&id=' + ( $('#id').val() * 1 ) + '&mode=' + $('#mode').val(), 
         function() {
          window.parent.closePP();
          window.top.location.href = $('#redirect').val();    // reloads page
        });
     }
     else {
          window.parent.closePP();
     }
 });