CODEWITHSUNDEEP
django
Yunti
Yunti

Reputation: 7468

django how to implement a dynamic (bootstrap) modal

I'm trying to change the interaction of a page so that additional info about a product appears in a modal rather than an element that is shown/hidden when a button is clicked.

The bit I'm not sure about is making the modal adapt it's contents to each product. (I'm not sure if django must prepare 3 different modals first of all at the backend - if this is possible or whether there is a simpler way?)

Previously I had the template:

<div class="item price-2 col-md-4 col-12 text-center best-buy">
    <div class="item-inner">
      <div class="heading">
        <h3 class="title"><b>Cheapest</b></h3>
      </div>
    {% include 'components/quote_summary_item.html' with quote=first_quote %}
    </div><!--//item-inner-->
</div><!--//item-->

{% include 'components/quote_detail.html' with quote=first_quote %}

Where quote_summary_item.html is:

<div>
  <div class="quotes-summary"><img src="{{ quote.ImageUrl }}" alt=""></div>
  <p></p>
  <p >.........
  </p>
  <a class="btn btn-quote-primary" href="{% url 'users:profile %}">Select</a></div>
<div class="content">
  <p><b>Your Quote Details</b></p>
  <p>{{ quote.Name }}<br/>
    {{ quote.Type }}  <br/>
    .....
  </p>
  <button class="btn btn-cta-secondary" data-id="{{ quote.priceId }}">Info</button>
</div><!--//content-->

and quote_detail is:

<div class="quote" id="quote{{ quote.priceId }}" style="display:none">
<div >
    <p><b>About this quote:</b></p>
  {{ quote.synopsisText|safe }}
  </div>
  <div class="row">
    <div class="col">
      <table class="table">
        <thead class="til-table-head">

        <tr>
          <th>Information</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td></td>
          <td>{{ quote.Something }}</td>
        </tr>

        <tr>
          <td>Name</td>
          <td>{{ quote.Name }}</td>
        </tr>
        <tr>
          <td></td>
          <td>{{ quote.payType }}</td>
        </tr>
       .......
        </tbody>
      </table>
    </div>
  </div>
    </div>

And the .js used was:

 <script type="text/javascript">
    $(document).ready(function () {
      $('.btn-cta-secondary').click(function (e) {
        var id = $(e.currentTarget).data('id')
        $('.quote').hide()
        $('#quote' + id).show()
      })
    })
  </script>

I've set up a modal template wrapper around quotes_detail.html however I'm not sure how to change the .js needed to pass in the relevant quote data to something like: {% include 'components/quotes_modal.html' with quote=my_quote %}

and pass in the relevant quote based on the button id clicked.

Upvotes: 2

Views: 9934

Answers (1)

Yunti
Yunti

Reputation: 7468

There are two decent ways to do this. Implement multiple modals if there aren't too many of them or use ajax to retrieve the contents if there are lots of them.

There is no need to have a .js file as all the required js is built into bootstrap.

Control each modal with eg a button:

<button type="button" class="btn btn-cta-secondary" data-toggle="modal" data-target="#{{ quote.priceId }}" data-id="{{ quote.priceId }}">More Info</button>

Then include the modal template in the relevant page:

{% include 'components/quote_detail.html' with quote=second_quote %}
{% include 'components/quote_detail.html' with quote=first_quote %}

with components/quote_details.html

<div class="modal fade" id="{{ quote.priceId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
 .....

with the rest as per bootstrap docs.

To do this via ajax have a look at https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/

Upvotes: 4

Related Questions