0

After recent success in some simple HTMX tasks I wanted to extend adamchainz django-htmx example by a modal field that updates a table dynamically. I am not sure if I am returning the right thing in render ... but my problem is, the table is not being updated. Only when I hit reload.

view:

class CreateProductView(TemplateView):
    template_name = "app/product_create.html"
    form_class = OrderForm

    def get(self, request, *args, **kwargs):
        return render(request, self.template_name, {'form': self.form_class()})

    def post(self, request):
        Product.objects.create(name = request.POST["name"], price = request.POST["price"])
        part_template = "app/partial-rendering.html"
        return render(request, part_template, {"base_template": "app/_partial.html"})

urls.py:

path("create/", views.CreateProductView.as_view(), name = 'create'),

This is my index.html with the table in it:

<div class="..."><button class="btn btn-primary" 
                         id="showButton"
                         hx-get="/create" 
                         hx-target="#modal-create">create</button</div>

<main role="main" id="main">{% include "app/orders_table.html" %}</main>
<div id="modal-create"></div>

I also have a partial-rendering.html in place:

{% extends base_template %}

{% block main %}
     {% include "app/product_table.html" %}
{% endblock %}

and a _partial.html:

<main id="main">
    {% block main %}{% endblock %}
</main>

I will not post the whole product_table.html here, I guess it is straight forward ... mainly:

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>product name</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        {% for product in page.object_list %}
            <tr>
                <td>{{ product.name}}</td>
                <td>{{ product.price }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

The data from the form is collected via JS and sent to django using AJAX. I did not use the normal form submit because I wanted to avoid a page reload (which would solve that problem, I know).

I did try to put this together from the example mentioned above. Everything except the dynamic page update runs well!

xtlc
  • 1,070
  • 1
  • 15
  • 41
  • 1
    Did this ever get figured out? I'm trying to do the exact same thing. – Steve Smith Feb 16 '22 at 18:39
  • yes I did indeed. What is your exact question? – xtlc Feb 19 '22 at 13:08
  • Working on it this am. I am trying to figure out after a user updates a page and puts a line item in...how to then sort the list of items without a page reload. As you have described I have the whole list working with HTMX and it's all working great...except I'd rarther the user not have to reload the page to reorder the list. – Steve Smith Feb 19 '22 at 17:08
  • It was suggested I do something like...ONCLICK="location.reload();"...and that in fact does work. I'm just trying to see if there are any other approaches to this problem. – Steve Smith Feb 19 '22 at 17:10
  • I documented my issue here....https://stackoverflow.com/questions/71147901/how-do-you-trigger-htmx-page-refresh-after-user-updates-any-part-of-the-page I can't seem to figure out the responses that have been provided thus far. – Steve Smith Feb 19 '22 at 18:30
  • Is there a way to drive the refresh using HTMX? From what I've been reading it seems like there is I just can't quite piece it all togther. – Steve Smith Feb 20 '22 at 16:09

2 Answers2

0

Some approach is to remove the div targeted:

<div id="modal-create"></div>

then in your table body write the id deleted:

<tbody id="modal-create">

you want some partial for your table loops

{% for product in page.object_list %}
         {% include 'some_table_body_tr_partial.html' %}
{% endfor %}

your partial might contain something like this:

<tr hx-target="this" hx-swap="outerHTML">
      <td>{{ product.name}}</td>
      <td>{{ product.price }}</td>
</tr>

This approach have an issue: the width of the form will take the wide of the first column.

Juan Betancourt
  • 1
0

In your form add: hx-on="htmx:afterRequest:location.reload()"

Michal Spisiak
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 04 '23 at 21:09