CODEWITHSUNDEEP
jqueryjquery-mobilemobilepanel
user2402987
user2402987

Reputation: 43

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

Upvotes: 3

Views: 6684

Answers (3)

Jonik
Jonik

Reputation: 1249

The only solution I've found for jqm 1.4.2 is:

    $(document).trigger('create');

It works, but it is "wrong way" i suppose.

Upvotes: -1

Omar
Omar

Reputation: 31732

After adding new content to Panel, use

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

Demo

Notes:

Upvotes: 3

Aaron Springer
Aaron Springer

Reputation: 233

After appending the content call the method

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

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

Upvotes: 3

Related Questions