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

admin管理员组

文章数量:1402398

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>

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>

• javascript
• php
• mysql
• ajax
• modal-dialog

Share Improve this question Follow edited Dec 7, 2015 at 19:55 Kreng Kongkeng asked Dec 7, 2015 at 19:45 Kreng KongkengKreng Kongkeng 22711 gold badge55 silver badges2020 bronze badges 3

• "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 Commented Dec 7, 2015 at 19:48
• What code that does the actual popping? Tell me if i've miss something @MarcB – Kreng Kongkeng Commented Dec 7, 2015 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 Commented Dec 7, 2015 at 20:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

<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>

本文标签：