我们如何使 htmx 响应触发表单重置?
How do we make a htmx response trigger a form reset?
我正在创建一个非常基本的 Django 消息传递应用程序,并且想使用 htmx
来发送和呈现消息。我能够 post、保存消息并毫无问题地呈现部分消息。但是,我 运行 遇到了一个奇怪的问题,我的表单 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>
脚本 ()
<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>
尽管在 submitForm() 中有 message_form.submit()
,但我的表单没有被提交,但文本区域正在重置。
问题:
在成功发送和呈现消息后,我将如何重置我的文本区域?
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"
.
的新消息响应
我正在创建一个非常基本的 Django 消息传递应用程序,并且想使用 htmx
来发送和呈现消息。我能够 post、保存消息并毫无问题地呈现部分消息。但是,我 运行 遇到了一个奇怪的问题,我的表单 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>
脚本 ()
<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>
尽管在 submitForm() 中有 message_form.submit()
,但我的表单没有被提交,但文本区域正在重置。
问题:
在成功发送和呈现消息后,我将如何重置我的文本区域?
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"
.