Question

I have a form, in which I need to send data selected via AJAX to. The whole idea is once the form data has been selected, an ajax call sent via jQuery.get() calls another function which receives and decodes the data in PHP and uses that data as an id to get more data from a database. The data from the database is then re-encoded and sent to a javascript function which prints more data, based on what was passed.

My problem is that, anytime I reference either $_GET or $_POST using <?php ?> tags in a javascript function, I get an error telling me that my javascript functions are undefined. I know that this is working partially, at least, because the AJAX call does get sent when I remove the $_GET/$_POST superglobal.

Any help with this would be greatly appreciated.

Here’s my code:

jQuery.noConflict();        

function printSubCategories(categories) {

    for (var i = 0; i < categories.length; i++) {

        var opt = document.createElement('option');

        opt.text = categories[i]['name'];
        opt.value = categories[i]['id'];

        jQuery('#subcategories').append(opt);
    }    
}

function recieveAndPrint() {
<?php
    $categories = getCategories(json_decode($_GET['parent']));
?>
    printSubCategories(<?=json_encode($categories)?>);
}

function ajaxCategories(pathToFile, ajaxData) {  
    jQuery.get(pathToFile, {'parent' : ajaxData}, function(ajaxData) {
        //alert('Data loaded: ' + ajaxData + <?=json_encode($_POST)?>);
    });

    recieveAndPrint();

}

Answer 1

I suspect you’re confused about how the AJAX is working. It looks like you expect that the AJAX call can work with PHP located on the same page in a way that the page is loaded only once. That’s not accurate; what you need is another php page that is called on the server that returns the data as JSON to the original page. You’ve also got an issue with your callback, as the data will not be ready before receiveAndPrint() is called; it needs to be called in the callback (but it will only be print at that point, since the receive part will already be done).

Let’s say you have two PHP files, a.php and b.php. The first will be used to display the initial page and will call the second to retrieve the new data for a particular instance of parent.

a.php

jQuery.noConflict();        

function printSubCategories(categories) {

    for (var i = 0; i < categories.length; i++) {

        var opt = document.createElement('option');

        opt.text = categories[i]['name'];
        opt.value = categories[i]['id'];

        jQuery('#subcategories').append(opt);
    }    
}


function ajaxCategories(pathToFile, ajaxData) {  
    jQuery.get(pathToFile, {'parent' : ajaxData}, function(data) {
        printSubCategories(data);
    });
}

called as

ajaxCategories('/b.php','value_of_parent');

b.php

<?php
    $categories = getCategories(json_decode($_GET['parent']));
    header('Content-type: application/json');
?>
<?=json_encode($categories)?>

You might also want to make sure the response isn’t cached.

header('Cache-Control: no-store');