I am trying to create a collapsible div (using the jQuery Mobile feature) using the data from a MYSQL database. The collapsible styles are not being applied and i cant figure out what the problem is?
possible the php script?
here's what i have
page.html
<html>
<head>
<title>My App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<!-- css files -->
<!--BoilerPlate-->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />-->
<!--end boilerplate styles-->
<!--my custom css-->
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<!-- jQuery mobile js/css -->
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css" />
<!-- end of custom styles -->
<!-- END css declaration -->
</head>
<body>
<div id="canvasArea"></div>
<canvas id="cnvChart"></canvas>
<!-- JAVASCRIPT Libraries -->
<script src="chart.js/Chart.js" type="text/javascript"></script>
<script src="js/lineGraph.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.js" type="text/javascript"></script>
<script>
// Listen for orientation changes
window.addEventListener("orientationchange", function () {
location.reload(true);
// Announce the new orientation number
}, false);
var canvasAreaDiv = document.getElementById(
'canvasArea');
if(window.innerHeight > window.innerWidth) {
//portrait mode, so show the php script!
$(canvasAreaDiv).load("php/reflective-notes.php");
}
else {
//show the graph
showGraph();
}
</script>
</body>
script.php
$username = $_SESSION['username'];
$reflectiveMessageQuery = "SELECT date, notes FROM table WHERE
userName = '$username'";
$result = mysqli_query($conn, $reflectiveMessageQuery) or die(mysqli_error());
$count = mysqli_num_rows($result);
$rowCount = 0;
while ($row = mysqli_fetch_array($result)) {
$date = $row['date'];
$note = $row['notes'];
if($note === NULL){
$note = "no notes...";
}
echo'<div data-role="collapsible"><h1>'. $date . '</h1> <p>'.$note.'</p>'
.'</div>';
}
?>