CODEWITHSUNDEEP
javascriptphphtml
KingFlamini
KingFlamini

Reputation: 23

Javascript to fill a div

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 : enter image description here

When I change the class to row : enter image description here

Thanks guys !

Upvotes: 0

Views: 48

Answers (1)

Mike Foxtech
Mike Foxtech

Reputation: 1651

try to change

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

to

<div class="row" id="divResPas"></div>

Upvotes: 1

Related Questions