No response from jQuery .post even though PHP is returning correct data

Question

Here is my jQuery :

function SelectSubCats(cat_num) {
    console.log("Select SubCats..");
    $.post("ajax.php", {
        _populateSubCats : 1,
        cat_num : cat_num
    },
    function(data){
        console.log("Data: " + data );
    });
}

I am not reaching the console.log statement is the problem.

in ajax.php :

else if(array_key_exists('_populateSubCats', $_POST)) { // {{{
    $cat_num = $DB->escape($_POST['cat_num']);
    print GetSubCats($cat_num);
} // }}}

function GetSubCats($cat_num) {
    global $DB;
    $returnHTML = '';

    $query = "SELECT sc_i_num, sc_s_subcategory FROM subcat "
            . "WHERE sc_i_c_num = {$cat_num} "
            . "ORDER BY sc_s_subcategory";  
    $result = $DB->query($query);
    $returnHTML .= "<option value=''></option>";
    while($obj = $DB->next($result)) {
        $returnHTML .= "<option value='{$obj->sc_i_num}'>{$obj->sc_s_subcategory}</option>";
    } 
    return $returnHTML;     
}

The return generates <option> s for a <select> . The idea is, there are categories and subcategories. The jQuery function above is called in the onchange of the category <select> . Eventually I'd like to replace that console.log with an append to add the new data to the sub-category select. But right now, I am just trying to get a response. I have logged the php side and am getting the exact response I need. What else is going on?

Answer 1

Specify the type of response you want by adding , 'html' .

ie:

function SelectSubCats(cat_num) {
    console.log("Select SubCats..");
    $.post("ajax.php", {
        _populateSubCats : 1,
        cat_num : cat_num
    },
    function(data){
        console.log("Data: " + data );
    }, 'html' );
}