es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar retroalimentación sobre la solicitud exitosa/fallida.

05 Aug, 2023 Programación

Entonces, estoy tratando de mostrar un mensaje de retroalimentación que diga “agregado” o “fallido” cuando se envía un formulario con HTMX a mi backend de Django.

Básicamente, lo que tengo ahora es un formulario que realiza un hx-post, y la respuesta es un div que contiene la información actualizada, que se intercambia con el contenido actual del div.

<div id="list">
    <!-- El contenido aquí se carga a través de otra plantilla, que es
         el resultado de una operación myApp:add exitosa. -->
</div>
<form hx-post="{% url 'myApp:add' eid=e.id %}" hx-swap="outerHTML" hx-target="#list">
    <!-- Algunas cosas aquí -->
</form>
<div id="result">
    <!-- Aquí debería imprimir un mensaje que diga correcto o incorrecto
         dependiendo del resultado de HTMX (si la entrada se agregó o si hubo
         algún tipo de error, incluso errores de conexión) -->
</div>

Lo que sucede es que, en caso de un error en el formulario o en la solicitud en sí, la lista permanecerá igual, pero me gustaría que imprima algo como “error” en el div de “result”. En caso de que la nueva entrada se agregue correctamente, me gustaría imprimir un mensaje de “éxito” en el div de “result”.

Tenga en cuenta que no puedo devolver el div de “result” como parte del DOM de respuesta de hx-post, ya que la conexión podría fallar. Por lo tanto, el mensaje de error no se mostraría.

También estoy usando Alpine.js, si eso ayuda en algo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar un mensaje de retroalimentación utilizando HTMX y Django, puede utilizar el atributo hx-trigger para especificar un evento que desencadenará la actualización del div result. En este caso, puede utilizar "htmx:after-request" para desencadenar una función que actualizará el div result basándose en el estado de la respuesta.

    Primero, necesitas agregar un atributo hx-include al elemento form para especificar el contenido de la respuesta que debe incluirse en la respuesta de HTMX. Esto te permitirá acceder al estado de la respuesta en la función de JavaScript.

    <form hx-post="{% url 'myApp:add' eid=e.id %}" hx-include="#result" hx-swap="outerHTML" hx-trigger="htmx:after-request=updateResult">
    <!-- Algo de contenido aquí -->
</form>

    Luego, puedes definir una función llamada updateResult en tu script de Alpine.js que actualizará el div result según el estado de la respuesta. Puedes acceder al estado de la respuesta utilizando la función HX.getResponse y verificar si es un éxito o un error utilizando la función HX.isSuccess.

    <script>
    function updateResult() {
        var response = HX.getResponse(this);
        var resultDiv = document.querySelector('#result');
        if (HX.isSuccess(response)) {
            resultDiv.innerText = "éxito";
        } else {
            resultDiv.innerText = "error";
        }
    }
</script>

    Esta función actualizará el div result con un mensaje de “éxito” o “error” según el estado de la respuesta. Ten en cuenta que la función document.querySelector('#result') se utiliza para seleccionar el div result y la propiedad innerText se utiliza para establecer el mensaje.

    Con esta configuración, cada vez que el formulario se envíe utilizando HTMX, la función updateResult se activará después de que se complete la solicitud y el div result se actualizará con un mensaje de éxito o error.

Comments are closed.