如何在bootstrap模式中显示php搜索结果？显示结果后，Modal正在消失？

时间：2016-05-09 09:23:00

标签： php mysql twitter-bootstrap

我正在开发一个用户搜索作业的工作门户，而他们搜索的结果应该显示在bootstrap弹出模式中，我的代码正常工作但模态在立即显示结果后消失

我尝试了以下代码

  <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>

3 个答案:

答案 0 :(得分：0)

只需在你的模态类中添加一个“in”类。

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

答案 1 :(得分：0)

我认为你不能这样做 - 至少不是一种愉快的方式。 您需要使用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甚至不会在源代码中显示 我已将其包含在主if语句中 - 因此您可以始终在模态上使用in类。 其他修改： 我已从搜索按钮中删除了数据目标，因此当您单击它时它不会通过JS触发模态，并且模式应该在重新加载后显示。

答案 2 :(得分：0)

我将<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 （在 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>

有关详情，请点击Show data based of selected id on modal popup window after click a button php mysql

相关问题
最新问题