Home » Jquery » php – My modal is displayed but there is no content inside the displayed modal

php – My modal is displayed but there is no content inside the displayed modal

Posted by: admin February 22, 2020 Leave a comment

Questions:

I want to include a simple bootstrap modal. The code is minimal, but there seems to be something wrong.
When I click the view button the modal is displayed but no data shows up in it.
This is my index.php:

<?php  
    $connect = mysqli_connect("localhost", "root", "", "baps");  
    $query = "SELECT * FROM tab_organizers";  
    $result = mysqli_query($connect, $query);  
?>  
<!DOCTYPE html>  
    <html>  
        <head>  
            <title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & 
             PHP</title>  
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
            <link rel="stylesheet" 
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
            </script>  
        </head>  
        <body>  
            <br /><br />  
            <div class="container" style="width:700px;">  
                <h3 align="center">Visitor's List</h3>  
                <br />  
                <div class="table-responsive">  
                    <table class="table table-bordered">  
                        <tr>  
                            <th width="70%">Group Name</th>  
                            <th width="30%">View</th>  
                        </tr>  
                        <?php  
                        while($row = mysqli_fetch_array($result))  
                        {  
                        ?>  
                        <tr>  
                            <td><?php echo $row["GroupName"]; ?></td>  
                            <td><input type="button" name="view" value="view" id="<?php echo 
                                 $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>  
                        </tr>  
                        <?php  
                        }  
                        ?>  
                 </table>  
              </div>  
           </div>  
        </body>  
    </html>  
    <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
            <div class="modal-content">  
                <div class="modal-header">  
                    <button type="button" class="close" data-dismiss="modal">&times;</button>  
                    <h4 class="modal-title">Visitor Details</h4>  
                </div>  
                <div class="modal-body" id="visitor_detail">  
                </div>  
                <div class="modal-footer">  
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script>  
        $(document).ready(function(){  
            $('.view_data').click(function(){  
                var OrganizerID = $(this).attr("id");  
                    $.ajax({  
                        url:"select.php",  
                        method:"post",  
                        data:{OrganizerID:OrganizerID},  
                        success:function(data){  
                        $('#visitor_detail').html(data);  
                        $('#dataModal').modal("show");  
                    }  
                });  
            });  
        });  
    </script>

This is my select.php:

<?php  
    if(isset($_POST["OrganizerID"]))  
    {  
        $output = '';  
        $connect = mysqli_connect("localhost", "root", "", "baps");  
        $query = "SELECT * FROM tab_organizers WHERE OrganizerID = '".$_POST["OrganizerID"]."'";  
        $result = mysqli_query($connect, $query); 
        $output .= '  
            <div class="table-responsive">  
            <table class="table table-bordered">';  
        while($row = mysqli_fetch_array($result))  
        {  
            $output .='
                <tr>
                    <td><label>Record Entered on: </label></td>
                    <td>'.$row["Datetimestamp"].'</td>
                </tr>
                <tr>
                    <td><label>Organizer ID: </label></td>
                    <td>'.$row["OrganizerID"].'</td>
                </tr>
                <tr>
                    <td><label>Group Name</label></td>
                    <td>'.$row["GroupName"].'</td>
                </tr>
                <tr>
                    <td><label>Contact Name</label></td>
                    <td>'.$row["ContactName"].'</td>
                </tr>
                <tr>
                    <td><label>House or Apartment #: </label></td>
                    <td>'.$row["Address1"].'</td>
                </tr>
                <tr>
                    <td><label>Street Name: </label></td>
                    <td>'.$row["Address2"].'</td>
                </tr>
                <tr>
                    <td><label>City: </label></td>
                    <td>'.$row["City"].'</td>
                </tr>
                <tr>
                    <td><label>Province: </label></td>
                    <td>'.$row["Province"].'</td>
                </tr>
                <tr>
                    <td><label>Postal Code: </label></td>
                    <td>'.$row["PostalCode"].'</td>
                </tr>
                <tr>
                    <td><label>Country: </label></td>
                    <td>'.$row["Country"].'</td>
                </tr>
                <tr>
                    <td><label>Title or Profession: </label></td>
                    <td>'.$row["Title"].'</td>
                </tr>
                <tr>
                   <td><label>Home or Office #: </label></td>
                   <td>'.$row["Telephone1"].'</td>
                </tr>
                <tr>
                    <td><label>Cell Number: </label></td>
                    <td>'.$row["Telephone2"].'</td>
                </tr>
                <tr>
                    <td><label>Fax Number: </label></td>
                    <td>'.$row["FaxNumber"].'</td>
                </tr>
                <tr>
                    <td><label>School Email Address: </label></td>
                    <td>'.$row["SchoolGeneralEmail"].'</td>
                </tr>
                <tr>
                    <td><label>Personal Email Address: </label></td>
                    <td>'.$row["Email"].'</td>
                </tr>
                <tr>
                    <td><label>How did you hear about us: </label></td>
                    <td>'.$row["HowDidYouHear"].'</td>
                </tr>
                <tr>
                    <td><label>Santo`s or Karyakar`s Comments on this Organizer</label></td>
                    <td>'.$row["Comments"].'</td>
                </tr>
                <tr>
                    <td><label>Diwali Invites to be send?</label></td>
                    <td>'.$row["Diwaliinvites"].'</td>
                </tr>
                <tr>
                    <td><label>Subscribe to BAPS mailing list?</label></td>
                    <td>'.$row["SubscribedToMailingList"].'</td>
                </tr>
            '; 
        }
        $output .= "</table></div>";  
        echo $output;
    }
?>

my database column names are as follows: OrganizerID(int(11))
GroupName(varchar(240)) ContactName(varchar(50)) Address1(varchar(50))
Address2(varchar(50)) City(varchar(50)) Province(varchar(50))
PostalCode(varchar(50)) Country(varchar(50)) Title(varchar(50))
Telephone1(varchar(50)) Telephone2(varchar(50)) FaxNumber(varchar(50))
SchoolGeneralEmail(varchar(50)) Email(varchar(100))
SubscribedToMailingList(bit(1)) HowDidYouHear(varchar(50))
Comments(mediumtext) Datetimestamp(datetime) Diwaliinvites(bit(1))

How to&Answer: