Can't make bootstrap modal work. Using PHP the get data and display it using a modal
Question
Using PHP, I am trying to get data and display it using a bootstrap modal.
I can't get the bootstrap modal to open.
My PHP code connects to the server and database, and sends the information back, but since the modal does not work, it can't display the data received.
I also tried to activate the modal using JavaScript, but it still did not work.
Here is my code:
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a>
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<?php
if($_SERVER["REQUEST_METHOD"]="GET"){
if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) {
$uname = $_GET['uni_name'];
} else {
$uname = "";
}
}
$con = mysqli_connect('', '', '', '');
if ($con->connect_errno) {
echo "
<script> alert('We are experiencing problems.') </script>";
exit;
}
$sql = "SELECT * FROM students WHERE university like '%".$uname."%'";
if (!$result = $con->query($sql)) {
echo "
<script> alert('Sorry, the website is experiencing problems.') </script>";
exit;
}
if ($result->num_rows === 0) {
echo "
<script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>";
exit;
} else {
echo "<ul>
";
while($row = $result->fetch_assoc()){
echo sprintf("
<li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]);
//echo sprintf("
<li>%s</li>", $row["lastName"]);
//echo sprintf("
<li>%s</li>", $row["university"]);
}
echo "
</ul>";
}
$result->free();
$con->close();
?>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2017-02-18 19:54:24
The main reason it is not working is because "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3". Then you can in your own words "activate it using javascript" (jQuery).
There's a lot wrong with your HTML as well, but even while leaving that in place, using for example jQuery 1.12.4 makes the difference (left out your PHP):
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a>
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body">
<p>Put your php code here</p>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal();
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using HandsonTable in Bootstrap Modal doesn't work
Bootstrap 3 Modal using PHP recordset data
Modal validation using Bootstrap Modal - PHP
How can I get data from database using ajax in php codeigniter and display it in modal?
Bootstrap Modal - Pass data into Modal using Javascript
Can't get OpenLayers 3 map to display in Bootstrap modal
Can't get Bootstrap Tooltips and Modal to work together
Can't get modal to work
PHP Make HTTP GET Request in Bootstrap Modal
get ajax data and display on bootstrap modal
Related Tags