https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • i
    OK...we will try that. Thanks!
  • i
    I think I'm at the debugging point:
  • i
    Not sure where to look next.
  • m
    step through it and see if it can find that history element
  • m
    end of the day, it's just dumping some HTML into an element 🙂
  • m
    don't tell anyone, but that's how htmx works 🙊
  • i
    This function: function getHistoryElement() { var historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]'); console.log(historyElt) return historyElt || getDocument().body; }
  • i
    returns null when I console log historyElt. So getDocument().body is being returned, which is the body of the current page, not the previous page.
  • m
    OK, that actually sounds right
  • m
    going "back" in this sense is just restoring the DOM
  • m
    is the content for the previous URL correct? And is the swap executing?
  • i
    Narrowing in...just realized that when I click back, the url loads, but the page does not load. If I click in the address bar and hit enter the correct page loads. Could it be that the issue has to do with not loading the url after back and forward navigation?
  • m
    if it is htmx handling the back button, what should happen is that the URL is restored and then the content from that page is loaded from a local storage cache
  • i
    Interesting...seems like this is the code that reloads the page: 
    window.location.reload(true);
    In VS Code the word "reload" has a strikethrough. Trying to see why now.
  • m
    yes, if we don't have anything in the cache for that page, it should reload the location
  • i
    OK...I've got it working now with this change: Add 
    window.location.reload(true);
    to the end of
    Copy code
    function restoreHistory(path) {
            saveHistory();
            path = path || location.pathname+location.search;
            var cached = getCachedHistory(path);
            if (cached) {
                var fragment = makeFragment(cached.content);
                var historyElement = getHistoryElement();
                var settleInfo = makeSettleInfo(historyElement);
                swapInnerHTML(historyElement, fragment, settleInfo)
                settleImmediately(settleInfo.tasks);
                document.title = cached.title;
                window.scrollTo(0, cached.scroll);
                currentPathForHistory = path;
                triggerEvent(getDocument().body, "htmx:historyRestore", {path:path});
                window.location.reload(true); //new line
  • i
    not sure if this is the intended behavior, but when refreshing, clicking back, when the url is updated in the address bar...seems like there needs to be a reload.
  • i
    note...there is some page jank with this approach.
  • f
    @pablorivera heh props for the Tiny Tiny App btw – been using the HTMX CBV mixin ever-since
  • m
    Hi, I am facing an issue with my csp rules, when importing my local copy of "htmx.js" (v.1.6.0). My browser console tells me , that it blocked some inline style (htmx.js:2673:35). The referenced function inserts some html in style tags. Accoding to the security section in the htmx documentation it should work without an issue with CSP. I would like to go with the general recommendations of not configuring the CSP style-src to allow unsave-inline. It currently only allows 'self'. Am I missing something? I would appreciate any help!
  • m
    You can turn off the automatic insertion of styles by setting the config option 
    htmx.config.includeIndicatorStyles
    to false, and then you'd need to manually include the styles for indictators:
    Copy code
    css
  .htmx-indicator {opacity:0;transition: opacity 200ms ease-in;}
  .htmx-indicator.htmx-request {opacity:1} 
  .htmx-indicator .htmx-request {opacity:1}
  • m
    @User Thanks a lot; haven't thought about that.
  • a
    How do i trigger get request to a url when Bootstrap modal is shown / initialized i tried it with 
    hx-trigger=load
    but no luck.
  • m
    I recommend using the 
    monitorEvents()
    trick here: https://htmx.org/docs/#debugging to see what events bootstrap is triggering
  • w
    hello, is it possible to trigger websocket call via sse as trigger? i.e. 
    <div hx-trigger="sse:event" hx-ws="send"></div>
    sse is send but no websocket call is happening. can you support me please?
  • w
    my structure is following:
  • w
    Copy code
    <div hx-ws="connect:/ws/">
    <div hx-sse="connect:/sse/">
        <div hx-trigger="sse:event" hx-ws="send"></div>
     </div>
</div>
  • f
    Decorator I recently added – in case anyone needs it. Recently realized having the login page pop up in partials isn't ideal heh. Requires django-htmx 1.6+
    Copy code
    python
def htmx_login_required(f):
    """ Ensure proper redirection when a HTMX request is unauthenticated – this ensures the login-form is not loaded into a partial-spot """
    def func(request, *args, **kwargs):
        if not request.htmx:  # return bad-response for non-htmx requests
            return HttpResponseBadRequest()
        if not request.user or not request.user.is_authenticated:  # redirect to login page
            return HttpResponseClientRedirect(settings.LOGIN_URL)
        return f(request, *args, **kwargs)
    return func
  • f
    Anyone using HTMX in conjunction with 
    slippers
    btw?
  • b
    Does someone have an example of using Django forms and htmx ? Thanks a lot in advance.
1...8910...100Latest