jQuery Mobile 2-page Base Fiddle

by dhavaln

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="foo"> 

    <div data-role="header"> 
        <h1>Foo</h1> 
    </div><!-- /header --> 

    <div data-role="content">   
        <a href="#" id="carrier-btn" data-role="button">Load Page</a>
        
    </div><!-- /content --> 

    <div data-role="footer"> 
        <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<div id="subpages">
</div>


<script type="text/template" id="page-template">
    <!--origin city-->
<div data-role="page" id="origin">
    <div data-role="header" data-theme="b">
        <a href="#foo" data-direction="reverse">Back</a>
        <h1>Origin City</h1>
    </div>
    <div data-role="content" >
        <div id="wrapper3">
            <div id="scroller">  
                <ul data-role="listview" id="oriCity" data-theme="f" data-filter="true">
                      <li data-role="list-divider">Recent Search</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</script>

JavaScript

$('#carrier-btn').live('click', function() {
    $("#subpages").empty();
    //$("#next-page").page();
    $("#subpages").html($("#page-template").html());

    $.mobile.changePage($("#origin"), {
        transition: 'slide'
    });
});