No se puede enviar una solicitud POST utilizando HTMX + Django.

30 Jul, 2023 Programación 0

Estoy intentando crear una página CRUD utilizando django + HTMX y no puedo enviar la solicitud POST.
hx-post envía una solicitud GET en lugar de una solicitud POST.

Mis modelos de roles son los siguientes:

class Role(models.Model):
    name = models.CharField(max_length=200)

Estoy creando el formulario usando Cripsy Forms de la siguiente manera:

class RoleForm(forms.ModelForm):
    class Meta:
        model = Role
        fields = ('name',)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.fields['name'].label = "Rol"

        self.helper.add_input(Submit('add_new_Role', 'Agregar', css_class='role_button'))
        self.helper.layout = Layout(
            Row(
                Column('name'),
            )
        )

Estoy utilizando el formulario en mi plantilla de la siguiente manera:

{% extends 'main.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="row">
  <div class="card col-md-6 ml-auto mr-auto">
    <div class="card-body">
      {% crispy role_form %}
    </div>
  </div>
</div>
<div id="role_list">
  {% include 'role_list.html' %}
</div>


{% endblock %}


{% block javascript %}
<script type="text/javascript">
  $(document).ready(function(){
    $("form").removeAttr("method");
    $('.role_button').attr("hx-post", '{% url "role_add" %}');
    $('.role_button').attr('hx-target', '#role_list');

  });
</script>

{% endblock %}

El enlace CDN se agrega en el archivo main.html.

Mi entendimiento es que al hacer clic en el botón AGREGAR debería desencadenar una solicitud POST.
Sin embargo, se inicia una solicitud GET, lo que me hace pensar que la parte de HTMX no funcionó en absoluto.

davy.ai

July 30, 2023 at 11:31 pm

Para solucionar el problema de hx-post enviando una solicitud GET en lugar de una solicitud POST, puedes intentar los siguientes pasos:

Verifica si has incluido el atributo hx-POST en tu botón o enlace HTML.
Asegúrate de haber instalado la biblioteca JavaScript HTMX.
Asegúrate de haber especificado el endpoint correcto de la URL en tu función de vista para manejar la solicitud POST.

En este caso específico, al revisar el código, parece que falta un método de acción en el formulario que especifique la URL a la cual se envían los datos. Intenta agregar un atributo action a la etiqueta <form> y establece su valor utilizando la etiqueta de plantilla de Django url para el endpoint de URL que maneja la solicitud POST.

Por ejemplo, si el nombre del patrón de URL es role-add, puedes agregar el siguiente fragmento de código a tu formulario:

<form method="POST" action="{% url 'role-add' %}">
<!-- resto del formulario -->
</form>

Esto debería solucionar el problema de hx-post enviando una solicitud GET.

Answer

davy.ai

July 30, 2023 at 11:31 pm
Para solucionar el problema de hx-post enviando una solicitud GET en lugar de una solicitud POST, puedes intentar los siguientes pasos:
1. Verifica si has incluido el atributo hx-POST en tu botón o enlace HTML.
2. Asegúrate de haber instalado la biblioteca JavaScript HTMX.
3. Asegúrate de haber especificado el endpoint correcto de la URL en tu función de vista para manejar la solicitud POST.
En este caso específico, al revisar el código, parece que falta un método de acción en el formulario que especifique la URL a la cual se envían los datos. Intenta agregar un atributo action a la etiqueta <form> y establece su valor utilizando la etiqueta de plantilla de Django url para el endpoint de URL que maneja la solicitud POST.

Por ejemplo, si el nombre del patrón de URL es role-add, puedes agregar el siguiente fragmento de código a tu formulario:
```
<form method="POST" action="{% url 'role-add' %}">

</form>
```
Esto debería solucionar el problema de hx-post enviando una solicitud GET.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

No se puede enviar una solicitud POST utilizando HTMX + Django.

Answer

davy.ai