CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-modal
cphill
cphill

Reputation: 5914

Bootstrap Multiple Modals Trigger right one

I have a page in my application where there is a bootstrap modal associated with each record that appears. With the current setup I am able to trigger the modal, but it is only triggering the first modal on the page and not the correctly associated modal. I tried some answers on StackOverflow that dealt with multiple modals on a single page, but they didn't work for me.

Here is the link triggering the modal:

<td>
    <a href="#" data-toggle="modal" data-target="#comment-modal" data-actual="{{this.documentRequestIdHash}}" id="record-comment-link">
        {{this.document_request_comments.length}} 
        <span class="fas fa-comment text-primary mr-2"></span>
    </a>
</td>

I was thinking I can use the dynamically passed value of data-actual to identify the unique modals and associated content.

Here is the modal:

<!-- Comment Modal -->
<div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

Here was the jQuery I attempted, but hit an error Uncaught TypeError: $(...).modal is not a function:

$('#record-comment-link').on('click', function(){
    var commentModal = $(this).attr('data-actual');
    $(commentModal).modal("show");
  })

Upvotes: 0

Views: 48

Answers (1)

Tim
Tim

Reputation: 86

The line: var commentModal = $(this).attr('data-actual'); gives commentModel the value of {{this.documentRequestIdHash}}. Let's say the value is "modelComment1". Then the line:$(commentModal).modal("show"); Looks for any object with the tag "modelComment1", which it will not find. To fix it change the modal html to 

<div class="modal fade" id="{{this.documentRequestIdHash}}" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

And the modal show code to 

$("#" + commentModal).modal("show");

That should do the trick

Upvotes: 1

Related Questions