CODEWITHSUNDEEP
htmljquery-mobilenavigationmarkup
zzart
zzart

Reputation: 11473

Jquery mobile 1.4 navigate to dynamically created page

This is being bugging me for some time now so please help if you can.

So i'm starting with empty page : 

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css'>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js'></script>
</head>
<body>

</body>
</html>

</body>
</html>

Then injecting a jqm page into html : 

$('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")

Lastly i would regenerate/refresh markup of this page: 

$("body").enhanceWithin()

Question is how do i transition to this page programaticaly as neither $.mobile.navigate('#index') nor $.mobile.changePage('#index') seem to be doing the job? 

 $(":mobile-pagecontainer").pagecontainer("getActivePage")

returns

Object[div#index.ui-page]

 $(':mobile-pagecontainer').pagecontainer('change', '#index')

returns

Object[body.ui-mobile-viewport]

however the index page is still remains hidden from view .....

As you see im using jquery.mobile-1.4.0-rc.1, Please help !

Upvotes: 0

Views: 2458

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Solution

This is how you do it with jQuery Mobile: http://jsfiddle.net/Gajotres/3eHGj/

Javascript:

$(document).ready(function() {    
    $('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><br><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")
    window.location.hash = 'index';
    $.mobile.initializePage();
});

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit",function() {
                $.mobile.autoInitializePage = false;
            });        
        </script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>

    </body>
</html>

Explanation

Without initial page neither $.mobile.navigate('#index') nor $.mobile.changePage('#index') will work. Those methods require original page to exist before application can transit to another page.

Upvotes: 3

Related Questions