Bootstrap Modal - невозможно собрать атрибут из relatedTarget? - PullRequest
Новая
       8

Bootstrap Modal - невозможно собрать атрибут из relatedTarget?

0 голосов
/ 11 июня 2018

У меня есть цикл PHP, который создает серию кнопок с уникальными атрибутами данных.При нажатии этих кнопок они открывают модальное окно, которое собирает значения атрибутов данных на кнопке и использует их для предварительного заполнения формы.Можно увидеть здесь: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

Модальное окно открывается, но не отображает данные, которые я пытаюсь собрать.Я также не могу заставить работать основные функции, такие как alert();, и я потерян.

Я пытался использовать данные jQuery () и соответствующие атрибуты данных, но когда они также не работали, язастрял с помощью attr ().

Может кто-нибудь помочь? 

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
    Add Comment
    </button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
    Add Comment
    </button>

<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body check-comment-body">
                <label for="clientid" class="control-label">Client ID:</label>
                <input type="text" class="form-control" id="clientid" disabled="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success">Save Comment</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
$(function(){

    // This alert doesn't run for some reason. 
    // console.log doesn't work either, but the modal works...
    alert();
    $('#comment-modal').on('show.bs.modal', function(event) {

        var modal = $(this);
        var button = $(event.relatedTarget); // btn that triggered the modal
        var client = button.attr('data-clientcode');
        var checkid = button.attr('data-checkid');
        var checkname = button.attr('data-checkname');

        modal.find('.modal-title').text('Comment submission for ' + client)
        modal.find('.modal-body .check-comment-body').html(checkname);
        modal.find('.modal-body input').val(checkid);
    )}
});
</script>

1 Ответ

0 голосов
/ 11 июня 2018

Кажется, у вас есть ошибка в вашем коде.Попробуйте это: 

$(function(){

    // This alert doesn't run for some reason. 
    // console.log doesn't work either, but the modal works...
    
    $('#comment-modal').on('show.bs.modal', function(event) {

        var modal = $(this);
        var button = $(event.relatedTarget); // btn that triggered the modal
        var client = button.attr('data-clientcode');
        var checkid = button.attr('data-checkid');
        var checkname = button.attr('data-checkname');

        modal.find('.modal-title').text('Comment submission for ' + client)
        modal.find('.modal-body .check-comment-body').html(checkname);
        modal.find('.modal-body input').val(checkid);
    })
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
    Add Comment
    </button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
    Add Comment
    </button>

<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body check-comment-body">
                <label for="clientid" class="control-label">Client ID:</label>
                <input type="text" class="form-control" id="clientid" disabled="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success">Save Comment</button>
            </div>
        </div>
    </div>
</div>
...