1

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>';
}
?>
oldbie
  • 59
  • 5
  • Hey oldbie, I'm not seeing how these 2 files are related... Is script.php actually php/reflective-notes.php? If so, do the divs load into the canvas but they are just not collapsible? – tjfo Feb 22 '17 at 21:25
  • I think this has to do with AJAX loading after the DOM is loaded. Check out this question: http://stackoverflow.com/questions/21239210/jquery-event-not-triggering-for-dom-elements-created-after-page-load – tjfo Feb 22 '17 at 21:26
  • Hi tjfo, thanks for the response. What is happening is that i check for device in portrait or landscape orientation. If is in landscape then a graph is created, but in portrait the php script is fired to generate collapsible jQuery mobile divs (or thats the plan!). The data/divs are generated fine from the script... just not the styling/ collapsible functionality – oldbie Feb 22 '17 at 22:41
  • you're loading jQuery twice. jQuery 3.1 isn't compatible with jQM 1.4.x – Omar Feb 23 '17 at 09:24
  • hi omar, i had forgotten to remove that before posting (i was trying to see if where library was being called effected it). Oh i see which version of jQuery should i be using with 1.4x? – oldbie Feb 23 '17 at 10:00
  • It looks like you will need to use event delegation to attach the functionality to your newly loaded DOM elements. See here: http://stackoverflow.com/questions/28236660/jquery-data-role-collapsible-events-arent-being-captured-in-jquery-mobile?rq=1 – tjfo Feb 23 '17 at 18:43
  • how would i implement the event delegation to my code ? – oldbie Feb 23 '17 at 18:54

0 Answers0