CODEWITHSUNDEEP
javascriptjqueryajax
mayro
mayro

Reputation: 21

JQuery Mobile data-role doesn't apply to div

I'm very new to both JQuery and Javascript. I have an XML file with some products stored inside, I would like to display these products inside a collapsible div AS a collapsible div. I have the following Javascript file:

$(document).ready(function()
{
$.ajax({
type: "GET",
url: "producten.xml",
dataType: "xml",
success: parseXml
});
});

function parseXml(xml)
{
var container = document.getElementById("behuizingen");
$(xml).find("behuizing").each(function()
{
var release = document.createElement("div");
release.setAttribute('data-role', 'collapsible');
release.innerHTML = "<h3>" + $(this).find('naam').text() + "</h3>";
container.appendChild(release);
 });
}

This should fetch all my product names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div. These are my imports in my HTML file:

<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile.structure-1.2.0.css" />

<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" />

<link rel="stylesheet" href="styles/style.css" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script src="styles/winkel.js"></script>

Also another thing, it doesn't show the products if I start from my main page and navigate to the page where it shows the products, I have to refresh (ctrl+f5) for them to show. I would really appreciate it if someone could help me with this because I have no idea how to fix it.

Upvotes: 2

Views: 299

Answers (1)

Sathya Raj
Sathya Raj

Reputation: 1089

when you append a jquery mobile widget through ajax after the page is initialised you have to .trigger("create").i.e 

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

for better understanding learn this documentation.

Upvotes: 1

Related Questions