Skip to content

Commit 62f9bc4

Browse files
Auto-update History panel with JavaScript fetch requests. (#1685)
* Auto-update History panel with JavaScript fetch requests. The fetch and XHR requests don't share internals in JavaScript. We should automatically capture both sets of requests as they occur. * Include XHR increment button to test both sets of auto update functionality.
1 parent f138780 commit 62f9bc4

File tree

3 files changed

+43
-10
lines changed

3 files changed

+43
-10
lines changed

debug_toolbar/static/debug_toolbar/js/toolbar.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,15 @@ const djdt = {
261261
document.getElementById("djDebug").dataset.sidebarUrl;
262262
const slowjax = debounce(ajax, 200);
263263

264+
function handleAjaxResponse(storeId) {
265+
storeId = encodeURIComponent(storeId);
266+
const dest = `${sidebar_url}?store_id=${storeId}`;
267+
slowjax(dest).then(function (data) {
268+
replaceToolbarState(storeId, data);
269+
});
270+
}
271+
272+
// Patch XHR / traditional AJAX requests
264273
const origOpen = XMLHttpRequest.prototype.open;
265274
XMLHttpRequest.prototype.open = function () {
266275
this.addEventListener("load", function () {
@@ -270,16 +279,25 @@ const djdt = {
270279
if (
271280
this.getAllResponseHeaders().indexOf("djdt-store-id") >= 0
272281
) {
273-
let store_id = this.getResponseHeader("djdt-store-id");
274-
store_id = encodeURIComponent(store_id);
275-
const dest = `${sidebar_url}?store_id=${store_id}`;
276-
slowjax(dest).then(function (data) {
277-
replaceToolbarState(store_id, data);
278-
});
282+
handleAjaxResponse(this.getResponseHeader("djdt-store-id"));
279283
}
280284
});
281285
origOpen.apply(this, arguments);
282286
};
287+
288+
const origFetch = window.fetch;
289+
window.fetch = function () {
290+
const promise = origFetch.apply(this, arguments);
291+
promise.then(function (response) {
292+
if (response.headers.get("djdt-store-id") !== null) {
293+
handleAjaxResponse(response.headers.get("djdt-store-id"));
294+
}
295+
// Don't resolve the response via .json(). Instead
296+
// continue to return it to allow the caller to consume as needed.
297+
return response;
298+
});
299+
return promise;
300+
};
283301
},
284302
cookie: {
285303
get(key) {

docs/changes.rst

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ Change log
44
Pending
55
-------
66

7+
* Auto-update History panel for JavaScript ``fetch`` requests.
8+
9+
710
3.7.0 (2022-09-25)
811
------------------
912

example/templates/index.html

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,30 @@ <h1>Index of Tests</h1>
1818
<p>
1919
<span>Value </span>
2020
<span id="session-value">{{ request.session.value|default:0 }}</span>
21-
<button id="increment" data-url="{% url 'ajax_increment' %}" type="button">Increment</button>
21+
<button id="incrementFetch" data-url="{% url 'ajax_increment' %}" type="button">Increment via fetch</button>
22+
<button id="incrementXHR" data-url="{% url 'ajax_increment' %}" type="button">Increment via XHR</button>
2223
</p>
2324
<script>
24-
const increment = document.querySelector("#increment");
25+
const incrementFetch = document.querySelector("#incrementFetch");
26+
const incrementXHR = document.querySelector("#incrementXHR");
2527
const value = document.querySelector("#session-value");
26-
increment.addEventListener("click", function () {
27-
fetch(increment.dataset.url).then( function (response) {
28+
incrementFetch.addEventListener("click", function () {
29+
fetch(incrementFetch.dataset.url).then( function (response) {
2830
response.json().then(function(data) {
2931
value.innerHTML = data.value;
3032
});
3133
});
3234
});
35+
incrementXHR.addEventListener("click", function () {
36+
const xhr = new XMLHttpRequest();
37+
xhr.onreadystatechange = () => {
38+
if (xhr.readyState === 4) {
39+
value.innerHTML = JSON.parse(xhr.response).value;
40+
}
41+
}
42+
xhr.open('GET', incrementXHR.dataset.url, true);
43+
xhr.send('');
44+
});
3345
</script>
3446
</body>
3547
</html>

0 commit comments

Comments
 (0)