Using JQuery and a bit of javascript, we can update the Symfony 2 debug tool bar on Ajax complete.
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $("body").ajaxComplete(function(event, XMLHttpRequest, ajaxOption){ if(XMLHttpRequest.getResponseHeader('x-debug-token')) { $('.sf-toolbarreset').remove(); $.get(window.location.protocol+'//'+window.location.hostname+'/_wdt/'+XMLHttpRequest.getResponseHeader('x-debug-token'),function(data){ $('body').append(data); }); } }); }); |
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/’+ …
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
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!
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’);
});
}
);
}
});
});
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’);
});
}
);
}
});
});