CODEWITHSUNDEEP
jquery-mobile
Ads
Ads

Reputation: 2184

JQuery Mobile - Expandable Listview not working correctly after refresh if dynamically added content

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.

  1. The list physically displays differently on the page
  2. When clicking on the "Parent 1", rather than expanding to show "Sub 1", it redirects the page to show a list with "Sub 1" as a header to the list, and 4 empty list items.

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

Answers (1)

Ads
Ads

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

Related Questions