CodeIgniter 4.3.3 debug bar conflicts with HTMX

CodeIgniter 4.3.3 debug bar conflicts with HTMX - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter 4 (https://forum.codeigniter.com/forumdisplay.php?fid=28)
+--- Forum: CodeIgniter 4 Support (https://forum.codeigniter.com/forumdisplay.php?fid=30)
+--- Thread: CodeIgniter 4.3.3 debug bar conflicts with HTMX (/showthread.php?tid=87812)

CodeIgniter 4.3.3 debug bar conflicts with HTMX - Corsari - 06-03-2023

This is my Firefox debug when the view is firstly loaded
you see XHR of the Codeigniter debug bar, at this point yet no problems

[Image: xtmx-ci4-01.png]

this is after making the FIRST search, you see the POST and again the XHR of the debug bar, again no problems yet

[Image: xtmx-ci4-02.png]

now when I delete the search field and I enter a new string, I get this and the Javascript totally breaks
I mean that JavaScript stops working
and in fact no more POST is fired by HTMX. Follows after the screeshot

[Image: xtmx-ci4-03.png]

you need 7x PgDn to scroll all of those

Code:
newXHR http/..../?debugbar

the last line is a link to Mozilla Developers Network and the page is this
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion

But if I go to .env and I disable the development environment, everything works as expected and I can do all the searches I want

this is the result after 4 different searches, BUT only with Codeigniter development mode disabled . This way HTMX AJAX works like a charm and no errors in the Firefox console. It follows at bottom

[Image: xtmx-ci4-04.png]

I can show the code but is it really basic, and in fact it alone (I mean with development mode disabled, it works) it works

Looks really a sort of conflict between HTMX and the debug bar mechanism of Codeigniter

RE: CodeIgniter 4.3.3 debug bar conflicts with HTMX - ozornick - 06-03-2023

Add "except" URL pattern with POST request in Config/Filters.php

https://codeigniter.com/user_guide/incoming/filters.html#except-for-a-few-uris

or disable debugbar

RE: CodeIgniter 4.3.3 debug bar conflicts with HTMX - Corsari - 06-04-2023

(06-03-2023, 11:00 PM)ozornick Wrote: Add "except" URL pattern with POST request in Config/Filters.php

https://codeigniter.com/user_guide/incoming/filters.html#except-for-a-few-uris

or disable debugbar

@ozornick thank you for your reply

Implicit topic in this thread is ... avoid disabling debug-bar ... otherwise development becomes trickier

instead it is not clear to me how to apply your kind suggestion

Thank you for any example

RE: CodeIgniter 4.3.3 debug bar conflicts with HTMX - michalsn - 06-05-2023

You can use CodeIgniter-HTMX. It makes Debug Bar available via "debugbar-link" response header.
If you're rendering only fragments, not the whole page, you can also use something like this:

Code:
htmx.on('htmx:afterRequest', function(ev) {

    let debugBarTime = ev.detail.xhr.getResponseHeader("debugbar-time");

    if (debugBarTime !== null) {

        loadDoc(debugBarTime);

    }

});

This will update the previously rendered Debug Bar to the new one.