After much experimentation, I have successfully applied JQuery Mobile collapsible styling to data retrieved from an XML file using this code/method. However, I am facing an issue with getting all JQuery styling to work properly - particularly the icon does not display as expected. I want to set the data-collapsed-icon attribute to arrow-u, for example. This seems to work fine in static code but not when working dynamically with an XML/JSON file. Any suggestions on how to make the icon styling function correctly?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "jargon.xml",
dataType: "xml",
success: function(xml) {
var container = document.getElementById("catalogue");
container.setAttribute('data-role', 'collapsible-set');
container.setAttribute('data-collapsed', 'true');
$(xml).find('release').each(function(){
var release = document.createElement("div");
release.setAttribute('data-role', 'collapsible');
release.setAttribute('data-collapsed', 'true');
var cat = $(this).find('cat').text();
var title = $(this).find('title:first').text();
var artist = $(this).find('artist').text();
var tracks = "";
$(this).find('track').each(function(){
tracks = tracks + $(this).find('title').text() + "<br>";
});
release.innerHTML = "<h3>" + cat + "<br></h3><p>" + artist + "</p>";
container.appendChild(release);
});
var catDiv = $('#catalogue');
catDiv.find('div[data-role=collapsible]').collapsible({theme:'b',refresh:true});
}
});
});
</script>