Possible Duplicate:
Dynamically adding collapsible elements
I'm trying to create dynamic content for a mobile website but I am having trouble with collapsible elements displaying properly. I looked at some similar questions posted here and I was unable to successfully implement the the following fix:
$('div[data-role=collapsible]').collapsible();
The following is my javascript:
function loadContent() {
$(document).ready(function () {
$.ajax({
type: "GET",
url: "company.xml",
dataType: "xml",
success: parseCompany
});
});
$(document).ready(function () {
$.ajax({
type: "GET",
url: "italy.xml",
dataType: "xml",
success: parseTour
});
});
}
function parseCompany(xml) {
$(xml).find("company").each(function () {
$("#company").html("<h1>" + $(this).find("name").text() + "</h1>");
var link = $(this).find("contact-page").text();
var message = "<p>Telephone: " + $(this).find("booking-phone").text() + "</p>";
message += "<p><a href=" + link + ">Company Website</a></p>";
$("#company-info").html(message);
});
}
function parseTour(xml) {
$(xml).find("package").each(function () {
//var message = "<div data-role='collapsible' data-collapsed='true' data-theme='c'>";
$("#package-name").html(" ").append($(this).attr("title"));
var message = "<p>Basecost: $" + $(this).attr("baseCost") + "</p>";
message += "<p>Length: " + $(this).attr("length") + " days </p></div>";
$("#package").html(message);
});
}
The following is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tour Booking Made Easy</title>
<script src="tourinfo.js" type="text/javascript"></script>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body onload="loadContent()">
<div data-role="page">
<div id="company" data-role="header" data-theme="b"></div>
<div id="company-info" data-role="content" data-theme="b"></div>
<div data-role="collapsible" data-theme="c">
<h2 id="package-name">test</h2>
<div id="package">
<div id="stops"></div>
</div>
</div>
</body>
</html>
The collapsible feature does function but doesn't appear like it should. I have also tried inserting the collapsible div tags from the javascript into some empty div tags in the html but then the content doesn't appear at all. Any help will be greatly appreciated. Thank you.
-Manav
