jQuery Mobile form submission issue

jQuery Mobile form submission issue

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?

  1. <html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>The School of Computing and Mathematics</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="themes/project1.css" />
  8.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
  9.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  10.   <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  11.    
  12.     <script>
  13.     //TEST 1
  14.     $(function() {
  15.           $('form[action=\\#TimetableForm]').attr('data-ajax',false);
  16.     }):
  17.     </script>
  18.     </head>
  19.  <body>
  20.  <div data-role="page">
  21.  <?php
  22. // Create connection
  23. $con=mysqli_connect('localhost', 'seaninl', 'gymnastics', 'timetabledb');
  24. // Check connection
  25. if (mysqli_connect_errno($con))
  26.   {
  27.   echo "Failed to connect to MySQL: " . mysqli_connect_error();
  28.   }
  29. $course_dropdown ="";
  30. $query_course = "SELECT * FROM course";
  31. $result_course = mysqli_query($con,$query_course) or die(mysqli_error());
  32. while($row = mysqli_fetch_assoc($result_course))
  33. {
  34.     $course_dropdown .= "<option value='{$row['CourseName']}'>{$row['CourseName']}</option>";
  35. }
  36. $module_dropdown ="";
  37. $query_module = "SELECT * FROM module";
  38. $result_module = mysqli_query($con,$query_module) or die(mysqli_error());
  39. while($row = mysqli_fetch_assoc($result_module))
  40. {
  41.     $module_dropdown .= "<option value='{$row['ModuleName']}'>{$row['ModuleName']}</option>";
  42. }
  43. $day_dropdown ="";
  44. $query_day = "SELECT * FROM days ";
  45. $result_day = mysqli_query($con,$query_day) or die(mysqli_error());
  46. while($row = mysqli_fetch_assoc($result_day))
  47. {
  48.     $day_dropdown .= "<option value='{$row['Day']}'>{$row['Day']}</option>";
  49. }
  50.  
  51.  echo "<table border='1'>
  52. <tr>
  53. <th>Course Name</th>
  54. <th>Module Name</th>
  55. <th>Type of Class</th>
  56. <th>Lecturer</th>
  57. <th>Time</th>
  58. <th>Day</th>
  59. <th>Room</th>
  60. </tr>";
  61.  
  62.  
  63. if (isset($_POST['button']) && $_POST['button'] == 'Submit') {
  64.     $course = mysqli_real_escape_string($con, $_POST['Course']);
  65.     $module = mysqli_real_escape_string($con, $_POST['Module']);
  66.     $day = mysqli_real_escape_string($con, $_POST['Day']);
  67.    
  68.     $query = "SELECT * FROM course_module WHERE CourseName = '$course' AND ModuleName = '$module' AND Day = '$day'";
  69.    
  70.     $result = mysqli_query($con,$query);
  71.    
  72.   while($row1 = mysqli_fetch_assoc($result)){
  73.  
  74.    echo "<tr>";
  75.         echo "<td>" . $row1['CourseName'] . "</td>";
  76.         echo "<td>" . $row1['ModuleName'] . "</td>";
  77.         echo "<td>" . $row1['ClassType'] . "</td>";
  78.         echo "<td>" . $row1['Lecturer'] . "</td>";
  79.         echo "<td>" . $row1['Time'] . "</td>";
  80.         echo "<td>" . $row1['Day'] . "</td>";
  81.         echo "<td>" . $row1['Room'] . "</td>";
  82.         echo "</tr>";
  83.    
  84.     }
  85.     }
  86. ?>
  87.  
  88.   <h1>School of Computing and Mathematics</h1>
  89.   <h2>Mobile website<h2>
  90.   <h2>Current students</h2>
  91.  
  92.   <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
  93.     <div data-role="collapsible">
  94.         <h3>Section 1</h3>
  95.         <p>I'm the collapsible content for section 1</p>
  96.     </div>
  97.     <div data-role="collapsible">
  98.         <h3>Section 2</h3>
  99.         <p>I'm the collapsible content for section 2</p>
  100.     </div>
  101.     <div data-role="collapsible">
  102.         <h3>Timetabling</h3>
  103.         <p>Select your Course</p>
  104.        
  105.         <form id = "TimetableForm" action="current.php" method="post" data-ajax="false">
  106.         <select name="Course">
  107.         <option>Select Course</option>
  108.         <?php echo $course_dropdown; ?>
  109.         </select>
  110.        
  111.         <select name="Module">
  112.         <option>Select Module</option>
  113.         <?php echo $module_dropdown; ?>
  114.         </select>
  115.        
  116.         <select name="Day">
  117.         <option>Select Day</option>
  118.         <?php echo $day_dropdown; ?>
  119.         </select>
  120.        
  121.         <input id ="button_timetable" name="button" value="Submit" type="submit">
  122.         </form>
  123.     </div>
  124.    
  125.    
  126.    
  127.    
  128.    
  129.    
  130. <div data-role="footer" data-id="foo1" data-position="fixed">
  131.     <div data-role="navbar">
  132.         <ul>
  133.             <li><a href="homepage.html">Home</a></li>
  134.             <li><a href="news.html">News</a></li>
  135.             <li class="ui-btn-active ui-state-persist"><a href="current.html">Current students</a></li>
  136.             <li><a href="prospective.html">Prospective students</a></li>
  137.         </ul>
  138.     </div><!-- /navbar -->
  139. </div><!-- /footer -->
  140. </div>
  141. </body>
  142. </html>
Please bear in mind that this code works fully when there is no jQuery Mobile in the code.