Как сделать так, чтобы htmx-ответ вызывал сброс формы?
Я создаю очень простое приложение для обмена сообщениями на Django и хотел бы использовать htmx
для отправки и отображения сообщений. Я могу отправить сообщение, сохранить его и отобразить частичное сообщение без проблем. Однако я столкнулся со странной проблемой, когда текстовая область моей формы не сбрасывается. Таким образом, я отправляю сообщение, а после того, как вставляется замена, мое старое сообщение все еще находится в текстовой области. Это не очень идеально!
Я попытался вручную очистить textarea, добавив событие onclick следующим образом:
Html
<div id="new-message-div"></div>
<form id="message-form" class="chat-form rounded-pill bg-dark" data-emoji-form="" hx-post="{% url "chat:create-message" object.pk %}" hx-target="#new-message-div">
...
{{ message_form }}
...
<button class="btn btn-icon btn-primary rounded-circle ms-5" type="submit" onclick="submitForm()"> </button>
</form>
Сценарий (https://stackoverflow.com/a/14589251/12758446)
<script>
function submitForm() {
var message_form = document.getElementById('message-form');
message_form.submit(); // Submit the form
message_form.reset(); // Reset all form data
return false; // Prevent page refresh
}
</script>
Несмотря на наличие message_form.submit()
в submitForm(), моя форма не отправляется, но текстовая область сбрасывается.
Вопрос:
Как мне сделать так, чтобы моя textarea была сброшена после успешной отправки и отображения сообщения?
Django представление, основанное на https://github.com/legionscript/socialnetwork/blob/84375841429887e394a2a31e1b67919f81a3cb06/social/views.py#L428
def create_message(request, pk):
message = None
if request.htmx:
thread = get_object_or_404(ThreadMessageModel, pk=pk)
form = MessageModelForm(request.POST)
if thread.receiver == request.user:
receiver = thread.user
else:
receiver = thread.receiver
if form.is_valid():
message = form.save(commit=False)
message.thread = thread
message.sender_user = request.user
message.receiver_user = receiver
message.save()
form = MessageModelForm()
return render(request, 'chat/subtemplate/render_message.html', {'message': message})
Для решений на стороне сервера вы можете:
Увеличьте цель в
.hx-target
, чтобы включить и новое сообщение, и форму, чтобы обе они были заменены при отправке. Конечно, частичный ответ в этом случае нужно будет скорректировать.Оставьте все как есть, но включите форму в ответ для oob (внеполосного) обмена https://htmx.org/attributes/hx-swap-oob/. Для oob-обмена добавьте разметку формы в ответ на новое сообщение с атрибутом
.hx-swap-oob="true"
.