Мобильная функциональность PHP/jQuery/стиль не отображается

Я пытаюсь создать складной div (используя функцию jQuery Mobile), используя данные из базы данных MYSQL. Складные стили не применяются, и я не могу понять, в чем проблема?

можно php скрипт?

вот что у меня есть

страница.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-mobile jquery-mobile-collapsible
person oldbie    schedule 22.02.2017    source источник
comment
Эй, старина, я не понимаю, как связаны эти 2 файла... Является ли script.php на самом деле php/reflective-notes.php? Если да, загружаются ли элементы div в холст, но они просто не складываются?   -  person tjfo    schedule 23.02.2017
comment
Я думаю, что это связано с загрузкой AJAX после загрузки DOM. Проверьте этот вопрос: stackoverflow.com/questions/21239210/   -  person tjfo    schedule 23.02.2017
comment
Привет tjfo, спасибо за ответ. Происходит то, что я проверяю устройство в портретной или альбомной ориентации. Если в альбомной ориентации, то создается график, но в портретной ориентации запускается php-скрипт для создания складных мобильных блоков jQuery (или это план!). Данные/дивы генерируются из скрипта нормально... но не стилизация/свертываемая функциональность   -  person oldbie    schedule 23.02.2017
comment
вы загружаете jQuery дважды. jQuery 3.1 несовместим с jQM 1.4.x   -  person Omar    schedule 23.02.2017
comment
привет, омар, я забыл удалить это перед публикацией (я пытался увидеть, повлияло ли это на вызов библиотеки). О, я вижу, какую версию jQuery мне следует использовать с 1.4x?   -  person oldbie    schedule 23.02.2017
comment
Похоже, вам нужно будет использовать делегирование событий, чтобы прикрепить функциональность к вашим недавно загруженным элементам DOM. См. здесь: stackoverflow.com/questions/28236660/   -  person tjfo    schedule 23.02.2017
comment
как мне реализовать делегирование событий в мой код?   -  person oldbie    schedule 23.02.2017