I am trying to query a database but I don't want it to do it when the page loads. I want it to query during execution of a javascript function. How do I do this? Below is my code. I have tried just adding php tags in the middle of the function and calling loadAvailableReservations() but it returns with an error even when I close the script tags.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "fbla";
function loadAvailableReservations() {
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, date FROM availableReservations";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<br> id: ". $row["id"]. " - Name: ". $row["name"]. " " . $row["date"] . "<br>";
}
} else {
echo "0 results";
}
$conn->close();
}
?>
<html>
</head>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<link rel="stylesheet" media='screen and (min-width: 0px) and (max-width: 298px)' href="css/unsuported.css" />
<link rel="stylesheet" media='screen and (min-width: 298px) and (max-width: 552px)' href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 552px) and (max-width: 806px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 806px) and (max-width: 9999999px)' href='css/regular.css' />
</head>
<body>
<div id="header-div">
<a href="index.html" id="header-div-a-regular">Mountain Springs Family Entertainment Center</a>
<a href="index.html" id="header-div-a-small">Mountain Springs FEC</a>
<div id="header-div-menubutton">
<hr id="hr-1">
<hr id="hr-2">
<hr id="hr-3">
</div>
<ul>
<li><a href="#specials/events" onclick="return specialsEventsAppend()">Specials/Events</a></li>
<li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li>
<li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li>
</ul>
</div>
<div id="mobileMenu-div" style="display:none">
<center>
<ul id="mobileMenuUl">
<li id="ulfirstli"><a href="#about" onclick="return specialsEventsAppend()">Specials/Events</a></li>
<li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li>
<li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li>
</ul>
</center>
</div>
<div id="maincontent-div">
<p id="unsuported-p">Sorry but this screen resolution is unsuported :/<p>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
$('#header-div-menubutton').live('click', function(event) {
toggleMobileMenuDiv();
});
function toggleMobileMenuDiv() {
$('#mobileMenu-div').slideToggle("fast");
}
});
function mobileMenu() {
var div = document.getElementById('mobileMenu-div');
}
function specialsEventsAppend() {
var div = document.getElementById('maincontent-div');
//clears everything in the div
div.innerHTML = "";
//puts the content into the div
div.innerHTML = div.innerHTML + 'Extra stuff';
}
function bookitAppend() {
var div = document.getElementById('maincontent-div');
div.innerHTML = "";
div.innerHTML = div.innerHTML + '<center><div id="bookit-div"><p> January 20<sup>th<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 21<sup>st<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 22<sup>nd<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 23<sup>rd<sup><div id="bookit-list"></div></div><center>';
}
function scheduleAppend() {
var div = document.getElementById('maincontent-div');
div.innerHTML = "";
div.innerHTML = div.innerHTML + '<center><h3>Days available for reservations</h3></center><center><table><tr><th>Day</th><th>Time</th></tr><tr><td>Sunday</td><center><td>Closed</td></center></tr><td>Monday</td><center><td>8:00-11:00</td></center></tr><tr><td>Tuesday</td><center><td>8:00-11:00</td></center></tr><tr><td>Wensday</td><center><td>8:00-11:00</td></center></tr><tr><td>Thursday</td><center><td>8:00-11:00</td></cetner></tr><tr><td>Friday</td><center><td>10:00-11:00</td></center></tr></table></center>';
}
</script>
