Search code examples
djangotwitter-bootstrapdouble-submit-problem

double-submit issue in browsers - Bootstrap + Django


I have Bootstrap modal window for updating data everytime I close it, I face the so-called double-submission problem. That is, if I press F5, a message pops up telling me that I'm going to submit the same data for the second time and it inserts records into my table if I press ok. Moreover, if I try to open the modal window for the second time, it is rendered incorrectly ! Does it have anything to do with Django somehow ?

The modal window:

<form class="modal fade" id="openTaskWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" method="post">{% csrf_token %}
  <div class="modal-dialog modal-lg form-horizontal" role="form">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Новая задача</h4>
      </div>
      <div class="modal-body" style="font-size: smaller">
        {{ createTask_form.as_p}}   
      </div>
      <div class="modal-footer">    
        <input class="btn btn-default btn-sm" type="submit" value="Сохранить"/>
      </div>
    </div>
  </div>
</form>

The button that calls the window:

<div><button type="button" data-toggle="modal" data-target="#openTaskWindow" data-backdrop="static" data-keyboard="false">Launch my modal</button></div>

The view (that is called when submit button of the modal window is pressed):

def createTask(request):
    taskTable = Tasks.objects.all()

    if request.method == 'POST':
        task_form = TaskForm(request.POST)

        if task_form.is_valid():
            temp_form = task_form.save(commit=False)
            temp_form.is_important = 0 
            temp_form.save()
            return render_to_response('task_management/task_list.html',{'createTask_form':temp_form, 'taskTable': taskTable},context_instance=RequestContext(request))
    else:
        task_form = TaskForm()
    return render_to_response('task_management/task_list.html',{'createTask_form':task_form, 'taskTable': taskTable, 'task_id':''},context_instance=RequestContext(request))

After reading discussions of the community, I tried to do this:

$('#openTaskWindow').submit(function() {
        location.href = location.href;
    });

but it did not help. Any ideas?


Solution

  • Well, this has not much to do with Django. The browser cache the post request for re-submission. The easiest way to prevent this is to return HttpResponseRedirect when for is valid.

    So instead

    if task_form.is_valid():
        temp_form = task_form.save(commit=False)
        temp_form.is_important = 0 
        temp_form.save()
        return render_to_response('task_management/task_list.html',{'createTask_form':temp_form, 'taskTable': taskTable},context_instance=RequestContext(request))
    

    Try to do

    if task_form.is_valid():
        temp_form = task_form.save(commit=False)
        temp_form.is_important = 0 
        temp_form.save()
        return HttpResponseRedirect('your_url')
    

    And if you need to pass some extra arguments to the view you can accomplish that through query string or session based cache. And you don't need your Javascript hack.