skip to Main Content

I am just trying to try using modal to display detail information about goods listed, but when I click on the modal button, there aren’t any contents on the modal.

Here is the list containing modal button

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th class="text-center">NO</th>
      <th class="text-center">QR</th>
      <th class="text-center">Mat. No</th>
      <th class="text-center">Name</th>
      <th class="text-center">Unit</th>
      <th class="text-center">Detail</th>
    </tr>
    <?php
    include "connection.php";
    
      $param = '%'.$keyword.'%';
      
      $sql = $pdo->prepare("SELECT * FROM ERSAsp WHERE matno LIKE :matno OR name LIKE :name OR unit LIKE :unit");
      $sql->bindParam(':matno', $param);
      $sql->bindParam(':name', $param);
      $sql->bindParam(':unit', $param);
      $sql->execute(); 
    }
    else{ 
      $sql = $pdo->prepare("SELECT * FROM ERSAsp");
      $sql->execute();
    }
    
    $no = 1;
    while($data = $sql->fetch()){
    ?>
      <tr>
        <td class="align-middle text-center"><?php echo $no; ?></td>
        <td class="align-middle text-center">
          <img src="data/QR/<?php echo $data['QR']; ?>" width="80" height="80">
        </td>
        <td class="align-middle"><?php echo $data['matno']; ?></td>
        <td class="align-middle"><?php echo $data['name']; ?></td>
        <td class="align-middle"><?php echo $data['unit']; ?></td>
        <td class="align-middle text-center">
        <a href='#myModal' class='btn btn-default btn-small' data-id='<?php echo $data['matno']; ?>' data-toggle='modal'><span  class="glyphicon glyphicon-folder-open"></a>
        </td>
      </tr>
    <?php
      $no++; 
    }
    ?>
  </table>
  <!-- Modal pop up-->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Spare Part Detail</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
</div>

Here is the script to load detail.php to unload data from database to modal

<script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').on('show.bs.modal', function (e) {
            var matno = $(e.relatedTarget).data('matno');
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  'matno='+ matno,
                success : function(data){
                $('.modal-body').html(data);
                }
            });
         });
    });
  </script>

Here is the detail.php

<?php
    include "connection.php";

        $sql = $pdo->prepare("SELECT * FROM ERSAsp");
        $sql->execute();
        
        while($data = $sql->fetch()){
            ?>
            <table>
            <tr class="align-middle text-center">
                <img src="data/QR/<?php echo $data['QR']; ?>" width="200" height="200">
            </tr>
            <tr class="align-middle"><?php echo $data['sapcode']; ?></tr>
            <tr class="align-middle"><?php echo $data['sparepart']; ?></tr>
            <tr class="align-middle"><?php echo $data['unit']; ?></tr>
            <tr class="align-middle"><?php echo $data['manufacturer']; ?></tr>
            <tr class="align-middle"><?php echo $data['pn']; ?></tr>
            </table>
        <?php 

        }
?>

From search result, I need to display the details using dynamic modal based on data matno in the mysql

2

Answers


  1. Chosen as BEST ANSWER

    Thank you everyone for helping me with the solutions and I have reflected to all of your opinion.

    Because matno that I write above didn't know exactly what should it pick to fetch data from sql, myModal just appear with blank.

    So I just rewrite the script like this:

    <script>
        $(document).ready(function(){
            $('.dinModal').on('click',function(){
                $(".modal-title").html("Detail");
                var dataURL = $(this).attr('data-matno');
                $('.modal-body').load(dataURL,function(){
                $('#myModal').modal({show:true});
                });
            }); 
        });
    </script>
    

    and using this as modal button:

    <a href="javascript:void(0);" data-matno="detail.php?matno=<?php echo $data['matno']; ?>" class="btn btn-default dinModal"><span class="glyphicon glyphicon-folder-open"></span></a>
    

    after that, I need to get matno from db first to display all information related with matno and match it with myModal button url:

    <?php
        if(!empty($_GET['matno'])){ 
            $dbHost = 'localhost'; 
            $dbUsername = 'root'; 
            $dbPassword = ''; 
            $dbName = 'myDB'; 
             
            $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
             
            if ($db->connect_error) { 
                die("Unable to connect database: " . $db->connect_error); 
            } 
    
            $query = $db->query("SELECT * FROM myTable WHERE matno= {$_GET['matno']}"); 
             
            if($query->num_rows > 0){ 
                $data = $query->fetch_assoc(); 
                echo '<table style="width:100%;">';
                echo '<tr>';
                echo '<td></td>';
                echo '<td><img src="data/Pict/'.$data['pict'].'" width="150" height="150"></td>';
                echo '</tr>';
                echo '<h5 style="text-align:center;font-weight:bold;">'.$data['matno'].'</h5>'; 
                echo '<tr>';
                echo '<th style="font-weight:bold;">SAP Material No.</th>';
                echo '<td>:</td>';
                echo '<td>'.$data['matno'].'</td>';
                echo '</tr>';
                echo '</table>';
            }else{ 
                echo 'Not found....'; 
            } 
        }else{ 
        echo 'Not found....'; 
        } 
    ?>
    

    In the end, it's cause of in myModal button (before) doesn't recognize which value of matno that clicked in the button.


  2. Use this:

    <a href='#myModal' class='btn btn-default btn-small open-modal' data-matno='<?php echo $data['matno']; ?>' data-toggle='modal'>
        <span class="glyphicon glyphicon-folder-open"></span>
    </a>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $('.open-modal').on('click', function () {
                var matno = $(this).data('matno');
                $.ajax({
                    type : 'post',
                    url : 'detail.php',
                    data :  { matno: matno },
                    success : function(data){
                        $('.modal-body').html(data);
                    }
                });
            });
        });
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search