How do I debug jquery AJAX calls?

I have been working on trying to get AJAX to work with Jquery. My big issue so far has been that I don't really know how to figure out where I'm making a mistake. I don't really have a good way to debug AJAX calls.

I'm trying to set up an admin page where one of the functions I want to make is to change the permission set in my SQL database. I know that the .click function is being triggered, so I've narrowed that down, but I'm not sure where in the chain from AJAX call to SQL query its going wrong.

My .js code:

$('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
    })
})

my .php handler:

<?php  
require_once(functions.php);

echo $_POST["user"];

try{
    $DBH = mysql_start();

    $STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)");

    $STH->bindParam(1, $_POST["user"]);
    $STH->bindParam(2, $_POST["perm"]);

    $STH->execute();
}
catch(PDOException $e){
    echo $e->getMessage;
}?>

Where the mysql_start is setup for the PDO function that I use successfully in my other SQL calls.

I have been researching and looking up tutorials for a few days now and I can't for the life of me figure out what's going wrong. Are there tools I can use to figure out where the error is occuring? I'm obviously interested in the answer to this specific issue, but I think my bigger issue here is that I have no idea where to start with debugging. Thanks for your help!

Solution 1:

Make your JQuery call more robust by adding success and error callbacks like this:

 $('#ChangePermission').click(function() {
     $.ajax({
         url: 'change_permission.php',
         type: 'POST',
         data: {
             'user': document.GetElementById("user").value,
             'perm': document.GetElementById("perm").value
         },
         success: function(result) { //we got the response
             alert('Successfully called');
         },
         error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         }
     })
 })

Solution 2:

Using pretty much any modern browser you need to learn the Network tab. See this SO post about How to debug AJAX calls.