I am having a problem in using bootstrap modal-dialog in my Django template. When a user submits the form then the modal-dialog appear only for 2 seconds and redirect to the index.html file.
This is my views.py file
class RequestItem(generic.CreateView):
model = UserNotification
fields = ['Name', 'Mobile_No', 'Proof']
def get_form(self, form_class=None):
if form_class is None:
form_class = self.get_form_class()
form = super().get_form(form_class)
form.fields['Name'].widget = TextInput(attrs={'placeholder': '*Enter your name'})
form.fields['Mobile_No'].widget = TextInput(
attrs={'placeholder': "*Enter your's mobile number to get a call back from angel"})
form.fields['Proof'].widget = TextInput(attrs={'placeholder': '*enter proof you have for your lost item'})
return form
def form_valid(self, form):
print(self.kwargs)
self.object = form.save(commit=False)
qs = Report_item.objects.filter(id=self.kwargs.get("pk"))
self.object.user = qs[0].owner
self.object.save()
query_list = Report_item.objects.filter(publish=True)
return render(self.request,"feed/index.html",{"object_list":query_list})
This is my form with the modal-dialog:
<div class="thumbnail" style="padding-right:5%;">
<div class="thumbnail-center">
<font size="6">
<p>Please fill this form</p>
</font>
</div>
<form class="form-herizontal" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% if form.errors %}
<p>{{ form.errors }}</p>
{% endif %}
{% include 'feed/form_template.html'%}
<br>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7">
{% if user.is_authenticated %}
<button type="submit" class="login-btn btn btn-success" data-toggle="modal" data-target="#myModal">Request to return</button>
{% else %}
<button type="submit" class="login-btn btn btn-success" disabled>Request to return</button>
<p style="color:red;">*Please <a href="{% url 'login' %}">login</a>to request yout item</p>
{% endif %}
</div>
</div>
<br>
</form>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request Done</h4>
</div>
<div class="modal-body">
<p>Your request has been done.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>I want that the user only redirects to index page when clicked the close button of the modal-dialog. Please help me to achieve this.
