I am using Django and pretty new to it. My purpose is to trigger an asynchronous view from the template and stay in the same page showing a pop up that the process is triggered. I searched a lot for a solution but couldn't work it out.
I am able to stay in the same page and trigger the view asynchronously using Celery but my problem is my modal is displaying the content of my web page and not the content I have mentioned in the modal content.
I am passing the view in the anchor tag href and modal in data-target.
Below is the code of my template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DashBoard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DashBoard</a>
</div>
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="#" aria-hidden="true"></span> Reports
</a>
</li>
<li class="">
<a href="#">
<span class="#" aria-hidden="true"></span> Projects
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="">
<li class="">
<a data-toggle="modal" href="{% url 'update-field' %}" data-target="#myModal">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update-Fields
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Field Param Update</h4>
</div>
<div class="modal-body">
<p>Update is triggered in the backend. An email will be sent when done.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
<li class="">
<a href="#">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Here "update-field" is the view which is been called to trigger the background process. Any help will be grateful. Thanks in advance.
EDIT: I am getting the below in my modal which is same as my webpage.
For the closure of the above issue did the following changes:
in the template, moved the modal code to separate html template:
<li class="">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<a data-toggle="modal" href="{% url 'update-field' %}" data-target="#myModal">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update-Fields
</a>
</li>
<!-- modal.html -->
<!-- Modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{ title }}</h4>
</div>
<div class="modal-body">
<p>{{ body }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script>
$('#myModal').on('hidden.bs.modal', function () {
location.reload();}); // reloads the current page
</script>
# views.py
class UpdateFields(UpdateView):
def get(self, request):
updateparams.delay()
context = {
'title': 'Initiating task...',
'body': 'Field parameters update has started. An email will be sent when its complete.'
}
return render(request, 'app/modal.html', context)
# urls.py
url(r'^update/', views.UpdateFields.as_view(), name='update-field')