jquery mobile - listview widget is not displaying for dynamic content

Question

I have a parent list (ul-li), while clicking the li from the list i am creating the new child list and adding it to a new page. I am getting the proper Jquery mobile's listview for child list for first time alone, if i click the same li or some other li from parent list, child list loading with out the JQM's listview widget. instead it is loading the normal list.

Please find the Jsfiddle link - http://jsfiddle.net/gopijsf/BG2ZV/1/

HTML:

<div data-role="page" id="parentPage">
        <header data-role="header" data-theme="d">
            <h3>Parent</h3>
        </header>
        <div>               
            <ul id="sectionUlContainer" data-role="listview">
                <li><a href="#" class="sectionItemClass">List1</a></li>
                <li><a href="#" class="sectionItemClass">List2</a></li>
                <li><a href="#" class="sectionItemClass">List3</a></li>
                <li><a href="#" class="sectionItemClass">List4</a></li>
            </ul>
        </div>
        <footer data-role="footer" data-position="fixed" data-theme="b">
            <h3></h3>
        </footer>
    </div>

    <div data-role="page" id="childPage">
        <header data-role="header" data-theme="d">
            <h3>Child</h3>
            <a href="#parentPage">Back</a>
        </header>
        <div id="childList"></div>
    </div>

JS:

$(document).ready(function(){
$('.sectionItemClass').click(function(){
    var childWidget = '<ul id="childUlContainer" data-role="listview"><li>childList</li></ul>';
    $('#childList').html(childWidget);
    $.mobile.changePage('#childPage',{transition:'slide'});
});
});

Help me how to reload JQM's listview each time. Thanks in Advance.

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

Use this function:

$('#childUlContainer').listview('refresh');

Working example: http://jsfiddle.net/Gajotres/LrAyE/

Read more about it here in my other article: jQuery Mobile: Markup Enhancement of dynamically added content

And here your code fixed: http://jsfiddle.net/Gajotres/uejY2/

$(document).on('pageinit', '#parentPage', function(){     
    $(document).on('click','.sectionItemClass',function(){
        var childWidget = '<ul id="childUlContainer" data-role="listview"><li>childList</li></ul>';
        $('#childList').html(childWidget);
        $.mobile.changePage('#childPage',{transition:'slide'});
    });
});

$(document).on('pagebeforeshow', '#childPage', function(){       
    $('#childUlContainer').listview().listview('refresh')
});

edited May 23 '17 at 12:28

Community

1
1

answered May 22 '13 at 12:45

Gajotres

57,309
16
102
130

Thank you my dear friend, now it is working. the key for my problem is, $(document).on('pagebeforeshow', '#childPage', function(){ $('#childUlContainer').listview().listview('refresh') });. Thank u so much :) – Gopinath Gunanithi May 22 '13 at 14:14
If this is your answer please accept it. And I am glad to help you. – Gajotres May 22 '13 at 14:17

jquery mobile - listview widget is not displaying for dynamic content

1 Answers1