More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • Panel | 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’.


    <link rel="stylesheet" href=""/>
    <script src=""></script>
    <script src=""></script>
    	$(document).on('pageinit', '#home', function () {
    		// code 
    		var _menuLoaded = false;
    		$('#menuPanel').load('menu.html', function () {
    			_menuLoaded = true;
    		$("#menuPanel").on("panelopen", function (event, ui) {
    			if (!_menuLoaded) {
    <div data-role="page" data-theme="c" id="home">
    	<div data-role="panel" id="menuPanel" data-display="reveal" data-dismissible="false">
    	<div data-role="header">
    		 Left Panel - Dynamic Listview
    	<div data-role="content">
    		 Example using <a href="" target="_blank"> $.load() </a> to build listview inside jQM Panel<br/>
    		<a href="#menuPanel" data-role="button" data-inline="true">Show left panel</a>
    <div data-role="page" data-theme="c" id="page2">
    	<div data-role="header">
    	<div data-role="content">
    		 I am page2


    A Full Demo can be seen here