how to debug php during jquery ajax call

Question

I have an html form that I submit to a php server. If I submit the form the standard way with a submit button and an action="screen_custom.php", then it works fine. I see a page full of valid JSON data.

But if I submit the form using a jquery ajax call, then an empty json array is returned. I believe the php is unable to find the form values for some unknown reason. Anyway, how do I debug the php during an ajax call? The response must only include the data needed to populate a jquery DataTable. If I echo debugging output, then the datatable will fail to populate.

Here's some code that successfully submits the form to the php and returns good json data.

    <form id="criteriaForm" method="post" action="screen_custom.php"> 
    <table>
    <tr>
        <th>Filter By</th><th>Criteria</th><th title="Show this column">Show</th>
    </tr>
    <tr>
        <td><label title="Percentage increase">Appreciation Potential (%)</label></td>
        <td>
            <select name="upside">
                <option value="any">Any</option>
                <option value="gt0">> 0%</option>
                <option value="gt10">> 10%</option>
            </select>
        </td>
        <td><input type="checkbox" id="showUpside" name="showUpside" value="true">
    </tr>

    </table>
    <input type="submit" value="Run">
    </form>

Here's some code that fails to return the same json data:

<form id="criteriaForm" method="post" action=""> 
<table>
<tr>
    <th>Filter By</th><th>Criteria</th><th title="Show this column">Show</th>
</tr>
<tr>
    <td><label title="Percentage increase">Appreciation Potential (%)</label></td>
    <td>
        <select name="upside">
            <option value="any">Any</option>
            <option value="gt0">> 0%</option>
            <option value="gt10">> 10%</option>
        </select>
    </td>
    <td><input type="checkbox" id="showUpside" name="showUpside" value="true">
</tr>

</table>
<button type="button" onclick="runCustomScreen()">Run</button>
</form>

And the javascript:

function runCustomScreen() {
    $('#customTable').DataTable({
        "ajax": {
            type: 'POST',
            url: "screen_custom.php",
            data: $('#criteriaForm').serialize(),
            complete: function(jqXHR, textStatus) {
                console.log("Run was successful, textStatus="+textStatus);
            },
            error: function(e, textStatus, errorThrown) {
                alert("textStatus="+textStatus +", errorThrown="+errorThrown);
            }
        }    
    }); 
    return false;   //needed if called by onclick event
}

Here's the parts of the php that handle the form data and return the json:

$upside = $_POST["upside"];
$sql = "SELECT * FROM stocks " .$where;
//echo '<script>'
//echo 'sql=' .$sql .'<br>';
//echo 'console.log(' .$sql .')';
//echo '</script>';

$rs = mysql_query($sql);

//store result in an array
$results = array();
while($row = mysql_fetch_object($rs))
{
    $results[] = $row;
}
$data = json_encode($results);
echo '{"data":' .$data .'}';

//close the db connection
mysql_close($connection);

Note that if I uncomment any but the last echo, then the datatable won't populate. So how can I debug this?

Answer 1

Did you tried to use the isset($_POST['value']) method on your php script? where value is the name that you will assign to your submit button.

Answer 2

I figured out how to debug it. In the chrome debugger, select the Network tab, then select "screen_custom.php" from the list, then select the Response tab. It shows the output from the php. I uncommented the echo sql statement and could see that in fact, the form parameters are not being read, as I suspected.

Then I googled on that problem and found the solution was to modify the data paramenter js as shown below:

        data: function(d) {
            var form_data = $('#criteriaForm').serializeArray();
            $.each(form_data, function(key,val) {
                d[val.name] = val.value;
            });
        },

I don't know why the first method didn't work as I could see the correct parameters being sent in the header. But this works.