jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successful

Question

my use case is:

a) Present a form loaded via ajax in a bootstrap modal, the fancy overlay effect stuff.. . I followed these instructions.

This works fine. (s

Answer 1

Found a working approach (based upon this solution - and enhanced it with handling of invalid forms) and will post it for anybody who also want to use the stunning beautiful bootstrap modals with django. Major issue with the code above was that I did not correctly disabled the default behavior of the submit button and the approach for loading additional js was not a good idea. So I changed my strategy.

On documentReady or ajaxStop event bind the click event of the hyperlinks to the modalConnect function. Note that you only need the ajaxStop function if you have some kind of ajax which updates the content of your table (which I have):

The modalConnect function which loads the form which we want to present in the modal and a formUpdateURLDiv:

the formUpdateURL includes a server generated (see included view below) url to which the loaded form has to make its form submission call. We use this url to "init" the submitItemModalFormBind function:

..and to see what is going on at the server see below the view which handles the logic:

class UpdateTaskModalView(LoginRequiredMixin, View):
template = 'list_management/crud/item/update_via_modal.html'

def get_logic(self, request, task_id, **kwargs):
    task = get_object_or_404(Task.objects, pk=task_id)
    task_form = TaskForm(instance=task)
    context = {
               'model_form': task_form,
               'item': task,
    }
    return context

def post_logic(self, request, task_id, **kwargs):
    task = get_object_or_404(Task.objects, pk=task_id)
    task_form = TaskForm(request.POST, instance=task)
    if task_form.is_valid():
        task = task_form.save(commit=False)
        task.modified_by = request.user
        task.save()
        messages.add_message(request, messages.INFO, 'Item "%s" successfully updated' % (task.name))
        return ('redirect', HttpResponseRedirect(reverse('show_list_after_item_update', kwargs={'list_id':task.list.pk, 'item_id':task.pk})))
    context = {
        'model_form' : task_form,
        'list': task.list,
        'item': task,
    }
    return ('context', context)

def get(self, request, task_id, **kwargs):
    context = self.get_logic(request, task_id, **kwargs)
    return render_to_response(
        self.template,
        context,
        context_instance = RequestContext(request),
    )

def post(self, request, task_id, **kwargs):
    post_logic_return = self.post_logic(request, task_id, **kwargs)
    if post_logic_return[0] == 'redirect':
        return post_logic_return[1]
    if post_logic_return[0] == 'context':
        context = post_logic_return[1]
        return render_to_response(
            self.template,
            context,
            context_instance = RequestContext(request),
        )

..the form template is already included in my question: ajax_form_modal_result_div, you only have to provide also the formUpdateURL. I did it via the template, which seems quite odd now that I write this post. could be easily provided via the view context.

Voila - Django Forms with Bootstrap Modals! Spice up your UI!

I hope this helps somebody to solve a similar problem.