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

Question

Показывать динамический контент в модальности начальной загрузки 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>

3

ajax bootstrap-modal buttonclick php twitter-bootstrap

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Показать модальный, а затем загрузить содержимое 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>

0