how to make javascript works after php database query?

Question

I am using bootstrap framework, javascript(jquery) and php for my website. So basic I want to press a button, by pressing it, we query database and return result, the results will be displayed in the bootstrap javascript powered modal: because popup modal is written in javascript and its run after php, the $row is always shown as undefined. I am wondering if there is a way to make php runs before js?

<form action="" method="post">
<input type="text" id="field" name="field">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" name="submit" id="submit">
Launch demo modal
</button>
</form>
<?php
if(isset($_POST['submit'])){
    $link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " .     mysqli_error($link)); 

   //consultation: 

   $query = "SELECT name FROM mytable" or die("Error in the consult.." . mysqli_error($link)); 

   //execute the query. 

   $result = mysqli_query($link, $query); 

   //display information: 

   if ($row = mysqli_fetch_array($result)) { 



   ?>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
     <div class="modal-body">
    <?php echo $row["name"] . "<br>"; ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

 <?php
 }
 }
 ?>

Yuan, Your question way too broad for this forum and you should expect some negitive feedback to this question. I think you need to understand a bit more about Client and Server(service) architecture. Specifically look into using Ajax... Look at these 2 links to get started. Ajax w3 schools — cs45977
– cs45977, Commented Oct 24, 2014 at 17:05

Oleg Belousov · Accepted Answer · 2014-10-24 17:10:43Z

You are better off separating this request for data to an AJAX request, and then open the modal in the AJAX success callback.

example:

ajax_handler.php:

if(isset($_POST['submit'])){
    $link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " .     mysqli_error($link)); 

   //consultation: 

 $query = "SELECT name FROM mytable";

   //execute the query. 

 $result = mysqli_query($link, $query); 

 $rows = mysqli_fetch_array($result);
 //always wrap a response in an 'object' (associative array)
 //more infor here: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/
 echo json_encode(array('result' => $rows));
}

js code:

$("#submit").on('click', function(){
    $.post('ajax_handler.php', {submit: true}, function(data){
         var data = JSON.parse(data), markup = '';
         for(var i = 0; i < data.result.length; i++){
              markup = markup + '<div>' + data.result[i] + '</div>';
         }
         $('myModal').modal('open');
         $('.modal-body').append(markup)

    });
});

markup:

<button class="btn btn-primary btn-lg" id="submit">

Collectives™ on Stack Overflow

how to make javascript works after php database query?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related