HTMX hx-триггер две функции
У меня есть выбранный выпадающий список, который запускает функцию в моем приложении Django.
Так что мне нужно выполнить и другую функцию. возможно ли это?
это HTML код, я пытался использовать hx-триггер с загрузкой через 0.5s, но он выполняется один раз, прежде чем пользователь выберет элемент!
Затем я переместил функцию внутрь страницы, чтобы она выполнялась после того, как пользователь выберет элемент. Это работает, но возвращаемый запрос показывается в неправильном месте! А мне нужно, чтобы он находился внизу страницы?
<div class="col-md-3">
<select class="custom-select mb-4" name="fields" hx-get="{% url 'select_field' %}" hx-trigger="change" hx-target="#Wells" hx-include="[name='Toggle']">
<option selected>Select a field</option>
{% for Field in TFTFields %}
<option ue="{{Field.Perimeter}}">{{Field.Perimeter}}</option>
{% endfor %}
</select>
</div>
<div class="row">
<div class="col-md-12" >
<div id="Wells">
{% include 'Home/Data_visa/part_Wells.html' %}
</div>
</div>
</div>
<div class="col-md-12" >
<div id="part_MyWellsList">
{% include 'Home/Data_visa/part_MyWellsList.html' %}
</div>
</div>
И этот мой part_Wells.html
как
<div class="col-md-3" >
<select class="custom-select mb-4" name="Wells" hx-get="{% url 'addplotly' %}" hx-trigger="change" hx-target="#plotly_production" hx-include="[name='Toggle']">
<option selected>Select Well</option>
{% for well in TFTWells %}
<option value="{{well.WellID}}">{{well.WellID}}</option>
{% endfor %}
</select>
</div>
<div id="part_MyWellsList" class="d-inline-flex"
hx-get="{% url 'LoadWells' %}"
hx-trigger="load delay:0.5s"
hx-include="[name='fields']">
</div>
и эта part_MyWellsList
страница:
{% if FieldWells %}
<div class="row">
<div class="col-md-3" >
<select class="custom-select mb-4" name="Wells1" hx-get="{% url 'addplotly' %}" hx-trigger="change" hx-target="#plotly_production" hx-include="[name='Toggle']">
<option selected>Select Well</option>
{% for well in FieldWells %}
<option value="{{well.WellID}}">{{well.WellID}}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
с этой структурой все в бэкенде работает хорошо только мне нужно чтобы последний выпадающий список был внизу страницы?
Я решил эту проблему, сделав следующие изменения. главная страница:
<div class="col-md-3">
<select class="custom-select mb-4" name="fields" hx-get="{% url 'select_field' %}" hx-trigger="change" hx-target="#Wells" hx-include="[name='Toggle']">
<option selected>Select a field</option>
{% for Field in TFTFields %}
<option ue="{{Field.Perimeter}}">{{Field.Perimeter}}</option>
{% endfor %}
</select>
</div>
<div class="row">
<div class="col-md-12" >
<div id="Wells">
{% include 'Home/Data_visa/part_Wells.html' %}
</div>
</div>
</div>
<div class="col-md-12" >
<div id="part_MyWellsList">
</div>
</div>
а также на вторых страницах как:
<div class="col-md-12"
hx-target="#part_MyWellsList"
hx-get="{% url 'LoadWells' %}"
hx-trigger="load"
hx-include="[name='fields']"
hx-swap="innerHTML">
{% include 'Home/Data_visa/part_MyWellsList.html' %}
</div>