call jquery changePage() on localStorage

Question

I have a simple jquery mobile page:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head>
  <body>
    <div id="MyContainer">

        <!-- ##################### Raw Part ##################### -->
        <div data-role="page">
            <div data-role="header">
                <h1> Hello World </h1>
            </div>                        
        </div>

    </div>
  </body>
</html>

when I execute that page it renders fine with a black header and title.

The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:

<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">
          <h1 class="ui-title" role="heading" aria-level="1">
                Hello World
          </h1>
    </div>
</div>

In other words the Raw Part turn into the Parsed Part .

I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!

The functions $.mobile.changePage() , $.mobile.loadPage() enables me to do that For example I could do:

// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });

// later then get the child child (note second child) of MyContainer and make that the child of MyContainer

The problem now is:

All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head>
  <body>
    <div id="MyContainer">



    </div>

    <script>
        function SomeFunction(){

             var someHTML = localStorate.html1;   // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>

             $("#MyContainer").html(someHTML);

             // now here I am stuck!!!!!!!!!!!!!!!
             // how can I make the content of MyContainer go from the raw part to the Parsed Part!
             // I am looking for something like:


             $JqueryMobile.ParseHTML($("#MyContainer"));
        }
    </script>
  </body>
</html>

Answer 1

Solution

jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.

    $('#index').trigger('pagecreate');

Where #index should be an id of your page DIV .

There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');

    $('#index').trigger('create');

If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog .

Example

Working example: jsFiddle

This part of code should interest you:

$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');

This code is used to dynamically append page footer and a radio button to page content.

call jquery changePage() on localStorage

Question

The problem now is:

1 answers

solution1
1 ACCPTED 2013-01-26 08:36:14

Solution

Example

call jquery changePage() on localStorage

Question

The problem now is:

1 answers

solution1 1 ACCPTED 2013-01-26 08:36:14

Solution

Example

solution1
1 ACCPTED 2013-01-26 08:36:14