title: should django modal have a separate view?
body: <p>I am working on an application that has a page with a table that is a list of users. Each user has a button which pops up a modal that does something. I am trying to create the modal that will get the user information when the button in clicked, additionally, I need in that modal some logic based on the user information and some more data. I am thinking that it makes sense to create a separate view for it but since each view must be on a different url, the concept of the modal does not makes sense (for me), because I want it to be on the same url.</p>
  <ul>
  <li><p>Is it possible to have a modal with a different view that will have a separate logic? Since the modal is included in the template and it is basically just one template, then, can one template have 2 views?</p>
  </li>
  <li><p>What is the best way to implement the modal using django? And how to pass data to it, I need the  data from the row that was selected + some more data from db. I have the data from the context but manipulating that using JQuery for me is a bad idea - because I am using a python session on the backend that communicates with another api, so when user clickes the modal save button, a python request needs to be done, this means I need a view for it.</p>
  </li>
  </ul>
  <p>Here is my try</p>
  <pre><code>Modal
  {% block modal %}
  {% load static %}
  {% load authorization_tags %}
  &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;{{modal_id}}&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-lg-5&quot;&gt;
              &lt;img class=&quot;d-block w-100&quot;
                src=&quot;{% static 'app/assets/images/security-shield1.png' %}&quot;
                alt=&quot;First slide&quot;&gt;
                Use access control to deauthorize user
            &lt;/div&gt;
            &lt;div class=&quot;col-lg-7&quot;&gt;
              &lt;h2 class=&quot;h2-responsive product-name&quot;&gt;
                &lt;strong&gt;{{user.real_name}}&lt;/strong&gt;
              &lt;/h2&gt;
              &lt;h4 class=&quot;h4-responsive&quot;&gt;
                &lt;span class=&quot;green-text&quot;&gt;
                  {{user.username}}
                &lt;/span&gt;
                &lt;/span&gt;
              &lt;/h4&gt;
              &lt;div class=&quot;accordion md-accordion&quot; id=&quot;accordion1&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot;&gt;
                &lt;div class=&quot;card&quot;&gt;
                  &lt;div class=&quot;card-header&quot; role=&quot;tab&quot; id=&quot;heading2&quot;&gt;
                    &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion1&quot; href=&quot;#collapse1&quot; aria-expanded=&quot;true&quot;
                      aria-controls=&quot;collapse1&quot;&gt;
                      &lt;h5 class=&quot;mb-0&quot;&gt;
                        Current Authorizations &lt;i class=&quot;fas fa-angle-down rotate-icon&quot;&gt;&lt;/i&gt;
                      &lt;/h5&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div id=&quot;collapse1&quot; class=&quot;collapse show&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;heading1&quot;
                    data-parent=&quot;#accordion1&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
  
                    {% for right in people_rights|user_active_rights:user.id %}
                      {{right.room}}
                    {% endfor %}
  
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;accordion md-accordion&quot; id=&quot;accordion2&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot;&gt;
                &lt;div class=&quot;card&quot;&gt;
                  &lt;div class=&quot;card-header&quot; role=&quot;tab&quot; id=&quot;heading2&quot;&gt;
                    &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapse2&quot; aria-expanded=&quot;true&quot;
                      aria-controls=&quot;collapse2&quot;&gt;
                      &lt;h5 class=&quot;mb-0&quot;&gt;
                        Available Authorizations &lt;i class=&quot;fas fa-angle-down rotate-icon&quot;&gt;&lt;/i&gt;
                      &lt;/h5&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div id=&quot;collapse2&quot; class=&quot;collapse show&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;heading2&quot;
                    data-parent=&quot;#accordion2&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                
                &lt;div class=&quot;text-center&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-lg&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;button class=&quot;btn btn-lg&quot;&gt;&lt;span&gt;Authorize&lt;/span&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  {% endblock modal %}
  
  a piece of table and the modal included in the same template
  
  {% include 'app/admin/users/user_authorize.html' with modal_id=&quot;authModal&quot; user=row areas=areas rooms=rooms people_rights=people_rights %}
  
  
  {%if row.empno %}
    &lt;td class=&quot;txt-oflo&quot;&gt;{{ row.empno }}&lt;/td&gt;
  {% else %}
    &lt;td class=&quot;txt-oflo&quot;&gt;-&lt;/td&gt;
  {% endif %}
    &lt;td&gt;
  {% with &quot;#&quot;|add:row.id as buttonId %}
    &lt;button id={{buttonId}} class=&quot;btn btn-lg&quot; data-toggle=&quot;modal&quot; data-target=&quot;#authModal&quot;&gt;
        &lt;span&gt;Authorize&lt;/span&gt;
    &lt;/button&gt;
  {% endwith %}
    &lt;/td&gt;
  &lt;/tr&gt;
  
  </code></pre>