i am developing a job portal where users search the jobs, while they searches the results should be shown in bootstrap pop-up modal, my code is working but modal is disappearing after immediately showing results
i tried the code as below
<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">
I don't think you can do it this way - at least not a pleasant way. You need to use JavaScript and preferably Ajax. The bootstrap modal opens with the $(elem).modal('show')
which you need to trigger when the search results are ready. Something along these lines:
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
});
});
Using your way:
<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 ?>
Notable edits: the modal HTML wont even show in the source unless the post was made I've enclosed it in the main if statement - so you can have the in
class on your modal all the time. Additional edits: I've removed the data-target from the search button, so it wont trigger the modal via JS when you click it, and the modal should show up after the reload.
I changed <button type="submit">
to <button type="button">
and added one class Search
in this button. Plus, class termText
is added in term
textfield.
The answer which I have posted is not based on <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>
Put this code at the end of page or in footer.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
JS (Pass term
text in ajax_modal.php page. Retreive it accordingly.)
<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 (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in tag too. Both are related.)
<?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>
For more info, please click Show data based of selected id on modal popup window after click a button php mysql
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.