CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapdom
vogliamoci
vogliamoci

Reputation: 13

Performance and Optimization - Too many bootstrap modals

I am building a table based on data returned from my API. For each row in the table I would like to create a bootstrap modal with additional info in it.

This is how I do it right now. I created a designated div and I put all the modals inside it. Please note that in addition the modal's HTML is pretty big by itself:

let modal = `<div id="modal-${i}">big HTML here</div>`;
$("#modalsCollector").append(modal);

And this is how my table row looks like:

<tr data-toggle="modal" data-target="#modal-${i}">

Because I sometimes have 500+ table rows there is eventually a huge div (#modalsCollector) full of same (by structure) modals. I feel that it affects page performance.

Is there a better, more elegant and performance optimized way to bind modals to table rows? Or in general, working with many hidden elements instead of pushing them into the DOM that way?

Upvotes: 1

Views: 1212

Answers (2)

brpetrov
brpetrov

Reputation: 138

Bootstrap has a neat way of changing the components of the same modal. This is as long as you need the same modal just different content inside.

https://getbootstrap.com/docs/4.5/components/modal/#varying-modal-content

Here is an example:

HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fta">Open modal for @fat</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

and jQuery:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // Update the modal's content. 
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Upvotes: 0

Dejvid
Dejvid

Reputation: 470

You can include only one "null" modal in your <body>, like this:

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Then when you have to show the modal generate it using jQuery like this:

    $("#button").click(function(e){
        $("#myModal .modal-header").append(HTML for modal header here);
        $("#myModal .modal-body").html(big HTML for modal body here);
        $("#myModal").modal("show");
    });

So, basically you change the modal header and the modal body of the same modal each time, with the needed information accordingly, without the need of like thousands of modals.

Upvotes: 1

Related Questions