3

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

Omar
  • 32,302
  • 9
  • 69
  • 112
user2402987
  • 43
  • 1
  • 3
  • 1
    http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 – Gajotres May 20 '13 at 20:22

3 Answers3

3

After appending the content call the method

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

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

Aaron Springer
  • 233
  • 1
  • 9
  • Hi Aaron, many thanks for this. So easy, and it is solving my problem. The list is now properly displayed. Best regards, Eduard – user2402987 May 21 '13 at 06:24
3

After adding new content to Panel, use

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

Demo

Notes:

Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112
  • 1
    Hi Omar, many thanks for the code. It works perfectly, and does solve the next issue I would have been run into. I can learn a lot from this. Best regards, Eduard – user2402987 May 21 '13 at 06:22
  • @Omar Can you expand a little bit about your first note. When is it proper to use listview("refresh") (or whatever widget needs updating) vs trigger("pagecreate"). Is it only when you are embedding widgets within other widgets? – Aaron Springer May 21 '13 at 12:40
  • 1
    @AaronSpringer i'll make an example to explain my note above. I got to know it when i was making a demo for my answer, it's worth noting. – Omar May 22 '13 at 00:36
  • 1
    @AaronSpringer here's a demo why i didn't use `.listview()`, pls read my notes within the code. Compare it with the demo above, if you have any question, let me know. http://jsfiddle.net/Palestinian/yMwJd/ – Omar May 22 '13 at 00:47
  • 1
    @Omar Awesome, thank you for the demo! It is a lot more clear now what's going on. – Aaron Springer May 22 '13 at 13:54
  • This is not working for me jqm v1.4.5. My padding or margins are lost after I use jq .html() to bring in new content. – Ronnie Royston Oct 17 '15 at 01:55
  • @RonRoyston use `.enhanceWithin()`. – Omar Oct 17 '15 at 07:25
  • Thanks Omar. I think I tried that, and everything else I could find. I finally figured out that all I had to do was plain old CSS attached to the panel ID! ...along with create() and updateLayout(). Also, if I used 'pageBeforeCreate' jqm event, the default/initial panel content would get CSS'd twice so I just initialized the create() on 'pageCreate'. – Ronnie Royston Oct 17 '15 at 22:18
  • @RonRoyston you don't need those functions, why do you want to manually initialize the panel? If you're in doubt, post a question and I'll try to help you. – Omar Oct 18 '15 at 10:18
  • @Omar I'm using the panel as a login. After oAuth login success, the panel updates to show the new content (without closing). It's working... Thanks Omar. – Ronnie Royston Oct 18 '15 at 18:22
-1

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

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

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

Jonik
  • 1,208
  • 2
  • 12
  • 20