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.

Sortable JS se rompe al renderizar htmx una sección parcial.

Estoy intentando implementar una lista ordenable de arrastrar y soltar utilizando SortableJS y htmx. Lo tengo funcionando una vez, pero después de arrastrar y soltar el primer elemento (y renderizar parcialmente) ya no puedo usar la funcionalidad de arrastrar y soltar. Cuando no se renderiza parcialmente, la funcionalidad de arrastrar y soltar funciona como se espera. He intentado usar htmx.on("htmx:load",... así como poner el script en la parte parcial.

He utilizado “diff” para verificar las diferencias entre el HTML antes y después de que se renderice la parte parcial y hasta donde puedo ver, la única diferencia fuera de la lista ordenada es el token csrf.

¡Cualquier ayuda sería apreciada!

Desde views.py:

def sort(request):
    event_order = request.POST.getlist('event_order')
    events=[]
    for idx,event_pk in enumerate(event_order,start=1):
        event = Event.objects.get(pk=event_pk)
        event.event_number = idx
        event.save()
        events.append(event)

```python
return render(request,'timing/partials/eventlist.html',{'events':events})
</code></pre>

Desde eventlist.html:
<code>

<form class="sortable list-group" hx-trigger="end" hx-post="{% url 'sort' %}" hx-target="#event-list">
  {% csrf_token %}
  <div class="htmx-indicator">Updating...</div>
  {% for event in events %}
  <div>
    <input type="hidden" name="event_order" value="{{event.pk}}"/>
    <li class="list-group-item">{{event.event_number}} {{event.event_name}}
    </li>
  </div>
  {% endfor %}
</form>

</code>

Desde base.html:

<pre><code>  <script>
```javascript
document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})

htmx.onLoad(function(content) {
  var sortables = content.querySelectorAll(".sortable");
  for (var i = 0; i < sortables.length; i++) {
    var sortable = sortables[i];
    new Sortable(sortable, {
        animation: 150,
        ghostClass: 'blue-background-class'
    });
  }
})


“`

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema con la funcionalidad de arrastrar y soltar no funciona después de que la vista parcial se vuelve a renderizar puede estar relacionado con la forma en que se maneja el token CSRF. Como se indica en el código, la única diferencia fuera de la lista reordenada es el token CSRF.

    Una posible solución es asegurarse de que el token CSRF se incluya en el encabezado de la solicitud cada vez que la vista parcial se vuelva a renderizar, utilizando el evento htmx:configRequest como se muestra en el código. Esto garantizará que el token CSRF no se pierda después de que se vuelva a renderizar la vista parcial y que la funcionalidad de arrastrar y soltar siga funcionando como se espera.

    Otra opción podría ser colocar el script para la funcionalidad de arrastrar y soltar directamente en la vista parcial, para asegurarse de que se vuelva a cargar cada vez que se renderice la vista parcial. Sin embargo, cabe señalar que este enfoque puede no ser óptimo por razones de rendimiento, ya que el script tendría que volver a cargarse cada vez que se solicite la vista parcial.

    En general, es importante considerar cuidadosamente la forma en que se maneja el token CSRF al usar SortableJS y htmx para la funcionalidad de arrastrar y soltar, con el fin de evitar problemas como el descrito anteriormente.

Comments are closed.