в списке уведомлений Я использовал sql-запрос для отображения имени домена, но я хочу, чтобы каждое имя домена, когда я нажимаю на это, откроет всплывающее окно с подробной информацией.
это заголовок file---
<!-- notification start -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Notification <b class="caret"></b></a>
<ul class="dropdown-menu short-dropdown-menu">
<li class=""> <a href="<?=Url::to(['domains/index']);?>">
<?php
$domains=Domains::find()
->Where('expirydate BETWEEN NOW() AND DATE_ADD(NOW(), INTERVAL 1 MONTH)')
->andWhere(['or',
['status'=> 'Active'],
['status'=> 'Pending Transfer']
])
->orderBy(['expirydate' => SORT_ASC])
->all();
$domainList=ArrayHelper::map($domains,'id','domainname');
foreach($domainList as $key => $value)
{
print '<br>'. $value .'<br>';
}
?>
</a></li>
</ul>
</li>
<!-- notification ends -->
теперь результат открыт, как ---
при нажатии на это доменное имя он должен отображать всплывающее окно с данными, как показано ниже image-----
ВОПРОС ОБНОВЛЕНИЯ:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Notification <b class="caret"></b></a>
<ul class="dropdown-menu short-dropdown-menu">
<li class="">
<a href="#modal-domaindetails" data-toggle="modal" onclick="getDomainDetails('2696')">
<?php
$domains=Domains::find()
->Where('expirydate BETWEEN NOW() AND DATE_ADD(NOW(), INTERVAL 1 MONTH)')
->andWhere([
'or',
['status'=> 'Active'],
['status'=> 'Pending Transfer']
])
->orderBy(['expirydate' => SORT_ASC])
->all();
$domainList=ArrayHelper::map($domains,'did','domainname');
foreach($domainList as $key => $value) {
print '<br>'. $value .'<br>';
}
?>
</a>
</li>
</ul>
</a>
</li>
см. это сейчас я прохожу id 2696, но я хочу взять id в соответствии с именем домена, как это возможно
На мой взгляд, я имею некоторое представление об этом.
Если вы хотите открыть новый всплывающий режим, вам необходимо создать модальное всплывающее окно, например https://getbootstrap.com/docs/4.1/components/modal/.
Вы перенаправляете URL-адрес в доменное имя как ">, он будет перенаправлен на эту ссылку. Вы не можете всплывать здесь, за исключением того, что вы хотите открыть новую вкладку или новое окно в хроме. (С открытой новой вкладкой или новым окном вы можете искать его в Google)
В тегах "li" и "a"
<li class=""> <a href="your_url">... your code php foreach($domainList as $key => $value) { print '<br>'. $value.'<br>'; } </a> </li>
вы ставите итератор, он будет раздирать список, но они имеют одинаковую перенаправление на URL-адрес
ОБНОВИТЬ МОЙ ОТВЕТ
Возможно, я надеюсь, что это поможет вам.
HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Notification <b class="caret"></b></a>
<ul class="dropdown-menu short-dropdown-menu">
<li class="">
<?php
$domains=Domains::find()
->Where('expirydate BETWEEN NOW() AND DATE_ADD(NOW(), INTERVAL 1 MONTH)')
->andWhere([
'or',
['status'=> 'Active'],
['status'=> 'Pending Transfer']
])
->orderBy(['expirydate' => SORT_ASC])
->all();
$domainList=ArrayHelper::map($domains,'did','domainname');
foreach($domainList as $key => $value) {
?>
<a href="javascript:;" onclick="getDomainDetails('<?= $key ?>')"><?= $value ?></a>
<?php
}
?>
</li>
</ul>
</a>
</li>
Добавлено Модальное всплывающее окно
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JAVASCRIPT
<script>
function getDomainDetails(domain_id) {
$.ajax({
url: 'domains/index',
method: 'GET', // or 'POST'
data: { domain_id : domain_id }
})
.done(function(response) {
$('#exampleModal').find('.modal-body').html(response); // append reponse html from server
$('#exampleModal').modal('show'); // show modal
});
}
</script>
Использование bootstrap modal
Когда нажмите ссылку, откройте modal
Запрос на получение данных сервера
Использование jquery для визуализации данных снова