Collapsible DIVs rendering Blank
Hi,
I want to render collapsible regions with dynamic regions.
HTML :
<div data-role="page" id="version" data-theme="b">
</div>
On a button click, my server side code is invoked and data is fetched from server. With that data, I want to create collapsible content inside page id="version"
Javascript looks like :
function printResult(st){
$("#version").html(getHTML(st)); //calls getHTML
}
/*------------------------------------------------------------------------*/
function getHTML(raw)
{
var htmlText = "<div data-role='content'>";
for ( i=0; i<raw.length; i++)
{
htmlText+= "<div data-role='collapsible'>";
htmlText+="<h3>Heading "+raw[i]+"</h3>";
htmlText+="<ul><li>Value 1: "+raw[i]+"</li>";
htmlText+="<li>Conformance Status: "+raw[i]+"</li>";
htmlText+="<li>Resource Status: "+raw[i]+"</li>";
htmlText+="<li>Space Status: "+raw[i]+"</li></ul></div>";
}
htmlText+= "</div>"
return htmlText;
}
Without the collapsible divs, the above code is able to render multiple DIVs correctly but I am not able to create collabpsible DIVS with this code.