如何以自举模式显示php搜索结果？ 结果显示后，模态消失了吗？

Question

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">&times;</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>

Answer 1

只需将一个类“添加”到您的模态类中。

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

Answer 2

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">&times;</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.

Answer 3

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">&times;</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