How to send a jQuery ID to Bootstrap Modal to use it in PHP function?

View Original

I know there are lots of similar posts but nothing really helps me. I'm trying to run a PHP function in Bootstrap Modal with two parameters, one of the parameter is a row ID that needs to go from jQuery. I can send it and display it in a div id but how can I convert this parameter for a PHP function?

jQuery

$(document).ready(function() {
    $("a").click(function(){
        var hrefs = $(this).attr("href"); 
        $("#modal_form").attr('action',hrefs); 
        var ids = hrefs.split("=").pop();   
        $("#sid").html(ids);        
     });
});

Bootstrap Modal

<!-- Update Record Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateModalLabel">Update Translation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <form action="translation.php" id="modal_form" method="post">
      <div class="modal-body">
      
      <div id="sid"></div> /* I'm getting the right ID here*/
      
        <?php  selectedTranslation($dbh, $ids);   ?> /*I need to run this function*/
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" name="update" class="btn btn-primary">Save changes</button>
      </div>
    </form>
    </div>
  </div>
</div>

php function

function getAllTranslationById($dbh, $id){
    ...
    <?php 
    
        $sqlSelect = "SELECT * FROM xxxx";
    
    $result = mysqli_query($dbh, $sqlSelect);
    while ($row = mysqli_fetch_array($result)) {
        ?>
        <tr>
            <td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
            <td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>
            <td><a href="translation.php?sid=<?php echo $sid  ?>" data-toggle="modal" data-target="#updateModal"><img alt="Link" src="images/edit.png" title="Update this row"></a></td>
        </tr>
    <?php }?>
   </table>
<?php }

php function

function selectedTranslation($dbh, $sid){
    
    ....
    
    <?php 
    $sqlSelect = "SELECT * FROM xxxx ";
    
    $result = mysqli_query($dbh, $sqlSelect);
    while ($row = mysqli_fetch_array($result)) {
        ?>
        <tr>
            <td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
            <td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>          
        </tr>
    <?php }?>
   </table>
<?php }?>

Answer

Solution:

Its just impossible like the way you want

So what you can do instead?

Use Ajax.

  <div class="modal-body">
     <div id="sid"></div> /* I'm getting the right ID here*/
     <div id="ajaxResult"></div>
  </div>



  // JS Codes
  $(document).ready(function() {
    $("a").click(function(){
       var sid = ""; // set your `sid` here

       $.ajax({
         url: "/url_here", //url to your PHP page
         type: "post",
         data: {id: sid},
         success: function(data) {
               $("#ajaxResult").html(data); //result html
         }
       });        
    });
  });

Source