Question

First time posting here so take it easy with me, lol. I’m currently trying to load content into my “pages” that I have already written the html out for. My jquery script is reading the data in from my xml file content.xml. My first page loads fine, but the pages I’m trying to insert data into it have nothing in them. I’ve deliberately created each page as a shell to avoid data-url issues.

Here’s snippets of my code (lots of repetition so no point in putting it all in):
Jquery:

$(function () {
    $.ajax({
        type: "GET",
        url: "content.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {                                                   
    $(xml).find('Phonetic').each(function () {
    var a = 1;
    $test = $("s" +a).append('<div><div class=<div class="S3">' +
            $(this).find("S3").text() + 
            '</div>"S1">' + 
            $(this).find("S1").text() + 
            '</div><div class="S2">' + 
            $(this).find("S2").text() + 
            '</div><div class="S4">' +
            $(this).find("S4").text() + 
            '</div></div>');

    $test.page();
    a++;
});
    }

Here’s the html:

<div data-role="page" id="c1"> 
<div data-role="header"><h1>Test</h1></div> 
<div data-role="content" id="s1"></div> 
<div data-role="footer"><h1>Test release v1.0 - Android tablet test</h1></div> 
</div> 

Any help would be great!

Answer 1

i have just one page, the key is to have pagebeforechange in your document ready or ondeviceready function.

$(document).bind("pagebeforecreate",function( e, data ){
      if ( typeof data.toPage === 'string' ){
           var p = $.mobile.path.parseUrl( data.toPage );

           if( u.hash.search( new RegExp( /^MyPageName/ ) ) !== -1 ) {
                $.mobile.showPageLoading();
                MyCodeToExecForThisPage( p, data.options );
                e.preventDefault();  // tell jquery i will create a page not him
           }
      } 
 });

so thats your way in, you now need a function to process the page and show the html, here is what i do:

function SetPagesTemplate(  ){
$page = $("#AllPage"); // this is the name of my page in the index file
    $header = $page.children( "#AllHead" ); // my header so i can custom change
$content = $page.children( ":jqmData(role=content)" ); // the content area of page
$header.html( 'custom graphic or text' );
$content.html(''); // clear everything up
$footer = $page.children( "#allFoot" ); // hook into my footer bar
$footer.html( 'custom footer nav and links' );
 }

below is code to show when navigating to a page that nees a value for example #person?personid=22 my page is person and i will be taking the id [ personid ] and getting the correct info, i will then populate my ALLPAGES page with the content and make jquery think i am actually on #person.

 // take note here that i take in urlObj [ this was p ]  and options
function LoadPerson( urlObj, options ) {
  try{
// lets get the number sent by stripping everything out
    var id = urlObj.hash.replace( /.*personid=/,"" ),
    extra = "";
SetPagesTemplate(  ); // the code that sets the page so i dont have to repeat myself.

$.ajax({
    url: "http:\/\/" + domain + "/Ajax/MobilePersonProfile",
    type: "POST",
    dataType: "json",
    data: { id: id },
    crossDomain: true,
    success: function ( data ) {
        //loop through data create rows
        if( data.length === 0 ){ ThrowCustomAlert( 'Sorry, unable to load profile.', 'no profile available', true ); } 
        else { 

            // now deal with your data on this example your processed data would be called template
                    // all this page stuff was set up earlier so lets fill it
            $content.append("<section><nav id='profilescroll'>" + extra + template + "</nav></section>" );
            $page.page(); // make our page into a page
            options.dataUrl = urlObj.href;
            template = null;
            data = null;
              // above cleanup, on mobile device to keep memory leaks low
                            // now we navigate to our created page THIS
            $.mobile.changePage( $page, options );


            StartScroller( "profilescroll" );
            HideLoading(); // lets hide the page loading
        }
    },
    error: function ( jqXHR, textStatus, errorThrown ) { CustomError(errorThrown,'',"Profile",true); }
});
}
catch( ee ){ CustomError( ee.message, ee.description, "profile", true ); }

}

thats all you need, its all i ever use, i dont think i have seen examples like this i have had to basically turn my entire app into this way of working to reduce the memory usage on iphone 2 when using as a phonegap app, and it is very very very quick with full ajax navigation.

points to note is that you only need hashtag navigation, in your pagebeforecreate set up a new if for every page you want. w

well hope it helps

as requested here is the html for my page:

 <div data-role="page" id="AllPage" class="body" style="overflow:hidden;">

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->