CODEWITHSUNDEEP
jqueryjquery-mobilecordova
Marc Pursals
Marc Pursals

Reputation: 792

data-transition not working with script loaded pages

I'm newbie and I'm developing an app with Phonegap, jquery and jquery-mobile. My main page has several script loads of partial pages like this:

<div id="breakfast" data-role="page"></div>                         
<script>$( "#breakfast" ).load( "partials/breakfast.html" );</script>

Any of this partials has a navbar like this one:

<div data-role="navbar" style="background:black;" id="tab">      
  <ul>                                                           
    <li><a href="#"                                              
        data-role="tab"                                          
        class="ui-btn-active ui-state-persist">Breakfast</a></li>
    <li><a href="#lunch" data-role="tab"                         
        data-transition="slide">Lunch</a></li>                   
    <li><a href="#snack" data-role="tab">Snack</a></li>          
    <li><a href="#dinner" data-role="tab">Dinner</a></li>        
    <li><a href="#other" data-role="tab">Other</a></li>          
  </ul>                                                          
</div>

My problem is that data-transition is not working because somehow pages are not loaded into the dom until they are requested. I can navigate through all pages but data-transition is not working.

I read the oficial documentation and I found that it is possible to prefetch pages using:

<a href="prefetchThisPage.html" data-prefetch> ... </a>

But this doesn't work also.

What I want is continue using my partial pages to keep my main page clean and make data-transitions work.

Does anyone has a clue?

Thanks in advance.

Upvotes: 0

Views: 685

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You are not using a correct function.

Function load is a jQuery function, and while it works just fine it should not be used with a jQuery Mobile. jQuery Mobile works in a little bit different way and if you want to preload pages you need to use jQuery Mobile version of a function load. It will take care that page is successfully loaded into the appropriate part of the DOM.

This method is called loadPage and official information can be found here. Unlike load function, this one don't require destination location, it will be handled by jQuery Mobile. You just need to initialize it in a correct moment. Usually during the pageinit event, it will take care that page is loaded before initial app page is active am shown.

Because you are calling yourself a newbie take a look at this article, it will show you what page events are and how to use them.

If you still can't make it work I will create you a working example.

Upvotes: 1

Related Questions