How do I debug jquery AJAX calls

Question

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    lt  php   require once functions php    echo   POST  user     try       DBH   mysql start          STH    DBH- gt prepare  INSERT INTO people   username  permissions   values                 STH- gt bindParam 1    POST  user          STH- gt bindParam 2    POST  perm           STH- gt execute      catch PDOException  e       echo  e- gt getMessage     gt    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

User · Answer

if you are using mozilla firefox than just install an add-on called firebug.

In your page press f12 in mozilla and firebug will open.

go for the net tab in firebug and in this tab go in the xhr tab. and reload your page. you will get 5 options in xhr Params Headers Response HTML and Cookies

so by going in response and html you can see which response you are getting after your ajax call.

Please let me know if you have any issue.

User · Answer

Just add this after jQuery loads and before your code     window  ajaxComplete function     console log  Ajax Complete          window  ajaxError function  data  textStatus  jqXHR   console log  Ajax Error        console log  data      data       console log  textStatus      textStatus           console log  jqXHR      jqXHR         window  ajaxSend function     console log  Ajax Send          window  ajaxStart function     console log  Ajax Start          window  ajaxStop function     console log  Ajax Stop          window  ajaxSuccess function     console log  Ajax Success

User · Answer

You can use the  Network  tab in the browser  shift ctrl i  or Firebug  But an even better solution - in my opinion - is in addition to use an external program such as Fiddler to monitor catch the traffic between browser and server

User · Answer

here is what I would do in order to debug and get the php errors into javascript console log after an ajax call           ChangePermission   click function            ajax           url   change permission php           type   POST           data                 user   document GetElementById  user   value               perm   document GetElementById  perm   value                    success  function  data                console log data                        error  function  data                console log data                           on the php side I would start by asking for all error returned to string concat and echo as a json encoded response that will includes php error messages as well if any    lt  php  error reporting E ALL   require once functions   php    result    true    DBH   new PDO  mysql host  dbhost dbname  dbname    dbuser   dbpass      DBH- gt setAttribute PDO  ATTR ERRMODE  PDO  ERRMODE EXCEPTION    STH    DBH- gt prepare  INSERT INTO people   username  permissions   values            if  isset   POST  user     amp  amp  isset   POST  perm            STH- gt bindParam 1    POST  user    PDO  PARAM STR        STH- gt bindParam 2    POST  perm    PDO  PARAM STR     try        STH- gt execute      catch  PDOException  e         result     e- gt getMessage    echo json encode  result     gt

User · Answer

2020 answer with Chrome dev tools To debug any XHR request   Open Chrome DEV tools  F12  Right-click your Ajax url in the console   for a GET request   click Open in new tab  for a POST request   click Reveal in Network panel  In the Network panel   click on your request  click on the response tab to see the details

User · Answer

Firebug as Firefox  FF  extension is currently  as per 01 2017  the only way to debug direct javascript responses from AJAX calls  Unfortunately  it s development is discontinued  And since Firefox 50  the Firebug also cannot be installed anymore due to compatability issues  -  They kind of emulated FF developer tools UI to recall Firebug UI in some way    Unfortunatelly  FF native developer tools are not able to debug javascript returned directly by AJAX calls  Same applies to Chrome devel  tools    I must have disabled upgrades of FF due to this issue  since I badly need to debug JS from XHR calls on current project  So not good news here - let s hope the feature to debug direct JS responses will be incorporated into FF Chrome developer tools soon

User · Answer

you can use success function  once see this jquery ajax settings          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                    you can try to write alert result  to see what is the response this result variable will contains what you prints in the php page                      we can also have error   function  hope this helps you

User · Answer

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

User · Answer

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

User · Answer

Install Firebig to see where your error is happening   You could also set up a callback in your ajax call to return your error messages from your PHP   Eg   error  function e        alert e

[javascript] How do I debug jquery AJAX calls?

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax