Categories

Load page dynamically in jQTouch

?View Code JAVASCRIPT
                // Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
                $('#callback').bind('pageAnimationEnd', function(e, info){
                    if (!$(this).data('loaded')) {                      // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
                        $(this).append($('<div>Loading</div>').         // Append a placeholder in case the remote HTML takes its sweet time making it back
                            load('ajax.html .info', function() {        // Overwrite the "Loading" placeholder text with the remote HTML
                                $(this).parent().data('loaded', true);  // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
                            }));
 
                    }
                });

3 comments to Load page dynamically in jQTouch

  • Oz

    Thank you for this Raul, but what if the page you are loading is called via ajax. So instead of (#callback), can you write a bind function for an html page?

    What I’m trying to achieve is to preload the large page2.html and provide the ‘loading’ notification on page1.html. So when the animation occurs, page2.html is fully loaded.

    If possible, urgent response will be appreciated.

  • sanraul

    Hi Oz,
    You can load the large page (page2.html) inside a new element and attach the element to the BODY of page1.html once the new page is loaded:

    
    // JS
    function loadExternalPage(url, pageId) {
       $('#page1').append('<div id="preloader">Loading</div>'); // add the loader
       var nextPage = $('<div id="'+ pageId +'"></div>'); // create a new page container
       nextPage.load(url +' .content' /* load only the content */, function(){
          $('#preloader').remove(); // remove the preloader
          $('body').append(nextPage); // attach the newly loaded page to the body
          jQT.goTo('#'+pageId , 'flip'); // show the new page
       });
    }
    
    // HTML
    <a href="javascript:loadExternalPage('page2.html', 'page2')" >Load Page 2</a>
    
    

    I think this should work but I haven’t tested this code. Please try it and if it does not work send me an email and I will be happy to help with this.

    -Raul

  • Oz

    Thank you so much Raul. I ended up delivering the app as is last week, but I will definitely give this a try and let you know.

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

IMPORTANT! To be able to proceed, you need to solve the following simple math (so I know that you are a human) :-)

What is 13 + 12 ?
Please leave these two fields as-is: