|
| 1 | +# AJAX and Stacked data |
| 2 | + |
| 3 | +## AJAX |
| 4 | + |
| 5 | +As mentioned in the previous chapter, if you are performing AJAX requests |
| 6 | +which return HTML content, you can use `JavascriptRenderer::render(false)`. |
| 7 | + |
| 8 | +In the case you are sending back non-HTML data (eg: JSON), the DebugBar can |
| 9 | +send data to the client using HTTP headers using the `sendDataInHeaders()` method |
| 10 | +(no need to use the `JavascriptRenderer`): |
| 11 | + |
| 12 | + $debugbar = new DebugBar(); |
| 13 | + // ... |
| 14 | + $debugbar->sendDataInHeaders(); |
| 15 | + |
| 16 | +On the client side, an instance of `PhpDebugBar.AjaxHandler` will |
| 17 | +parse the headers and add the dataset to the debugbar. |
| 18 | + |
| 19 | +The AjaxHandler automatically binds to jQuery's *ajaxComplete* event |
| 20 | +so if you are using jQuery, you have nothing to configure. |
| 21 | + |
| 22 | +If you're not using jQuery, you can call `AjaxHandler.handle(xhr)`. |
| 23 | +If you are using the `JavascriptRenderer` initialization, the instance |
| 24 | +of `AjaxHandler` is stored in the `ajaxHandler` property of the `DebugBar` object. |
| 25 | + |
| 26 | + debugbar.ajaxHandler.handle(xhr); |
| 27 | + |
| 28 | +If you are sending a lot of data through headers, it may cause problems |
| 29 | +with your browser. Instead you can use a storage handler (see Storage chapter) |
| 30 | +and the open handler (see Open Handler chapter) to load the data after an ajax |
| 31 | +request. Use true as the first argument of `sendDataInHeaders()`. |
| 32 | + |
| 33 | + $debugbar = new DebugBar(); |
| 34 | + |
| 35 | + // define a storage |
| 36 | + $debugbar->setStorage(new DebugBar\Storage\FileStorage('/path/to/storage')); |
| 37 | + |
| 38 | + // define the open handler url |
| 39 | + $renderer = $debugbar->getJavascriptRenderer(); |
| 40 | + $renderer->setOpenHandlerUrl('open.php'); |
| 41 | + |
| 42 | + // ... |
| 43 | + |
| 44 | + $debugbar->sendDataInHeaders(true); |
| 45 | + |
| 46 | +By default, the debug bar will immediately show new AJAX requests. If your page |
| 47 | +makes a lot of requests in the background (e.g. tracking), this can be |
| 48 | +disruptive. You can disable this behavior by calling |
| 49 | +`setAjaxHandlerAutoShow(false)` on the `JavascriptRenderer`, like this: |
| 50 | + |
| 51 | + $renderer = $debugbar->getJavascriptRenderer(); |
| 52 | + $renderer->setAjaxHandlerAutoShow(false); |
| 53 | + |
| 54 | +## Fetch |
| 55 | + |
| 56 | +Fetch API is supported by wrapping `window.fetch` so that the promise is also |
| 57 | +passed through to the debugbar AJAX handler. |
| 58 | + |
| 59 | +If you find your fetch requests are not showing up in debugbar, you're probably |
| 60 | +initializing your JavaScript client library (e.g. Apollo) before debugbar has |
| 61 | +loaded, try adding `defer` onto your script tags, or moving them after the |
| 62 | +injected debugbar JavaScript. |
| 63 | + |
| 64 | +## Stacked data |
| 65 | + |
| 66 | +Some times you need to collect data about a request but the page won't actually |
| 67 | +be displayed. The best example of that is during a redirect. You can use the |
| 68 | +debug bar storage mechanism to store the data and re-open it later but it can |
| 69 | +be cumbersome while testing a redirect page. |
| 70 | + |
| 71 | +The solution is to use stacked data. The debug bar can temporarily store the |
| 72 | +collected data in the session until the next time it will be displayed. |
| 73 | +Simply call `DebugBar::stackData()` instead of rendering the debug bar. |
| 74 | + |
| 75 | +PHP's session must be started before using this feature. |
| 76 | + |
| 77 | +Note: The stacked data feature will use the storage mechanism if it's enabled |
| 78 | +instead of storing the data in the session. |
| 79 | + |
| 80 | + $debugbar = new DebugBar(); |
| 81 | + // ... |
| 82 | + $debugbar->stackData(); |
| 83 | + |
| 84 | +Stacked data are rendered each time the debug bar is rendered using the |
| 85 | +`JavascriptRenderer`. |
0 commit comments