Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

220
Views
¿Cómo hacemos que una respuesta htmx active un restablecimiento de formulario?

Estoy creando una aplicación de mensajería Django muy básica y me gustaría usar htmx para enviar y procesar mensajes. Puedo publicar, guardar el mensaje y mostrar el mensaje parcial sin problemas. Sin embargo, me encuentro con un problema extraño en el que no se reinicia el área de texto de mi formulario. Entonces, enviaría un mensaje, y después de insertar el intercambio, mi mensaje anterior aún estaría en el área de texto. ¡Esto no es muy ideal!

Traté de borrar manualmente el área de texto agregando un evento onclick así:

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>

Guión ( 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>

A pesar de tener message_form.submit() en submitForm(), mi formulario no se envía, pero el área de texto se restablece.

Pregunta:

¿Cómo haría para restablecer mi área de texto después de enviar y entregar un mensaje con éxito?

Vista de Django, basada en 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})
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Para soluciones del lado del servidor, podría:

  1. Aumente el objetivo en hx-target para incluir tanto el nuevo mensaje como el formulario para que ambos se reemplacen al enviar. Por supuesto, la respuesta parcial en este caso tendría que ser ajustada.

  2. Mantenga las cosas como están ahora, pero incluya el formulario en su respuesta para un intercambio oob (fuera de banda) https://htmx.org/attributes/hx-swap-oob/ . Para el intercambio de oob, agregue el marcado del formulario a su nueva respuesta de mensaje con el atributo hx-swap-oob="true" .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!