如何以自舉模式顯示php搜索結果？ 結果顯示后，模態消失了嗎？

Question

我正在開發一個工作門戶，用戶可以在其中搜索工作，而他們搜索的結果應以引導彈出模式顯示，我的代碼正在運行，但模式立即顯示結果后消失了

我嘗試了如下代碼

  <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

我認為您無法采用這種方式-至少不是一種令人愉快的方式。 您需要使用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">&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 ?>

值得注意的編輯：除非發布了這篇文章，否則模式HTML甚至不會顯示在源代碼中，我已經將其包含在main if語句中-因此您可以一直in模式中使用in類。 其他修改：我已經從搜索按鈕中刪除了數據目標，因此當您單擊它時，它不會通過JS觸發模態，並且模態應該在重新加載后顯示。

Answer 3

我將<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">&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>

有關更多信息，請在單擊按鈕php mysql之后單擊在模式彈出窗口上顯示基於選定ID的數據。