Bootstrap Несколько модальных триггеров правой - PullRequest
Новая
       8

Bootstrap Несколько модальных триггеров правой

0 голосов
/ 05 мая 2019

У меня есть страница в моем приложении, где есть модал начальной загрузки, связанный с каждой появляющейся записью.При текущей настройке я могу запустить модальный режим, но он запускает только первый модальный режим на странице, а не правильно связанный модальный.Я попробовал некоторые ответы на StackOverflow, которые касались нескольких модалов на одной странице, но у меня они не сработали.

Вот ссылка, запускающая модал: 

<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>

Я былдумая, что я могу использовать динамически переданное значение data-actual, чтобы идентифицировать уникальные модалы и связанный контент.

Вот модал: 

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

Здесь был jQuery, который я пытался, но нажалошибка Uncaught TypeError: $(...).modal is not a function: 

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

1 Ответ

1 голос
/ 06 мая 2019

Строка: var commentModal = $(this).attr('data-actual'); дает commentModel значение {{this.documentRequestIdHash}}.Допустим, значение равно "modelComment1".Затем строка: $(commentModal).modal("show"); Ищет любой объект с тегом "modelComment1", который он не найдет.Чтобы исправить это, измените модальный html на 

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

И код модального показа на 

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

Это должно сработать

...