CODEWITHSUNDEEP
pythondjangohtmx
Vincent
Vincent

Reputation: 188

Django CBV ModelForm hx-post not working with HTMX

I have a partial form rendered with HTMX rendered in my page upload.html:

{% extends 'base.html' %}
<p>Veuillez choisir ci-dessous entre l'upload d'un fichier de commandes ou l'upload d'un fichier fournisseur :</p>
<h2>Upload fichier <u>transporteur</u></h2>

    <button hx-get="{% url 'tool:upload-form' %}" hx-swap="afterend" hxtarget="#transporterforms">Add transporter</button>
    <div class="transporterforms">


    </div>

{% block content %}

And my upload-form.html:

<div hx-target="this" hx-swap="outerHTML">
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form }}
        <button type="submit" hx-post=".">Submit</button>
    </form>
</form>
</div>

Here is how I manage my form in views.py:

class TransporterFileFormPartialView(FormView):
    form_class = TransporterFileForm
    template_name = 'tool/upload-form.html'
    success_url = '.'


    def form_valid(self, form):
        transporter_file = TransporterFile.objects.create(
            file=form.cleaned_data['file'],
            transporter=form.cleaned_data['transporter']
        )
        transporter_file_pk = transporter_file.pk

        return super().form_valid(form)


class CompareFormView(CustomLoginRequiredMixin, RequestFormMixin, TemplateView):
    """ View to show results of comparison between two files. """

    template_name = 'tool/upload.html'
    # success_url = '.'


    def post(self, *args, **kwargs):

        form = TransporterFileForm(self.request.POST)

        if form.is_valid():
            obj = form.save(commit=False)
            # transporter_file = get_object_or_404(TransporterFile, pk=form.pk)
            obj.save()
            transporter_file = TransporterFile.objects.get(pk=obj.pk)
            transporter_file_pk = transporter_file.pk

            return redirect(reverse_lazy('tool:upload'))

And in my forms.py:

class TransporterFileForm(forms.ModelForm):
    class Meta:
        model = TransporterFile
        fields = ('file', 'transporter')

My urls.py are as follows:

urlpatterns = [
    path('', TemplateView.as_view(template_name="tool/home.html"), name="home"),
    path('upload-form/', TransporterFileFormPartialView.as_view(), name="upload-form"),
    path('upload-detail/<int:pk>', TransporterFileFormDetailView.as_view(), name="upload-detail"),
    path('upload-detail/<int:pk>/delete/', TransporterFileFormDeleteView.as_view(), name="upload-delete"),
    path('report/add-report', UserAddReportView.as_view(), name='add-report'),
    path('report/add-report/2', CompareFormView.as_view(), name='upload'),
    path('reports/', UserReportsView.as_view(), name='reports'),
]

My main issue is with upload-form.html. When I try

<button type="submit" hx-post=".">Submit</button>

It is not working. I have the following message:

[19/May/2022 15:00:05] "GET /upload-form/ HTTP/1.1" 200 896
Not Found: /report/add-report/

But when I try without hx-post, it is working

<button type="submit">Submit</button>

I cannot figure out why?

Upvotes: 1

Views: 1104

Answers (1)

Dauros
Dauros

Reputation: 10502

As the error message indicates, the /report/add-report/ path with a trailing slash does not exist, because you have defined it without trailing slash: path('report/add-report', UserAddReportView.as_view(), name='add-report'),. So you can just add the missing slash, or use the url function in the template to obtain the correct path of the endpoint:

<button type="submit" hx-post="{% url 'tool:add-report' %}">Submit</button>

Upvotes: 2

Related Questions