How can two HTML template elements be updated using (HTMX) ?

Using Django Templates & Frontend
1

I have a form in which there are three fields, basically these fields contain drop-down lists - selections. These select lists are based on a data model that has fields associated with ForeynKey .

After completing this form.

I update information, code and do calculations in code.
Further after the calculations.
I am updating two elements on the template - a table and a graph.
I have these two elements in separate parts of the template.
Like two different pieces of HTML .
With (HTMX) I can only update one element on the table - this element is a chunk of the HTML template - which is updated by rendering that chunk of that template. How can I update another piece of the template?

How can two HTML template elements be updated using (HTMX) ?

I would be very grateful for any help.

>     <div class="row">
>         <div class="col-6">
>             <form method="POST" class="post-form">
>                 {% csrf_token %} {{form_1.as_p}}
>                 <button type="submit" class="save btn btn-light">Form</button>
>             </form>
>         </div>
>     </div>
>     <div class="row">
>         <div class="col">
>             {{ div_1|safe }}
> 
>             {{ script_1|safe }}
>         </div>
>     </div>
>     <div class="row">
>         <div class="col">
>             {{ div_2|safe }}
> 
>             {{ script_2|safe }}
>         </div>
>     </div>

> class Form_1(forms.ModelForm):
> 
>     class Meta:
>         model = Model_1
>         fields = "__all__"

> class Model_1(models.Model):
>     name_1 = models.CharField(max_length=150, verbose_name="Name_1")
>     name_2 = models.CharField(max_length=150, verbose_name="Name_2")
> 
>     def __str__(self):
>         return self.name_1, self.name_2

> def form_1(request):
>     context = {}
>     form = Form_1(request.POST or None)
>     if form.is_valid():
>         form.save()
>         script_1, div_1 = components(data_table)
>     
>         context['script_1'] = script_1
>         context['div_1'] = div_1
>         script_2, div_2 = components(fig)
>     
>         context['script_2'] = script_2
>         context['div_2'] = div_2
> 
>         return render(request, "data_table", "fig", context)
> 
>     context['form_1'] = form
>     return render(request, "form_1.html", context)
2

This is not an accurate statement. See </> htmx ~ hx-swap-oob Attribute

Side note: When posting code, enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted, avoiding the need for you to add the > characters at the beginning of each line. (Note: Those lines of ``` must be lines by themselves, there must not be anything else before or after those backticks on that line.)

3

Thank you very much for your help.
You are saving me.

I have two elements.
I placed them, not as an embedding, (include) in the template from an additional other piece (part) of the html element.
And as part of the main part of the entire html template.

I end up returning elements from a piece of the html part.
Which contains two elements that I want to update.

If you have the opportunity, you can roughly suggest what you need to write in the settings of the div element.

I edited the main part of the question at the top - added new elements.

Maybe I have an error somewhere.

def index_htmx(request):
    context = {}
    ///code///

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

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

index_htmx_added.html

    <div id="table"
         hx-swap="beforeend"
         hx-swap-oob="true"
         class="col-6">
        {{ div|safe }}
        {{ script|safe }}
    </div>

    <div id="figure" 
         hx-swap="beforeend"
         hx-swap-oob="true"
         class="col-6">
        {{ div_2|safe }}
        {{ script_2|safe }}
    </div>

index_htmx.html

 <div class="row">
        <div class="col-4">
                <select
                        id="select-name"
                        class="custom-select"
                        name="select"
                        autocomplete="off"
                        hx-get="{% url 'index_htmx' %}"
                        hx-target="#figure, #table"">
                    {% for select in selector %}
                        <option value="{{ select }}">{{ select }}</option>
                    {% endfor %}
                </select>
        </div>
    </div>
    <div class="row">
        <div id="table" class="col-6">
            {{ div|safe }}
            {{ script|safe }}
        </div>
        <div id="figure" class="col-6">
            {{ div_2|safe }}
            {{ script_2|safe }}
        </div>
    </div>
4

I’m not sure I understand what you’re asking for here. Is something not working? If not, can you be more specific about exactly what’s happening that you’re not expecting to have happen? (Or what’s not happening that you’re expecting to have happen)

Where is this coming from? Do you have some middleware that is setting this on your request object?

Regarding this:

Aside from the doubled quotes at the end, you don’t specify the target for any OOB-defined elements. The hx-target applies to the first div being returned.