Bootstrap modal and passing value

Question

When I click edit, 'id' should pass to own page and modal should pop up. But it doesn't work. Please help me

PHP and Bootstrap

<tr>        
    <td><?php echo $row['name']; ?></td>   
    <td><a data-toggle="modal" data-target="#myModal" href='?id=<?php echo $row['id']; ?>'>Edit</a> </td>          
</tr>

Modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
         ------
         -----
         -----
    </div>
</div>

Answer 1

Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"

<tr>        
    <td><?php echo $row['name']; ?></td>   
    <td>
        <a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
    </td>          
</tr>

Place this code in footer

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

        </div>
    </div>
</div>

JS

<script>
$('.Edit').click(function(){
    var Id=$(this).attr('data-Id');
    $.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)

SomePage.php

<?php
$Id=$_GET['Id'];
?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="fam_id"></h4>
</div>
<div class="modal-body">
    <?php echo $Id;?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

For more info, click Show data based of selected id on modal popup