[英]how to display php search results in bootstrap modal? And Modal is disappearing after displaying results?
我正在开发一个工作门户,用户可以在其中搜索工作,而他们搜索的结果应以引导弹出模式显示,我的代码正在运行,但模式立即显示结果后消失了
我尝试了如下代码
<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>
只需将一个类“添加”到您的模态类中。
<div id="myModal" class="modal fade in" role="dialog">
我认为您无法采用这种方式-至少不是一种令人愉快的方式。 您需要使用JavaScript,最好使用Ajax。 引导模态以$(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甚至不会显示在源代码中,我已经将其包含在main if语句中-因此您可以一直in
模式中使用in
类。 其他修改:我已经从搜索按钮中删除了数据目标,因此当您单击它时,它不会通过JS触发模态,并且模态应该在重新加载后显示。
我将<button type="submit">
更改为<button type="button">
并在此按钮中添加了一个Search
类。 另外,在term
文本termText
中添加了termText
类。
我发布的答案不是基于<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 (在ajax_modal.php页面中传递term
文本。相应地检索。)
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.