John Davidson

Message:

I use a button to fill a div with data that i get from an another php file.

I use the div display with "col-md-12".

When I call my php file, to fill the div, if there is no reservation, it will correctly displayed using the " 12 " wide.

When there is a reservation, I use 4 div of " 3 " each, but they dont display themself side by side to fill the " 12 " length. ( Sorry if it's not thath clear ^^').

Here my html code :

<div class="send-message">

  <div class="container">

    <div class="row">

      <div class="col-md-12">

        <div class="section-heading">

          <h2 style="text-align: center;">Réservations</h2>

        </div>

      </div>

          <div class="col-sm-2"style="text-align: center;"></div>

          <div class="col-sm-8"style="text-align: center;"> 

            <ul class="nav nav-pills nav-fill " style="text-align: center;">

              <li class="nav-item active black">

                <button id="btnResPas">Réservations passées</button></li>

              <li class="nav-item "><button id="btnResAct">Réservations actives</button></li>

            </ul>

          </div>

          <div class="col-sm-2"style="text-align: center;"></div>



          <div class="col-md-12" id="divResPas">

          </div>

  </div>

</div>

The javascript :

<script type="text/javascript" language="javascript">

$(document).ready(function(){

  $("#btnResPas").on("click",function(){

    $("#divResPas").load("resPas.php?refClient=<?php echo $refClient?>");

  });

});



</script>

And the php file :

   <?php



include("connection.php"); 



$refClient = $_GET['refClient'];



$reservationClient = "SELECT * from tblreservation where idClient ='".$refClient."'";

$result = mysqli_query($con,$reservationClient);

if (mysqli_num_rows($result) == 0)

{

 echo '<div class="col-sm-12" style="text-align:center;"> Pas de réservation </div>';

}

else

{

 while ($row = mysqli_fetch_array($result))

 {

   $id = $row['idTblReservation'];

   echo '<div class="col-sm-3" style="text-align:center;"><b><u>Date de réservation : </b></u></br>';

   echo $row["dateReservation"];

   echo '</div>';

   echo '<div class="col-sm-3" style="text-align:center;"><b><u>Heure : </b></u></br>';

   echo $row["heure"];

   echo '</div>';

   echo '<div class="col-sm-3" style="text-align:center;"><b><u>Nombre de personnes : </b></u></br>';

   echo $row["nombreClient"];

   echo '</div>';

   echo '<div class="col-sm-3" style="text-align:center;"><a href=';

   echo 'modifierResClient.php?id=';

   echo $id;

   echo '></br>Modifier</a></div>';

   echo '<div class="col-sm-12" style="text-align:center; margin-top : 20px;"></div>';

 }

} 

?>

Here is what it look like :

When I change the class to row :

Thanks guys !

---

My Answer:
id="content" and the button with id="fillButton". Here is the code:

html

Fill Div






In this code, when the button with id "fillButton" is clicked, it makes an AJAX request to the "getData.php" file and fills the content div with the data received from the PHP file. Make sure to replace "getData.php" with the actual path to your PHP file that returns the data you want to display in the div.