Menu
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"> </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"> </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
695
asked Dec 05 '25 04:12
After appending the content call the method
$( "#list_devices" ).listview("refresh")
this will style the dynamic content that you have added to the listview.
103
answered Dec 07 '25 20:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With