How to Debug Jquery Ajax Calls

How do I debug jquery AJAX calls?

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);
         }
     })
 })

How to debug ajax response?

After a much needed 10 hour break into the night, I solved the issue with a much clearer mind. I removed the dataType row and it worked for me.

As silly as it may sound, the table in the PHP page was not in JSON format, so when jQuery tries to parse it as such, it fails.

Hope it helps for you. If not, check out more suggestions here.

Before

  $.ajax({
                    type: 'POST',
                    dataType : 'json',
                    url: 'queries/getsocial.php',
                    data:nvalues,
                    success: function(response)
                    {

                        console.log(response);//does not print in the console
                    }

            });

After (Works now)

  $.ajax({
                    type: 'POST',
                    url: 'queries/getsocial.php',
                    data:nvalues,
                    success: function(response)
                    {

                        console.log(response);//yes prints in the console
                    }

            });

how to debug php during jquery ajax call

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.