More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • jQuery Mobile – Panel load listview | John Chacko

    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