0

As of this question I have zero responses to my question about breaking a multi-page file into fragments for ease of maintenance (see this question) so I went ahead and did it.

I'm trying to switch the first page, based on the logged-in condition and it seems to work when I have the include for the login page fragment near the top but NOT when it is near the bottom. I need something that is less fragile and was wondering if anyone had any suggestions?

I need to know that all pages are loaded into the jQM framework and ready to be addressed/bound. Of course I did try $(document).ready( { ... }) with no success.

I don't care if it's document.ready. I just need to know when loading (all data-role=page DIVs) is complete. There has to be some event that I'm just not finding.

It seems to work fine here (if the rest of the file is necessary, mention it in comments):

<?php include "fragments/_pickAuthService.html" ?>
<?php include "fragments/_main.html" ?>
<?php include "fragments/_myStuff.html" ?>
<?php include "fragments/_stuffDetail.html" ?>
<?php include "fragments/_stuffDetail-notSubscribed.html" ?>
<?php include "fragments/_rewardDetail.html" ?>
<?php include "fragments/_userProfile.html" ?>
<?php include "fragments/_setServices.html" ?>
<?php include "fragments/_authorizeServices.html" ?>

but not here:

<?php include "fragments/_main.html" ?>
<?php include "fragments/_myStuff.html" ?>
<?php include "fragments/_stuffDetail.html" ?>
<?php include "fragments/_stuffDetail-notSubscribed.html" ?>
<?php include "fragments/_rewardDetail.html" ?>
<?php include "fragments/_userProfile.html" ?>
<?php include "fragments/_setServices.html" ?>
<?php include "fragments/_authorizeServices.html" ?>
<?php include "fragments/_pickAuthService.html" ?>  <=== MOVED TO BOTTOM

The fragments are simply the DIVs taken out of the original file and look pretty much like this:

<!--  PAGE: pickAuthService -->
<div data-role="page" id='pickAuthService'>
    <div data-role="header">
    Pick a service we'll use to make sure you're you:
    </div><!-- /header -->

    <div data-role="content">
        <div id='signin_buttons'>
            <ul>
            </ul>
        </div>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

I dynamically load whatever values/buttons need to be displayed with an XHR call and add them using jQ before the page is displayed.

My fear is that using the "hope" approach once we get under load and the server is taxed slightly, will choke the app.

Thanks in advance,

Scott Kallen

Community
  • 1
  • 1
KCL
  • 138
  • 1
  • 12
  • Only the 1st page gets loaded into the Dom. All other get loaded after while you go to them. Try -- $(window).load(function() { --- https://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ – Tasos Jul 26 '15 at 01:47

1 Answers1

1

try 

$( ".selector" ).on( "mobileinit", function( event ) { ... } )

as found on this page in the jquery mobile documents as well as this stackoverflow post on the matter

https://api.jquerymobile.com/mobileinit/

jQuery Mobile: document ready vs page events

Community
  • 1
  • 1
RubberDucky4444
  • 2,330
  • 5
  • 38
  • 70