如何将请求ID值传递给模式？

Question

When I click on 'edit' button modal is open but in a hidden field no I can't receive RequestId. Please help me how to pass dynamic requested to modal form?

This I will use in Codeigniter framework.

If it is possible to please rewrite the code I will be most helpful.

<table width="100%" class="table table-striped">
    <thead class="thead-dark">
        <tr>
            <th scope="col" align="left">#</th>
            <th scope="col">Request Id</th>
            <th scope="col">Agent Id</th>
            <th scope="col">Type</th>
            <th scope="col">Value</th>
            <th scope="col">Comment</th>
            <th scope="col"> Request Date & Time</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <?php 
          $sn=1;
          foreach ($result as $row) { 
              //print_r($row);die();
        ?>
        <tr>
            <td align="left"><?php echo $sn ?></td>
            <td><?php echo $row['rid'];?></td>
            <td><?php echo $row['aid'];?></td>
            <td><?php echo $row['type'];?></td>
            <td><?php echo $row['value'];?></td>
            <td><?php echo $row['comment'];?></td>
            <td><?php echo $row['request_time'];?></td>
            <td><button class="btn btn-danger btn-sm">Open</button></td>
            <td>
              <a data-toggle="modal" href="<?php base_url()?>#myModal" class="btn btn-warning btn-sm">Edit</a>
            </td>
        </tr>
        <?php $sn++;}?>
    </tbody>
</table>

Answer 1

You could add

data-request-id="<?php echo $row['rid']?>"

to the buttons that open the modals, and than use jquery/javascript to fetch the data with ajax

var requestId = $('.modalBtn').attr("data-request-id");

Answer 2

The is a sample to pass the ID to modal by using HTML data-attributes & jQuery.

<table width="100%" class="table table-striped">
    <thead class="thead-dark">
        <tr>
            <th scope="col" align="left">#</th>
            <th scope="col">Request Id</th>
            <th scope="col">Agent Id</th>
            <th scope="col">Type</th>
            <th scope="col">Value</th>
            <th scope="col">Comment</th>
            <th scope="col"> Request Date & Time</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>

        </tr>
    </thead>
    <tbody>
        <?php 
        $sn=1;
        foreach ($result as $row) { 
            //print_r($row);die();
        ?>
        <tr>
            <td align="left"><?php echo $sn ?></td>
            <td><?php echo $row['rid'];?></td>
            <td><?php echo $row['aid'];?></td>
            <td><?php echo $row['type'];?></td>
            <td><?php echo $row['value'];?></td>
            <td><?php echo $row['comment'];?></td>
            <td><?php echo $row['request_time'];?></td>
            <td><button class="btn btn-danger btn-sm">Open</button></td>
            <td>
                <a href="#myModal" data-toggle="modal" data-id="<?php echo $row['rid'];?>" class="btn btn-warning btn-sm">Edit</a>
            </td>
        </tr>
        <?php
            $sn++;
        }?>
    </tbody>
</table>

<script>
    $('#myModal').on('show.bs.modal', function (e) {
        var $btn = e.relatedTarget,
        rId = $btn.data('id');

        // "rId" would be the value from the html data-attribute.
        console.log(rId);
    });
</script>

Answer 3

<table width="100%" class="table table-striped">
    <thead class="thead-dark">
        <tr>
            <th scope="col" align="left">#</th>
            <th scope="col">Request Id</th>
            <th scope="col">Agent Id</th>
            <th scope="col">Type</th>
            <th scope="col">Value</th>
            <th scope="col">Comment</th>
            <th scope="col"> Request Date & Time</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <?php 
          $sn=1;
          foreach ($result as $row) { 
              //print_r($row);die();
        ?>
        <tr>
            <td align="left"><?php echo $sn ?></td>
            <td><?php echo $row['rid'];?></td>
            <td><?php echo $row['aid'];?></td>
            <td><?php echo $row['type'];?></td>
            <td><?php echo $row['value'];?></td>
            <td><?php echo $row['comment'];?></td>
            <td><?php echo $row['request_time'];?></td>
            <td><button class="btn btn-danger btn-sm">Open</button></td>
            <td>
              <a onclick="load_item('<?php echo $row['rid'];?>');" class="btn btn-warning btn-sm">Edit</a>
            </td>
        </tr>
        <?php $sn++;}?>
    </tbody>
</table>

Javascript Code You had to insert

 function load_item(rid){
/**
Write your ajax/javascript code here
*/
$("#myModal").modal("show");
 }

Answer 4

Remove data-toggle="modal" from <a> tag and make onclick edit based on ID

<td>
  <a id="edit-form" href="#" class="btn btn-warning btn-sm">Edit</a>
</td>

JS

$('#edit-form').click(function() {
   $('#hidden_field_id').val(your-value);
   $('#myModal').modal('show');
});

Answer 5

If I am right, you wanted to display a modal after clicks on the edit button.

<a href="javascript:void(0)" onclick="get_modal_details('<?php echo $row['rid'];?>')" class="btn btn-warning btn-sm">Edit</a>

I hope $row['rid'] is your unique ID and here is a html modal code

 <div class="modal" id="detail_modal_pop" style="overflow: scroll;"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header" > <button type="button" class="close close_c_modal" >&times;</button> <h4 class="modal-title c_modal">Details</h4> </div> <div class="modal-body"> <h6 id="load_wait" class="text-center">Please wait...</h6> <div id="detail_modal_pop_result" style="display:none;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default close_c_modal" >Close</button> </div> </div> </div> </div> 

To display a modal on clicks on edit button, use below script

 <script> function get_modal_details(rid) { $('#detail_modal_pop').fadeIn(200); $("#detail_modal_pop_result").hide(); $("#load_wait").show(); jQuery.ajax({ url: "<?php echo base_url() ?>some_controller/controller_method", data: { rid: rid }, type: "POST", success:function(data){ $("#load_wait").hide(); $("#detail_modal_pop_result").show(); $("#detail_modal_pop_result").html(data); }, error:function (){} }); } $(".close_c_modal").on("click", function() { $('#detail_modal_pop').fadeOut(200); $("#detail_modal_pop_result").hide(300); $('#detail_modal_pop_result').html(''); $("#load_wait").show(300); }); </script> 

And here is the PHP code

 <?php //"Some_controller.php" Controller public function controller_method() { if(isset($_POST['rid'])) { $rid = (int)$_POST['rid']; // $get_info = $this->Model->get_info($rid); // Write modal content here... } } ?> 

Hope this will help you.