Add content to Panel Dynamically

问题

it might be the case that my javascript capabilities are not sufficient :).

I am trying to enhance a list (add items via javascript) to a jquery mobile panel on the fly. The code below is a working (non-working) example of the functionality. The complete project would be a bit too much overhead (and you need some serial connected devices to run it).

It adds nicely an entry to the list, but does not render it in the proper style.

Is there are trick that I am missing?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title> Device control</title>

    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
    <style>
    </style>

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

        function addEntry()
        {
            var div = $("<li><a href=\"#\">Device 2</a></li>").appendTo("#list_devices");

            $( "#nav-panel-devicecommands" ).trigger( "updatelayout" );
        }

    </script>

    </head>
<body>
    <!-- Home -->
    <div data-role="page" id="pageDeviceCommands"  class="ui-responsive-panel">
        <div data-theme="a" data-role="header" data-position="fixed">
            <h3>Overview</h3>
            <a href="#nav-panel-devicecommands" data-icon="bars" data-iconpos="notext">Menu</a>
        </div>
        <div data-role="content" id="contentDeviceCommands">
            empty for now
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#pageDeviceCommands" data-transition="fade" data-theme="" data-icon="home"></a></li>
                </ul>
            </div>
        </div>

        <style>
            .nav-search .ui-btn-up-a {
                background-image:none;
                background-color:#333333;
            }
            .nav-search .ui-btn-inner {
                border-top: 1px solid #888;
                border-color: rgba(255, 255, 255, .1);
            }
        </style>
        <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal"
             id="nav-panel-devicecommands" data-theme="a">
            <ul id="list_devices"  data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"
                class="nav-search">
                <li data-icon="delete" style="background-color:#111;">
                    <a href="#" data-rel="close">Close device selection</a>
                </li>
                <li>
                    <a href="#">Device 1</a>
                </li>
            </ul>

            <a data-role="button" onclick="addEntry();">add device</a>
            <!-- panel content goes here -->
        </div>
        <!-- /panel -->
    </div>
</body>
</html>

In the webconsole, it is obvious that the html code for the first entry, and the one that was added by the button is different. Is there a way to enable jquery mobile to apply the same set of information to the newly added li item (other than adding it 'by hand')?

<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search ui-listview">
                <li data-icon="delete" style="background-color:#111;" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                    <a href="#" data-rel="close" class="ui-link-inherit">Close device selection</a>
                </div><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></div></li>
                <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">Device 1</a>
                </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
            <li><a href="#">Device 2</a></li><li><a href="#">Device 2</a></li></ul>

Any help or hint is highly appreciated.

Best regards, Eduard

回答1:

After appending the content call the method

$( "#list_devices" ).listview("refresh")

this will style the dynamic content that you have added to the listview.

回答2:

After adding new content to Panel, use

$('[data-role=page]').trigger('pagecreate');

Demo

Notes:

Using .listview("refresh") and .listview().listview("refresh") won't enhance list-view correctly as it will merge it with its parent div instead of render it as a child of the div where it's appended.
updatelayout is used when you show/hide elements to update the page size.
Use jQuery 1.9.1 with jQuery Mobile 1.3.1
Related: How do you dynamically add side panel menu items with jQuery Mobile and keep all CSS styling?