Показывать динамический контент в модальном событии ONCLICK начальной загрузки

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

Проблема Не отображается модальное всплывающее окно при первом нажатии. Модальное окно появляется при втором клике. Кроме того, после закрытия модального окна и нажатия другой кнопки просмотра в модальном окне отображается ранее выбранный контент.

Есть ли альтернативное решение проблемы?

Нравится моя домашняя страница

<div class="modal-container"></div>


<table width="100%" border="1">

 <?php
 for($i=1;$i<=10;$i++){
 ?> 
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td><a data-toggle="modal" href="#myModal" onclick="showmodal("<?=$i;?>","row_<?=$i;?>")">View</a></td>
  </tr>
 <?php
 }
 ?>
</table>

jquery -->

function showmodal(id,category){
    var url = "remote.php";
    $('.modal-container').load(url,{var1:id,var2:category},function(result){


            $('#myModal').modal({show:true});
    });
}

remote.php

<div id="myModal" class="modal fade">
    <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">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">
                <?php
                echo $_REQUEST['var1'];
                echo $_REQUEST['var2'];
                ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

php ajax twitter-bootstrap bootstrap-modal buttonclick
person Jasir alwafaa    schedule 23.06.2016    source источник
comment
так что вы просто хотите передать информацию о строке таблицы на странице модальному?   -  person Shehary    schedule 23.06.2016
comment
на самом деле, используя этот параметр, я хочу что-то сделать на remote.php и отобразить в модальном   -  person Jasir alwafaa    schedule 23.06.2016
comment
я ссылаюсь на ваш ответ stackoverflow. com/questions/34693863/, но как я могу передать несколько параметров   -  person Jasir alwafaa    schedule 23.06.2016
comment
попробуйте этот ответ для передачи получить переменные из ссылки на bootstrapmodal "> stackoverflow.com/questions/32433765/, в конце проверить передачу информации о странице и в комментариях, есть пример скрипки   -  person Shehary    schedule 23.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Показать модальное окно, а затем загрузить содержимое ajax

<div id="myModal" class="modal fade">
    <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">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">

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

<table width="100%" border="1">
    <?php
    for($i=1;$i<=10;$i++){
    ?> 
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td><a data-toggle="modal" data-target="#myModal" href="#myModal" data-id="<?=$i;?>" data-category="<?=$i;?>">View</a></td>
    </tr>
    <?php
}
?>
</table>

<script type="text/javascript">

$('#myModal').on('show.bs.modal', function (event) {
    var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal
    var id = clickedLink.data('id'); // Extract info from data-id attributes
    var category = clickedLink.data('category'); // Extract info from data-category attributes
    var modal = $(this);
    modal.find('.modal-body').load('remote.php',{var1:id,var2:category});
});
</script>
person Bùi văn Nguyện    schedule 21.01.2017