Question

Jquery mobile only loads first page in DOM I was implementing page navigation through hide() and show(), but now I am using jquery objects like google map and navbar now it stops working and dont show the page 3 in my code until I put page 3 at top of pages but than page 1 stop showing jquery nav bars with proper jquery css. Currently I am developing in html5, jquery mobile, phonegap ,android simulator.
HTML code

<div data-role="page" id="page1">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>
        <div data-role="fieldcontain" style="width:100%;float:left;"><input type="search" name="password" id="search" value="" data-theme="c" /></div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="list-tab" class="content_div listing" >
        <ul id="tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>
        <div id="map-tab" class="content_div"><div id="map-container"><div id="map_canvas" ></div></div></div>
        </div>
        </div>


        <div id="page2" data-role="page">
        <div data-role="header" class="pageheader" >
        <div class="logo"><a href="#" ><img src="images/logo.png" alt="logo" /></a></div>
        </div>  

        <div class="main">
        <fieldset>

        <ul>
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>
        </fieldset>
        </div><!-- main -->
        </section><!-- wrapper -->
        </div>

        <div data-role="page" id="page3">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>

        <div data-role="fieldcontain" style="width:100%;float:left;">
        <input type="search" id="newsearch" value="" data-theme="c" />
        </div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="new-list-tab" class="content_div listing" >
        <ul id="new-tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>

        <div id="new-map-tab" class="content_div"><div id="map-container"><div id="new-map_canvas" ></div></div></div>
        </div>
        </div>

Javascript Code

        $(document).ready(function() {
        var map;
        hide();
        $('#page1').show();
        $('.ui-loader').hide();

        function hide(){
        $('#page1').hide(); 
        $('#page2').hide();
        $('#page3').hide();
        }

        $(document).delegate('[data-role="navbar"] a', 'click', function () {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
        google.maps.event.trigger(map, 'resize');
        });

        $('#first').click(function() {
        hide();
        $('#page1').show();
        LoadMap("map_canvas");
        return false;
        });

        $('#second').click(function() {
        hide();
        $('#page2').show();
        return false;
        });

        $('#third').click(function() {
        hide();
        $('#page3').show();
        LoadMap("new-map_canvas");
        return false;
        });

        function LoadMap(divcanvas) {

        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
        center: myLatlng,
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById(divcanvas),
        myOptions);

        }

        });

I even tried to use triggers but I think I don’t not how they would be implemented in this scenario.

Answer 1

Firstly, your HTML structure is invalid and needs to be fixed. Refer to this page to understand how you define multiple JQM pages in a single HTML document.

With JQM, you do not explicitly show/hide pages. JQM handles that for you. You can link to your pages using <a> links as described in this page.

Finally, for learning how to JQM can be provided with your custom JS; read this help page.