How to use $.load() to build a listview inside jQM 1.3+ Panel.

Below script use jquery’s load method to build a listview which is inside jQM’s new Panel.

If Panel is open before listview rendered, it shows ‘loading’.

Panel_load_listview

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
	$(document).on('pageinit', '#home', function () {
		// code 
		var _menuLoaded = false;
		$('#menuPanel').load('menu.html', function () {
			$(this).find(":jqmData(role=listview)").listview();
			$(this).trigger("updatelayout");
			$.mobile.loading("hide");
			_menuLoaded = true;
		});

		$("#menuPanel").on("panelopen", function (event, ui) {
			if (!_menuLoaded) {
				$.mobile.loading("show");
				return;
			}
			$("#menuPanel").off("panelopen");
		});
	});
	</script>
</head>
<body>
<div data-role="page" data-theme="c" id="home">
	<div data-role="panel" id="menuPanel" data-display="reveal" data-dismissible="false">
	</div>
	<div data-role="header">
		 Left Panel - Dynamic Listview
	</div>
	<div data-role="content">
		 Example using <a href="http://api.jquery.com/load/" target="_blank"> $.load() </a> to build listview inside jQM Panel<br/>
		<br/><br/>
		<a href="#menuPanel" data-role="button" data-inline="true">Show left panel</a>
	</div>
</div>
<div data-role="page" data-theme="c" id="page2">
	<div data-role="header">
		 page2
	</div>
	<div data-role="content">
		 I am page2
	</div>
</div>
</body>
</html>

 

A Full Demo can be seen here