Reputation: 2184
I'm having issues with a jquery mobile listview when I add the items through jquery code.
If I add the following < ul > to the page and let the "normal" page processing happen, my list appears correctly with expandable sub lists, etc.
<ul data-role="listview" id="Ul2" class="ui-listview-outer ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true">
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false" data-icon="plus">
<h2 vid="CA175191-FA4D-4F2A-AAA7-2898971AB0F4">Parent 1</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2 vid="65E74F52-54E6-4A84-B4AC-F24E638FE559">Sub 1</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
</ul>
</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2 vid="86628CD0-87BD-4649-8899-1029AD38DD9C">Sub 2</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
</ul>
</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2 vid="12C6A457-EEA1-47A0-A63D-3222DF3069F2">Sub 2</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
<li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
</ul>
</li>
</ul>
</li>
<li data-iconpos="right" data-shadow="false" data-corners="false" data-icon="plus">
<h2 vid="864FCB4E-98A1-4C0C-9421-E89F5C5423A6">Parent 2</h2>
</li>
</ul>
But, if I add the same code in dynamically
var myData = '<li>' + ........ + '</li>';
$('ul').append(myData);
and then run
$('ul').listview("refresh")
The list behaves differently.
I'm confused as to what to try next. Is there ANOTHER step I should take to refresh my list. OR have I added some incorrect classes to the elements.
Here is the JSON I'm trying to display in the lists and sub lists, it's a bit cut-down so there are probably extra square brackets that appear not to be necessary - It starts as XML and is converted to JSON from the server-side before being returned to the client :
{
"parents":
{
"parent":
[{
"parName": "Parent 1", "parID": "CA175191-FA4D-4F2A-AAA7-2898971AB0F4",
"subs":
{
"sub":
[{
"group_Name": "Sub 1", "group_ID": "65E74F52-54E6-4A84-B4AC-F24E638FE559",
"children":
{
"child":
[
{ "vID": "367806EA-493F-45BB-BAC9-DF11E946E21A", "dispName": "Child 1" },
{ "vID": "4DE698E0-E395-4FF9-9F74-E8679B992AED", "dispName": "Child 2" },
{ "vID": "747EF952-C565-41C6-AF96-B7192AD3599A", "dispName": "Child 3" },
{ "vID": "5BDD8BD5-27E3-4E71-9C02-7E41CADF327E", "dispName": "Child 4" }
]
}
}]
}
}]
}
}
Thanks
Upvotes: 1
Views: 251
Reputation: 2184
So it turns out that upgrading my JQM version to 1.4.5 and using .enhanceWithin()
on the parent div rather than using .listview("refresh")
solved my issue.
Thanks @Omar for pointing me in the right direction.
Upvotes: 1