I have a fully working piece of PHP, HTML code but when I place it into my website that is styled using jQuery Mobile the submit button will not display the query. Does anybody know how to fix this or even why it is happening
SCRIPT
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The School of Computing and Mathematics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/project1.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
PHP
<body>
<div data-role="page">
<?php
// Create connection
$con=mysqli_connect('localhost', '', '', 'timetabledb');
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$course_dropdown ="";
$query_course = "SELECT * FROM course";
$result_course = mysqli_query($con,$query_course) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_course))
{
$course_dropdown .= "<option value='{$row['CourseName']}'>{$row['CourseName']}</option>";
}
$module_dropdown ="";
$query_module = "SELECT * FROM module";
$result_module = mysqli_query($con,$query_module) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_module))
{
$module_dropdown .= "<option value='{$row['ModuleName']}'>{$row['ModuleName']}</option>";
}
$day_dropdown ="";
$query_day = "SELECT * FROM days ";
$result_day = mysqli_query($con,$query_day) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_day))
{
$day_dropdown .= "<option value='{$row['Day']}'>{$row['Day']}</option>";
}
echo "<table border='1'>
<tr>
<th>Course Name</th>
<th>Module Name</th>
<th>Type of Class</th>
<th>Lecturer</th>
<th>Time</th>
<th>Day</th>
<th>Room</th>
</tr>";
if (isset($_POST['button']) && $_POST['button'] == 'Submit') {
$course = mysqli_real_escape_string($con, $_POST['Course']);
$module = mysqli_real_escape_string($con, $_POST['Module']);
$day = mysqli_real_escape_string($con, $_POST['Day']);
$query = "SELECT * FROM course_module WHERE CourseName = '$course' AND ModuleName = '$module' AND Day = '$day'";
$result = mysqli_query($con,$query);
while($row1 = mysqli_fetch_assoc($result)){
echo "<tr>";
echo "<td>" . $row1['CourseName'] . "</td>";
echo "<td>" . $row1['ModuleName'] . "</td>";
echo "<td>" . $row1['ClassType'] . "</td>";
echo "<td>" . $row1['Lecturer'] . "</td>";
echo "<td>" . $row1['Time'] . "</td>";
echo "<td>" . $row1['Day'] . "</td>";
echo "<td>" . $row1['Room'] . "</td>";
echo "</tr>";
}
}
?>
HTML
<h1>School of Computing and Mathematics</h1>
<h2>Mobile website<h2>
<h2>Current students</h2>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Timetabling</h3>
<p>Select your Course</p>
<form action="current.php" method="post" data-ajax="false">
<select name="Course">
<option>Select Course</option>
<?php echo $course_dropdown; ?>
</select>
<select name="Module">
<option>Select Module</option>
<?php echo $module_dropdown; ?>
</select>
<select name="Day">
<option>Select Day</option>
<?php echo $day_dropdown; ?>
</select>
<input id ="button_timetable" name="button" value="Submit" type="submit">
</form>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li class="ui-btn-active ui-state-persist"><a href="current.html">Current students</a></li>
<li><a href="prospective.html">Prospective students</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
Please keep in mind that this script is fully implemented on a plain HTML site. I am only having issues with the jQuery mobile library.
Thank You in advance