Javascript - Displaying Detail Search Result using Dynamic Modal

ABayuKurniawan
January 9, 2024
95 views
1 vote
2 Answers

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

Tags: javascript

Answers

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.

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Displaying Detail Search Result using Dynamic Modal

Answers