https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • h
    I think what you have is great except you're missing the boosted case
  • f
    Perfect, so I'm not alone on the concept. Thanks a lot!
  • s
    hi! Me again. Any idea why 
    hx-delete
    is being called twice? One for the endpoint and one again in the redirect url. I changed it to 
    hx-post
    and it does not have that behavior.
  • r
    htmx wants to make 100% sure it gets deleted, that's why.
  • s
    that makes sense. how should I handle it in the backend? Should I return a 204 instead of 302?
  • w
    My take was to define a class level 
    template_names
    dictionary where keys were targets (element ids) and values were template names. Then in 
    get_template_names
    it would try to return 
    self.template_names[self.request.htmx.target]
    This lets you use multiple template fragments in one view
  • h
    I returned a 303
  • h
    instead of a 302
  • h
    that worked for deletes
  • h
    I really like that - more dynamic than just htmx/not htmx
  • w
    Yeah, I have a couple dashboards that have multiple widgets, each widget has it's own template and a method in the larger Class Based View. It's also helpful for if you want to display forms and have a template for the form
  • w
    Yeah, I have a couple dashboards that have multiple widgets, each widget has it's own template and a method in the larger Class Based View. It's also helpful for if you want to display forms and have a template for the form EDIT: To go further, each widget template is a Bootstrap card, and then I can mess around with layouts by having templates that are basically just
    Copy code
    <div class="col">
  {% include 'widgets/my_widget.html' %}
</div>
  • h
    Yeah I did the htmx/not htmx but it didn't occur to me to vary in the Target
  • h
    That makes total sense
  • w
    I also override 
    get_context_data
    to provide a 
    base_template
    variable, inspired by https://django-htmx.readthedocs.io/en/latest/tips.html#partial-rendering
    Copy code
    context = super().get_context_data(**kwargs)
context.update({
  'base_template': 'main.html' if self.request.htmx else 'base.html'
})
    Then most of my templates start with 
    {% extends base_template %}
    , where 
    base.html
    has the 
    <html>
    <head>
    , 
    <script>
    tags etc, and an hx-boosted div
    Copy code
    <div id="main-wrapper" hx-boost="true" hx-target="#main" hx-history-elt="true" hx-swap="innerHTML">
  {% include 'main.html' %}
</div>
    and main.html is
    Copy code
    <main id="main">
  {% block extra_css %}{% endblock %}
  {% block extra_js %}{% endbock %}
  {% block main %}{% endblock %}
</main>
  • f
    Very interesting pattern… Thanks for sharing! This is where discord channels make the most sense
  • f
    It does’nt fell that will play well in all cases, swapping the main is not always what you want. Depends on the structure of the site, the structure of the page…
  • f
    This definitely an interesting approach! if in one page you have several htmx interaction, this is very very neat!
  • w
    Thanks 🙂 I was about to reply to your previous comment saying I don't always target 
    #main
    , but looks like you found that out 🙂
  • a
    Hello everyone, I'm writing a Django app that has a sequence of pages following a file upload. eg:
    Copy code
    File-upload-page -> (file parsed in django) -> File-parse-result-page -> Show-parsed-info-in--a-tree-view-page -> (process the selections) -> Show-final-awesomeness-page
    I am using partial templates and htmx to move along the sequence. The problem I'm having is that different pages need different javascript packages and 
    <script>s
    in addition to those loaded in the site 
    _base.html
    and 
    scripts.html
    I've read the docs for 
    htmx.onLoad()
    and 
    htmx.process()
    multiple times, and I still can't seem to get my head around where I should be putting the 
    <script src=..
    tags and the snippets of JS needed to do things like configure the tree display widget I'm using (jstree) My python and Django knowledge is moderate, my js is very limited. As an example. I have this tag on the first partial, that is loaded into the base page via a 
    {% include 'import/htmx/upload_file.html' %}
    rather than htmx, The script appears to activate on subsequent htmx-swaps
    Copy code
    <script>
      htmx.onLoad(function () {
        bsCustomFileInput.init();
        });
</script>
    All the docs have stuff like 
    function(elt)
    etc, should I be tagging a div or using something specific on the page to trigger the function after the 
    htmx.onLoad()
    ? (tldr:) Where should partial page specific js be put? Base page or in the partial. How can I ensure JS loaded in the partial via htmx is seen in the DOM and can be activated/triggered. Thanks.
  • f
    Tip found today (maybe you thought about it): If you want to update an component on a page through a form that has already a separate view:
    Copy code
    html
<form {% if request.htmx %}
        hx-post="/there" hx-target="#my-element"
      {% else %}
        method="post" action="/here"
      {% endif %}
      ...
</form>
    Then in the back you have to handle the redirection accordingly…
  • f
    take 2:
    Copy code
    python
class HtmxMixin:

    fragment_name: str = None
    fragment_names: dict[str] = {}

    def get_template_names(self):
        if self.request.htmx:
            return self.get_fragment_names()
        return super().get_template_names()

    def get_fragment_names(self):
        if self.fragment_name is None not self.fragment_names:
            raise ImproperlyConfigured("blabla")
        return self.fragment_names.get(self.request.htmx.target,
                                       self.fragment_name)
    Now you can subclass and chose between defining only one fragment, or several based on target...
  • a
    offtopic is there something else to do with the backticks to get discord to colour the code block?
  • f
    yes, it’s a markdown feature I think, just put the name of the language after the three first backsticks
  • f
    ````python`
  • b
    (And ````applescript` to get most of the way there with hyperscript)
  • r
    top tip. It's the server secret.
  • m
  • m
  • k
    Hey all, this was a problem I stumbled on yesterday. The solution I found to work for me was to use the django-htmx HttpResponseClientRedirect like in the image attached.
1...596061...100Latest