Show data based of selected id on modal popup window after click a button php mysql

Question

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code: The html table:

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
                    $result = $conn->query($data);                          

                        while($ser=mysqli_fetch_array($result)) 
                        {

?>  
                                            <tr>
                                                <td><center><?php echo $counter; 
                                                                    $counter++; ?></center></td>
                                                <td><center><?php echo $ser['fam_id'];?></center></td>
                                                <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

The fam_id is the primary key.

Then, below is the code for modal popup window

<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <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">Name <?php echo $ser['fam_name'];?></h4>
      </div>
      <div class="modal-body">
        <b>Details</b>
        <hr></hr>
        Address: <?php echo $ser['fam_add']; ?><p></p>
        Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</form>

Moreover, Im doing them in one file. In conclusion, it is like below:

<tbody>
    <?php
    $counter = 1;
    $data = "SELECT * FROM family"; 
                        $result = $conn->query($data);                          

                            while($ser=mysqli_fetch_array($result)) 
                            {

    ?>  
                                                <tr>
                                                    <td><center><?php echo $counter; 
                                                                        $counter++; ?></center></td>
                                                    <td><center><?php echo $ser['fam_id'];?></center></td>
                                                    <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                    <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

<!-- Modal -->
    <form id="form1" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <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">Name <?php echo $ser['fam_name'];?></h4>
          </div>
          <div class="modal-body">
            <b>Details</b>
            <hr></hr>
            Address: <?php echo $ser['fam_add']; ?><p></p>
            Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    </form>
</td>
</tr>
<?php
}
?>
</tbody>

"the popup modal dialog"? You realize that there's more than just one script to do modal dialogs? You haven't shown any of the code that does the actual popping, so there's not really all that much we can do to help you. — Marc B, Dec 07 '15 at 19:48
What code that does the actual popping? Tell me if i've miss something @MarcB — Kreng Kongkeng, Dec 07 '15 at 19:50
You create one modal dialog for every fetched family from the database. It could be hundreds of dialog depending on you sql query, all with the same id. It is simply not right. Since you tagged the question with ajax try create only one dialog and then populate it by an ajax request. — Andy, Dec 07 '15 at 20:04

Nana Partykar · Accepted Answer · 2015-12-11T08:09:58.443

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
$result = $conn->query($data);                          
while($ser=mysqli_fetch_array($result)) 
{
?>  
<tr>
    <td><center><?php echo $counter; $counter++; ?></center></td>
    <td><center><?php echo $ser['fam_id'];?></center></td>
    <td><center><?php echo $ser['fam_name']; ?></center></td>

    <td>
        <center>
            <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
              <button class="btn btn-primary btn-sm">
                Edit Attendance Status
              </button>
            </a>
        </center>

Place this code in footer.php or end of this page.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

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

Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.

<script>
$('.modalLink').click(function(){
    var famID=$(this).attr('data-id');
    var famAddr=$(this).attr('data-addr');
    var famPhone=$(this).attr('data-phone');
    var famName=$(this).attr('data-name');

    $.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

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

<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];

?>

<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">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
    <form id="form1" method="post">
        <b>Details</b>
        <hr></hr>
        Address: <p><?php echo $famAddr;?></p>
        Phone_num: <p><?php echo $famPhone;?></p>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

I'm having problem on the js script. Where to put it? @Nana Partykar — Kreng Kongkeng, Dec 07 '15 at 23:54
Hi @KrengKongkeng : Either put in your footer.php or in your common js file. This code will work, i am pretty sure. — Nana Partykar, Dec 08 '15 at 06:36
The modal popup window appear well.. But it cannot defined the value that i want to show. Ive made the query but it dont work. It shows >undefined variable @Nana Partykar — Kreng Kongkeng, Dec 10 '15 at 15:47
If pop up came. value will also come. **Don't worry.** just post your query from where you are fetching data. Value will also come. Mr @KrengKongkeng . I'm leaving for the day now. Edit your question with your query. Tomorrow afternoon, i will rectify your issue. Thanks. Good Night from India. — Nana Partykar, Dec 10 '15 at 16:03
I have updated the answer. Please have a look @KrengKongkeng — Nana Partykar, Dec 11 '15 at 08:10
Thank you sir. You've help a lot.. Yesterday was a syntax error to my query.. tqsm! @Nana Partykar — Kreng Kongkeng, Dec 11 '15 at 10:35
I'm glad that i helped you. See, when our code doesn't work, we also get curious why it didn't work. We all are here to learn/help as much as possible. Always welcome. Cheers. Happy Coding @KrengKongkeng — Nana Partykar, Dec 11 '15 at 10:42

Show data based of selected id on modal popup window after click a button php mysql

1 Answers1

Linked