Update Symfony 2 Debug Bar on each ajax call

5 comments on “Update Symfony 2 Debug Bar on each ajax call”

1. Bence Meszaros says:

   January 17, 2013 at 15:57

   Brilliant idea! It is a must have, if you develop ajax apps.

   I only have one small comment. At symfony 2.1 its better to remove the .sf-toolbar div:

   $(‘.sf-toolbar’).remove()

   And maybe meaningful to call the app_dev.php instead of the prod environment:

   … +window.location.hostname+’/app_dev.php/_wdt/’+ …

   Reply
   • Sacheen Dhanjie says:

     March 6, 2013 at 10:44

     Hi,

     In my development environment, when developing i use the .htaccess to control the application environment,
     thus eradicating the need to add the app_dev.php, also when in production mode, we don’t really want to show the debug bar :-D

     Reply
2. Schnaaf says:

   May 12, 2013 at 08:08

   As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

   To prevent the error – TypeError: XMLHttpRequest is undefined – I changed:

   $(“body”).ajaxComplete

   in:
   $(document).ajaxComplete

   Great snippet indeed!

   Reply
3. Fernando says:

   May 28, 2013 at 10:38

   If you need to see multiple debug bars, one per request (i.e. debugging a page with several ajax requests AND you want to see what happened on every request), one way to display all the generated debug bars is:

   $(function() {
   $(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOption) {
   if(XMLHttpRequest.getResponseHeader(‘x-debug-token’)) {
   $.get(
   window.location.protocol+’//’+window.location.hostname+’/app_dev.php/_wdt/’+XMLHttpRequest.getResponseHeader(‘x-debug-token’),
   function(data) {
   $(‘body’).append(data);
   $(‘.sf-toolbarreset’).each(function(i) {
   $(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
   });
   $(‘.sf-minitoolbar’).each(function(i) {
   $(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
   });
   }
   );
   }
   });
   });

   Reply
4. Fernando Arroyo says:

   May 28, 2013 at 12:41

   What if I’m developing an ajax application and I have a page with a number of ajax requests and I want to debug them all? The provided method overwrites all previous requests, so we end up only with the last one. If you use the following code, the debug bar for each request piles up on top of the previous one, so it might not be super beautiful, but it’s super useful:

   $(function() {
   $(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOption) {
   if(XMLHttpRequest.getResponseHeader(‘x-debug-token’)) {
   $.get(
   window.location.protocol+’//’+window.location.hostname+’/app_dev.php/_wdt/’+XMLHttpRequest.getResponseHeader(‘x-debug-token’),
   function(data) {
   $(‘body’).append(data);
   $(‘.sf-toolbarreset’).each(function(i) {
   $(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
   });
   $(‘.sf-minitoolbar’).each(function(i) {
   $(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
   });
   }
   );
   }
   });
   });

   Reply