0

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.

Ravi Hirani
  • 6,511
  • 1
  • 27
  • 42
zuheir
  • 33
  • 1
  • 3

2 Answers2

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.

Ravi Hirani
  • 6,511
  • 1
  • 27
  • 42
  • 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 – zuheir Feb 23 '16 at 00:41
0

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

  1. how-to-pass-current-row-value-in-modal
  2. passing-data-via-modal-bootstrap-and-getting-php-variable
  3. bootstrap-modal-and-passing-value
  4. show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
Community
  • 1
  • 1
Nana Partykar
  • 10,556
  • 10
  • 48
  • 77
  • Thanks!. now I understand how it works, i always thought the content would be under the same page with the trigger – zuheir Feb 23 '16 at 00:30
  • Happy To Help. *Glad It Worked* @zuheir – Nana Partykar Feb 23 '16 at 09:11
  • 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. – WGS Apr 09 '20 at 12:42