Passing data from page to bootstrap modal using SQL & PHP

Question

So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multiple way but I still can't show the selected data;

So here is the trigger for the modal:

<?php  while($row = mysqli_fetch_array($adm_query)){
    $id = $row['admin_id'];  ?>
<tr>
	<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
	<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
	<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
	<td width="138" style="text-align:center;">
												
      <a data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>" class="btn btn-outline btn-info"><i class="fa fa-search-plus"></i></a>
    </td>
<?php 	}?>

Then this is the modal content:

<!-- Modal -->
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <?php $sel_query=mysqli_query($conn, "select * from admin where admin_id='$idmodal'")or die(mysql_error($conn)); $selrow=mysqli_fetch_array($sel_query);?>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-info" style="text-align:center;">
          <div class="panel-heading">
            <h4>Staff Details</h4>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-lg-6">
                <div class="form-group">
                  <label>Staff ID</label>
                  <p>
                    <?php echo $selrow[ 'staff_no']?>
                  </p>
                </div>
                <div class="form-group">
                  <label>Name</label>
                  <p>
                    <?php echo $selrow[ 'adm_name']?>
                  </p>
                </div>
                <div class="form-group">
                  <label>Services | Department</label>
                  <p>
                    <?php echo $selrow[ 'department']?>
                  </p>
                </div>
              </div>
              <!-- /.col-lg-6 (nested) -->
              <div class="col-lg-6">
                <div class="form-group">
                  <label>Username</label>
                  <p>
                    <?php echo $selrow[ 'username']?>
                  </p>
                </div>
                <div class="form-group">
                  <label>Password</label>
                  <p>
                    <?php echo $selrow[ 'password']?>
                  </p>
                </div>
                <div class="form-group">
                  <label>Date</label>
                  <p>
                    <?php echo $selrow[ 'date_added']?>
                  </p>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>

The problem is nothing works, and i don't know where to start. Appreciate for the help.

Community · Accepted Answer · 2017-05-23 11:50:32Z

Create one class openModal in <a></a>. Use this class in <script></script> to get data-id

<?php  while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
    $id = $row['admin_id'];  ?>
        <tr>
            <td style="text-align:center"><?php echo $row['adm_name']; ?></td>
            <td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
            <td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
            <td width="138" style="text-align:center;">                                 
                <a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
                    <i class="fa fa-search-plus"></i>
                </a>
            </td>
        </tr>
<?php }?>

Place this code in the same page below.

<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
</div>

JS (data-id=.. is passed here.)

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"ajax_modal.php?id="+id,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 <script></script> tag too. Both are related.)

<?php 

// Get `id` from `<script></script>`
$id = $_GET['id'];

$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn)); 
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
  <div class="panel panel-info" style="text-align:center;">
    <div class="panel-heading">
      <h4>Staff Details</h4>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <label>Staff ID</label>
            <p>
              <?php echo $selrow[ 'staff_no']?>
            </p>
          </div>
          <div class="form-group">
            <label>Name</label>
            <p>
              <?php echo $selrow[ 'adm_name']?>
            </p>
          </div>
          <div class="form-group">
            <label>Services | Department</label>
            <p>
              <?php echo $selrow[ 'department']?>
            </p>
          </div>
        </div>
        <!-- /.col-lg-6 (nested) -->
        <div class="col-lg-6">
          <div class="form-group">
            <label>Username</label>
            <p>
              <?php echo $selrow[ 'username']?>
            </p>
          </div>
          <div class="form-group">
            <label>Password</label>
            <p>
              <?php echo $selrow[ 'password']?>
            </p>
          </div>
          <div class="form-group">
            <label>Date</label>
            <p>
              <?php echo $selrow[ 'date_added']?>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

For more info, click here

Thanks!. now I understand how it works, i always thought the content would be under the same page with the trigger
Hi, this works great, ty! I have an issue though when I have another modal on the page along with this script. On first page load the modal opens correctly. But if I open a modal that uses your script and then try to open the modal not using your script, it opens the last modal opened using your script.

Ravi Hirani · Accepted Answer · 2016-02-22 09:30:41Z

0

Write below line in your code:-

$selrow=mysqli_fetch_assoc($sel_query);

OR

$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);

instead of

$selrow=mysqli_fetch_array($sel_query);

Also it is bad practice to write query directly into modal.

You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.

answered Feb 22, 2016 at 9:30

Ravi Hirani

6,5341 gold badge31 silver badges43 bronze badges

1 Comment

zuheir Over a year ago

May i know what the difference between with MYSQLI_ASSOC and without it? Sorry, I read the manual but I don't quite get it

Collectives™ on Stack Overflow

Passing data from page to bootstrap modal using SQL & PHP

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related