Use bootstrap modal in django class based views, (create, update, search, etc)
<p>Bootstrap modal implementation on standalone page is quite easy, and can be triggered using a button or <code>&lt;a&gt;</code> tag, but let's assume that I have the below classes</p>

<ol>
<li><code>class CustomerMixin(object)</code></li>
<li><code>class CustomerFormMixin(CustomerMixin, CreateView)</code></li>
<li><code>CustomerListView(CustomerMixin, ListView)</code> </li>
<li><code>CustomerCreateView(CustomerMixin, CreateView)</code></li>
<li><code>CustomerUpdateView(CustomerFormMixin, UpdateView)</code></li>
</ol>

<p>URL:</p>

<pre><code>urlpatterns = [
url(r'^$', CustomerListView.as_view(), name='index'),
url(r'^create$', CustomerCreateView.as_view(), name='create'),
url(r'^detail/(?P&lt;pk&gt;[0-9]+)$', CustomerDetailView.as_view(), name='detail'),
url(r'^delete/(?P&lt;pk&gt;[0-9]+)$', CustomerDeleteView.as_view(), name='delete'),
url(r'edit/(?P&lt;pk&gt;[0-9]+)$', CustomerUpdateView.as_view(), name='edit'),
</code></pre>

<p>]</p>

<p>In the index page I have 3 link each referring to its own Class</p>

<pre><code>&lt;a href="{% url 'myapp:create' %}"&gt;Create&lt;/a&gt;
</code></pre>

<p>and in the list on Index page for each row in the table I have 2 links for Edit and Delete for that row.</p>

<p>So now I want to have bootstrap modal for both Create and Update
once user clicks on Create a tag on the Index page so I can trigger modal and at the same time trigger Create class.</p>

<p>I have checked the below blogs but no luck:</p>

<ul>
<li><a href="https://libraries.io/pypi/django-fm" rel="nofollow">https://libraries.io/pypi/django-fm</a> (This one looks good, but I couldn't implement it)</li>
<li><a href="https://dmorgan.info/posts/django-views-bootstrap-modals/" rel="nofollow">https://dmorgan.info/posts/django-views-bootstrap-modals/</a></li>
</ul>

<p>So, to clarify: </p>

<p>You have a page to manage a list of items (create, edit and remove).
You want a modal to be able to show the forms for creating, editing these objects. </p>

<p>You already have the pages set up for these two actions you wish to perform that you have setup as Class Based Views (CustomerCreateView, CustomerUpdateView).</p>

<p>What you need to do is trigger an AJAX call to these views via 'GET' request when the modal is opened. Then, return the template of these views as HTML and populate your modal with this content.</p>

<p>E.g. for the CreateView:</p>

<pre><code>$.ajax({
  url: {% url 'create' %},
  dataType: "html",
  method: "GET",
  success: function(data){
      $("#createModal").html(data);
  }
});
</code></pre>

<p>Similarly, you can do this for UpdateView but ofcourse you must pass the id of the object as a parameter in the Ajax.</p>

<p>Hope this helps!</p>

python django bootstrap-modal