CODEWITHSUNDEEP
javascripthtmljsonjquery-mobile
Darragh
Darragh

Reputation: 31

jquery-mobile collapsible accordion won't work when loaded in via Javascript

I have a jquery-mobile page with a javascript function included that takes information from a JSON sheet and injects it into the page. I am taking information and formatting it in a Collapsible set (accordion) format and when the page is loaded the information appears on the page but just as text and not the desired format. I tested exactly what the js was printing out by hardcoding it into the div and when I do that it is formatted so its clearly something to do with the function. It is reading and printing out the information, just failing to recognise the collapsible format. Heres the function and html and I'd appreciate it if you could help me out:

  <!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"> </script> 
</head>

<body>
<div data-role="page" data-theme="a" id="Page1">

<div data-role="header" data-theme="c">
  <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data- icon="back"> Back </a>
  <a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
  <h2>Septicaemia</h2>
 </div>

<div data-role="content" data-theme="c" id="Page1_Content">

<p class="infotext"><b>Clinical Condition:</b></p>

<div id="texts" data-role="collapsible-set">

</div>


<script type="text/javascript">

$(document).on("pageinit", "#Page1", function(){ 
  var info="";  
  var imp= "Json/empirical.json";
  $.getJSON(imp, function(data) {

   $.each(data.tcontent, function(i, item) {
    if(item.Name=='Septicaemia'){
     var search=item.Variations;
     $.each(search, function(j, subitem) {
        info += '<div data-role="collapsible" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-theme="d" data-content-theme="d"> <h3>' + subitem.condition +'</h3> <p class="guidelinetext">' +  subitem.organisms + subitem.antimicrobial + subitem.alternative + subitem.comments + '</p> </div>';                        
    });
 }
    $("#texts").empty().append(info);
  });
 });
});

</script> 

</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>

Upvotes: 1

Views: 681

Answers (1)

Omar
Omar

Reputation: 31732

collapsible-set is a widget which has special functions to enhance it manually. When you add items dynamically, you need to call those functions manually as jQM can't enhance dyanmicaly added items by itself.

All elements are enhanced once jQM is initiate, after that you have do initiate dynamic elements manually.

$("#texts").empty().append(info).collapsibleset();

Demo

Upvotes: 4

Related Questions