How to update the web profiler toolbar to show data about an ajax request

Question

I am currently building an app that fully supports ajax page load. After an initial page load, navigating through the website only loads the content and not the header or the menu.

The whole app is working great but I would like to refresh the web profiler tool bar to show the last ajax request information.

I got the xdebug token from the response header and I am trying to extend the javascript part to replace the current content of toolbar but I haven't been successful yet.

How can I accomplish this? Is there anything specific I should be aware of?

Answer 1

I ultimately "reverse-engineered" the load method of the object Sfjs and turns out it's working pretty nicely.

Here is the solution

// Query the proper URL
$.get('/my-url', function (data, status, xhr) {
    // Get the xdebugToken from response headers
    var xdebugToken = xhr.getResponseHeader('X-Debug-Token');

    // If the Sfjs object exists
    if (typeof Sfjs !== "undefined") {

        // Grab the toolbar element
        var currentElement = $('.sf-toolbar')[0];

        // Load the data of the given xdebug token into the current toolbar wrapper
        Sfjs.load(currentElement.id, '/_wdt/'+ xdebugToken);
    }

})

Answer 2

I came with my own version of the toolbar.
Please see the comments of the code.

$(function () {
    /**
     * When we make an ajax request, a new debug toolbar is created on top of the previous one, so that we can
     * keep track of every request made to the page.
     *
     * @see http://funktion-it.co.za/2012/12/update-symfony-2-debug-bar-on-each-ajax-call/
     * @see https://gist.github.com/pinano/5677062
     * @see http://stackoverflow.com/questions/17646127/how-to-update-the-web-profiler-toolbar-to-show-data-about-an-ajax-request
     * @param  event
     * @param  XMLHttpRequest
     * @param  ajaxOption
     */
    $(document).ajaxComplete(function (event, XMLHttpRequest, ajaxOption) {
        if (XMLHttpRequest.getResponseHeader('x-debug-token')) {
            // window.location.protocol + '//' + window.location.hostname +
            // the url with the debug token
            var url = '/app_dev.php/_wdt/' + XMLHttpRequest.getResponseHeader('x-debug-token');
            // If the Sfjs object exists
            if (typeof Sfjs !== "undefined") {
                // create a new id
                var id = 'sfwdt' + XMLHttpRequest.getResponseHeader('x-debug-token');
                // when the first ajax call is made
                if ($('.sf-toolbar').length === 1) {
                    // clone the default debug toolbar
                    var clone = $('.sf-toolbar:eq(0)').clone(true);
                    // change the id of the clone (you cannot have the same id twice)
                    // fmake sure the toolbar containing info about the ajax call
                    // is the one on the bottom
                    clone.attr('id', id).find('.sf-toolbarreset, .sf-minitoolbar').css('bottom', '+=0px');
                    // hide the main toolbar (for improved visual experience)
                    $('.sf-toolbar:eq(0)').find('a.hide-button').click();
                    // and mage sure it will be located on top of the new toolbar
                    $('.sf-toolbar:eq(0)').find('.sf-toolbarreset, .sf-minitoolbar').css('bottom', '+=38px');
                    // append the clone after the main toolbar
                    // append after because you want the main toolbar to
                    // continuously be updated with each ajax call
                    $('.sf-toolbar:eq(0)').after(clone);
                } else {
                    // if a repeated ajax call
                    // just update the second toolbar (not the default)
                    $('.sf-toolbar:eq(1)').attr('id', id);
                }
                // Load the data of the given xdebug token into the current toolbar wrapper
                Sfjs.load(id, url);
            }
        }
    });
});