3

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?

4

2 回答 2

8

load我最终对对象的方法进行了“逆向工程” Sfjs，结果证明它工作得很好。

这是解决方案

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

})
于 2013-07-15T03:20:51.230 回答
0

我附带了我自己版本的工具栏。
请查看代码的注释。

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

于 2014-12-19T23:44:18.310 回答