Update element with HTMX if two (2) elements have new value?

Using Django Templates & Frontend
1

I have an element - dropdown list selector. Which works and there is a choice of value. Based on the value received, I send a request to execute the code and, at the end, to change / render another element (graph).

I added one more element to the template - one more selector list. And also redirected the change route to this element in the template. It also began to change based on the received value in the first selector list.

I’m thinking about how you can change the third element of the template (graph) - based on the values obtained - by the first and second elements (two selector lists). The first selector list - refines filters the model query.

The second selector list - refines, filters the model request more precisely - the values ​​already left in the request after the first selector and already at the end sends the result to display in the form of a graph.

How can you think of changing only the schedule - rebuilding without changing the entire template? Whether it is possible to think up such by means of HTMX?

zamer_tabl_2_htmx.html

<div class="row">
        <div class="col-4">
                <select
                        id="select-name"
                        class="custom-select"
                        name="select"
                        autocomplete="off"
                        hx-get="{% url 'zamer_tabl_2_htmx' %}"
                        hx-target="#figure, #selector_2">
                    {% for select in selector %}
                        <option value="{{ select }}">{{ select }}</option>
                    {% endfor %}
                </select>
                <hr/>
                <div id="selector_2" class="col-8">
                    {% include 'zamer_tabl_2_htmx_select.html' %}
                </div>
        </div>
        <div id="figure" class="col-8">
            {% include 'zamer_tabl_2_htmx_figure.html' %}
        </div>
    </div>

zamer_tabl_2_htmx_select.html

        <select
                id="select-name-2"
                class="custom-select"
                name="select_2"
                autocomplete="off"
                hx-target="#figure">
            {% for select_2 in selector_2 %}
                <option value="{{ select_2 }}">{{ select_2 }}</option>
            {% endfor %}
        </select>

views

def zamer_tabl_2_htmx(request):
///code///
    if request.htmx:
        print("HTMX")
        if request.htmx:
            print("HTMX")
            print(select_kotol)
            return render(request, 'zamer_tabl_2_htmx_select.html', context)
        return render(request, 'zamer_tabl_2_htmx_figure.html', context)

    return render(request, "zamer_tabl_2_htmx.html", context)
2

I would not try to do this in one view or template.

The first dropdown would call view 1 to replace the div containing the selection list for the second dropdown.

The second dropdown would call view 2 to build and render the graph and replace the div with that graph. You can include an hx-include attribute on that element to include the value of the first dropdown when issuing the get.

Very easy to do with HTMX.

3

Thank you very much for the information.

I can update the second select dropdown.

But I can’t figure out how I can move from this second list to the new view.
Can this be done using the redirect function or using the settings (HTMX)?
I recently started looking into updating and linking between elements on a page. And while this is very difficult to deal with.
I would be very grateful for any help.

if request.htmx:
    print("HTMX")
    if request.htmx:
        print("HTMX")
        print(select_kotol)
    return render(request, 'zamer_tabl_2_htmx_select.html', context)

return render(request, "zamer_tabl_2_htmx.html", context)

def zamer_tabl_2_htmx_select_2(request):

            <select
                    id="select-name-2"
                    class="custom-select"
                    name="select_2"
                    autocomplete="off"
                    hx-target="#figure">
                {% for select_2 in selector_2 %}
                    <option value="{{ select_2 }}">{{ select_2 }}</option>
                {% endfor %}
            </select>

4

Thank you very much for the information.

I can update the second select dropdown.

But I can’t figure out how I can move from this second list to the new view.
Can this be done using the redirect function or using the settings (HTMX)?
I recently started looking into updating and linking between elements on a page. And while this is very difficult to deal with.
I would be very grateful for any help.

> <div class="row">
>         <div class="col-4">
>                 <select
>                         id="select-name"
>                         class="custom-select"
>                         name="select"
>                         autocomplete="off"
>                         hx-get="{% url 'zamer_tabl_2_htmx' %}"
>                         hx-target="#figure, #selector_2">
>                     {% for select in selector %}
>                         <option value="{{ select }}">{{ select }}</option>
>                     {% endfor %}
>                 </select>
>                 <hr/>
>                 <div id="selector_2" class="col-8">
>                     {% include 'zamer_tabl_2_htmx_select.html' %}
>                 </div>
>         </div>

>                 <select
>                         id="select-name-2"
>                         class="custom-select"
>                         name="select_2"
>                         autocomplete="off"
>                         hx-target="#figure">
>                     {% for select_2 in selector_2 %}
>                         <option value="{{ select_2 }}">{{ select_2 }}</option>
>                     {% endfor %}
>                 </select>

>     if request.htmx:
>         print("HTMX")
>         if request.htmx:
>             print("HTMX")
>             print(select_kotol)
>         return render(request, 'zamer_tabl_2_htmx_select.html', context)
> 
>     return render(request, "zamer_tabl_2_htmx.html", context)
> 
> 
> def zamer_tabl_2_htmx_select_2(request):

>         <div id="figure" class="col-8">
>             {% include 'zamer_tabl_2_htmx_figure.html' %}
>         </div>
5

You want to change your thinking a little bit here. You’re not “connected” to a view in any sense of the word at all. Your browser submits requests to a url. It doesn’t matter what that url is or what url was previously used to retrieve content.

So don’t think of it as “moving” from one view to another. Think of it as “what view do I need to call to retrieve the proper content”.