Question

我正在尝试使用来自MYSQL数据库的数据创建一个可折叠的div（使用jQuery Mobile功能）。可折叠样式没有被应用，我无法弄清楚问题是什么？

可能是php脚本吗？

这就是我所拥有的

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>';
}
?>

PHP / jQuery移动功能/样式没有显示

0 个答案: