как отображать результаты поиска php в bootstrap modal? И модаль исчезает после отображения результатов?

90
12

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

я попробовал код, как показано ниже

  <form action="" method="post">
<div class="input-group" id="adv-search">
<input type="text" name="term" class="form-control" placeholder="Search for jobs" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="submit" name="submit" value="search" class="btn btn-primary"data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</form>

<div id="myModal" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Job Results</h4>
</div>

<div class="modal-body">
<?php if($_POST['submit']=='search') {
$status='active';
$term = $_POST['term'];
$sql = "SELECT * FROM job WHERE status='$status' AND ( jdesc LIKE '%".$term."%' OR jtitle LIKE '%".$term."%' ) ";
$result = $conn->query($sql);
?>

<table class="table table-responsive table-inverse table-hover table-striped">
<thead>
<tr>
<th>JOB Title</th>
<th>DURATION</th>
<th>BUDGET</th>
<th>KEY SKILLS</th>
<th>JOINING DATE</th>
<th>EXPIRY DATE</th>
<th>EXPERIENCE MINIMUM</th>
<th>EXPERIENCE MAXIMUM</th>
</tr>
</thead>

<tbody>
<?php while ($row = $result->fetch_array()) { ?>
<tr>
<td><p><a href="/showjob?jid=<?php echo $row['jid']; ?>"><?php echo $row['jtitle']; ?></a></p></td>
<td><p><?php echo $row['duration']; ?></p></td>
<td><p><?php echo $row['budget']; ?></p></td>
<td><p><?php echo $row['keyskills']; ?></p></td>
<td><p><?php $jdate=strtotime( $row['jdate']); echo date('d/M/Y',$jdate); ?></p></td>
<td><p><?php echo $row['edate']; ?></p></td>
<td><p><?php echo $row['cdexmin']; ?></p></td>
<td><p><?php echo $row['cdexmax']; ?></p></td>
</tr>
<?php } //Endif while
} //Endif _POST ?>
</tbody>
</table>
</div>

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

спросил(а) 2021-01-25T16:37:27+03:00 4 месяца, 4 недели назад
1
Решение
108

Я изменил <button type="submit"> на <button type="button"> и добавил один класс Search в этой кнопке. Кроме того, termText добавляется в текстовое поле term.

Ответ, который я опубликовал, не основан на <form></form>.

<div class="input-group" id="adv-search">
<input type="text" name="term" class="form-control termText" placeholder="Search for jobs" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" name="submit" value="search" class="btn btn-primary Search" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>

Поместите этот код в конец страницы или в нижний колонтитул.

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>

JS (Pass term текст ajax_modal.php стр. Извлечь его соответствующим образом.)

<script>
$('.Search').click(function(){
var termText = $('.termText').val();
$.ajax({url:"ajax_modal.php?termText="+termText,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>

ajax_modal.php (Создайте одну страницу в том же каталоге ajax_modal.php. Если вы хотите изменить это название страницы, также измените тег. Оба связаны друг с другом.)

<?php 
if(!empty($_GET['termText']))
{
$status='active';
$term = $_GET['term'];
$sql = "SELECT * FROM job WHERE status='$status' AND ( jdesc LIKE '%".$term."%' OR jtitle LIKE '%".$term."%' ) ";
$result = $conn->query($sql);
}?>

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Job Results</h4>
</div>
<div class="modal-body">
<table class="table table-responsive table-inverse table-hover table-striped">
<thead>
<tr>
<th>JOB Title</th>
<th>DURATION</th>
<th>BUDGET</th>
<th>KEY SKILLS</th>
<th>JOINING DATE</th>
<th>EXPIRY DATE</th>
<th>EXPERIENCE MINIMUM</th>
<th>EXPERIENCE MAXIMUM</th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_array())
{?>
<tr>
<td><p><a href="/showjob?jid=<?php echo $row['jid']; ?>"><?php echo $row['jtitle']; ?></a></p></td>
<td><p><?php echo $row['duration']; ?></p></td>
<td><p><?php echo $row['budget']; ?></p></td>
<td><p><?php echo $row['keyskills']; ?></p></td>
<td><p><?php $jdate=strtotime( $row['jdate']); echo date('d/M/Y',$jdate); ?></p></td>
<td><p><?php echo $row['edate']; ?></p></td>
<td><p><?php echo $row['cdexmin']; ?></p></td>
<td><p><?php echo $row['cdexmax']; ?></p></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Для получения дополнительной информации нажмите Показать данные на основе выбранного идентификатора в модальном всплывающем окне после нажатия кнопки php mysql

ответил(а) 2021-01-25T16:37:27+03:00 4 месяца, 4 недели назад
44

Я не думаю, что вы можете сделать это так, по крайней мере, не очень приятно. Вам нужно использовать JavaScript и желательно Ajax. $(elem).modal('show') открывается с помощью $(elem).modal('show') который вам нужно вызвать, когда результаты поиска будут готовы. Что-то в этом роде:

var submitButton, searchField, myModal; //you need to define these

$(submitButton).on('click', function (e) {
$.post('url/to/php/file', $(searchField).val())
.done(function(response) {
//assuming your php file returns plain html
$('.modal-body').html( response );
$(myModal).modal('show');
})
.fail(function (error) {
//do something on error too
});
});

По пути:

<form action="" method="post">
<div class="input-group" id="adv-search">
<input type="text" name="term" class="form-control" placeholder="Search for jobs" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="submit" name="submit" value="search" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</form>

<?php if($_POST['submit']=='search') {
$status = 'active';
$term = $_POST['term'];
$sql = "SELECT * FROM job WHERE status='$status' AND ( jdesc LIKE '%".$term."%' OR jtitle LIKE '%".$term."%' ) ";
$result = $conn->query($sql);
?>

<div id="myModal" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Job Results</h4>
</div>

<div class="modal-body">
<table class="table table-responsive table-inverse table-hover table-striped">
<thead>
<tr>
<th> JOB Title</th>
<th>DURATION</th>
<th>BUDGET</th>
<th>KEY SKILLS</th>
<th>JOINING DATE</th>
<th>EXPIRY DATE</th>
<th>EXPERIENCE MINIMUM</th>
<th>EXPERIENCE MAXIMUM</th>
</tr>
</thead>

<tbody>
<?php while ($row = $result->fetch_array()) { ?>
<tr>
<td><p><a href="/showjob?jid=<?php echo $row['jid']; ?>"><?php echo $row['jtitle']; ?></a></p></td>
<td><p><?php echo $row['duration']; ?></p></td>
<td><p><?php echo $row['budget']; ?></p></td>
<td><p><?php echo $row['keyskills']; ?></p></td>
<td><p><?php $jdate=strtotime( $row['jdate']); echo date('d/M/Y',$jdate); ?></p></td>
<td><p><?php echo $row['edate']; ?></p></td>
<td><p><?php echo $row['cdexmin']; ?></p></td>
<td><p><?php echo $row['cdexmax']; ?></p></td>
</tr>
<?php } //End of while ?>
</tbody>
</table>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } //End of IF POST ?>

Заметные редактирование: модальный HTML обыкновения даже показать в источнике, если пост не был сделан, я заключил это в основном, если выражение - так что вы можете иметь in классе на вашем модальное все время. Дополнительные изменения: я удалил объект данных из кнопки поиска, поэтому он не будет запускать модальный через JS, когда вы нажимаете на него, а модальный должен появиться после перезагрузки.

ответил(а) 2021-01-25T16:37:27+03:00 4 месяца, 4 недели назад
45

Просто добавьте класс "в" в ваш модальный класс.


<div id="myModal" class="modal fade in" role="dialog">

ответил(а) 2021-01-25T16:37:27+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема