how to display php search results in bootstrap modal? And Modal is disappearing after displaying results?

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>

my code is working fine but the modal is immediately closing after displayed results — Gowrisankar Veluturla, May 09 '16 at 11:50

score 0 · Answer 1 · answered May 09 '16 at 09:33

0

Simply add a class "in" to your modal class.

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

answered May 09 '16 at 09:33

Indrasis Datta

8,692
2
14
32

zedling · Answer 2 · 2016-05-10T11:39:55.160

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.

my code is working fine but modal is closing immediately after displaying results — Gowrisankar Veluturla, May 09 '16 at 11:57
your modal is closing, because after you submit the search the page is reloading - but before that the JavaScript may open the modal; and even though the modal body is populated with data, it lacks the necessary classes to display. As @http://stackoverflow.com/users/5113881/object-manipulator suggested, you should add the `in` class to your modal, if there are search results. Anyway consider the Ajax methods suggested by others and myself, because if you are reloading the page after searching the modal kinda looses its purpose. — zedling, May 09 '16 at 13:11
what u have said is right the page is reloading after displayed results — Gowrisankar Veluturla, May 09 '16 at 13:23
you mustn't add the `in` class by default. You should only add it, when someone have searched for something; this way your modal would be always visible. — zedling, May 09 '16 at 13:23
@GowrisankarVeluturla I've edited my answer specific to your code, please try it — zedling, May 09 '16 at 14:49
I've corrected a mistake in my answer, this should work now; if it doesn't, then you may have a different problem; or something else is interfering with the modal — zedling, May 10 '16 at 07:40

score 0 · Answer 3 · edited May 23 '17 at 10:28

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

how to display php search results in bootstrap modal? And Modal is disappearing after displaying results?

3 Answers3