0

Some background: I am using Jquery Mobile (1.4 stable) and Phonegap (3.3) to build an app. that I am currently testing on Android 2.3 (device) and Android 4.1.2 (emulator). I have a link in index.html that has a link to another page (say test.html also a JQM page). The test.html also resides inside the www folder of the app. but is quite a large html file 159 KB in size uncompressed. When the link is clicked in index.html , I wish to show a loading message until the test.html page (takes 2~3 seconds to load) is shown on screen. I do not want to load the test.html using ajax, so have mentioned data-ajax='false' on the link (because this causes problems for test.html).

Methods I have tried to achieve this:

a) Listen to vclick on the <a> and used the technique mentioned in https://stackoverflow.com/a/16277865 to show the message. I didn't use event.preventDefault() so expected JQM to follow the link normally. Also tried simply $.mobile.loading('show') without using setInterval.

b) Listen to vclick on the <a> and used the technique mentioned https://stackoverflow.com/a/16277865 but this time set event.preventDefault() and used window.location.assign('test.html');

c) Created a <span> that just said loading, hid it using $('span selector').hide() on $(document).ready() and then listened to vclick on the <a> and did a $('span selector').show() to show the message.

RESULT of all 3 methods is the same. In Android 2.3 , upon click of the button to goto test.html the screen stays on the index.html for 2 ~ 3 seconds. No loading message is shown whether from JQM (a) and (b) or the simple (c) method. Strangely, I can see the message on a Desktop Chrome while debugging (put a breakpoint after the span is shown/$.mobile.loading is called) and see the message from both JQM and my hidden span. It only doesn't work on the actual device. I tried this also on Android 4.1.2 thinking this is a 2.3 peculiarity but here I see a blank white page for the 2 ~3 seconds before the test.html is shown.

I put a $(document).on on all the page related events in index.html but none of them fired (put alert messages in all listeners to test). pagebeforechange and pageshow fire only when returning back from another page to index.html, so I couldn't use pagebeforehide, pagehide which was my other alternative. Putting the load message in the test.html's page events is too late (tried this too) because those get fired only after the 2~3 seconds needed to load the page in the DOM.

Here is a sample index.html on which you can reproduce this issue in an Android device. I have linked to an external website here (that takes a few seconds to load) in lieu of the large test.html I have.

    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />        
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <title>Hello World</title>
    </head>
<body>
    <div data-role="page" data-url="index.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 263px;">

        <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
            <h1 class="ui-title" role="heading" aria-level="1">Homepage</h1>
        </div>

        <div data-role="content" class="ui-content" role="main">
                <a href="http://www.foogifts.com" data-role="button" data-ajax="false" class="Next ui-link ui-btn ui-shadow ui-corner-all" role="button">Click here to test</a>
            <span id="loading">Loading please wait...</span>
        </div>

        <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
            <h4 class="ui-title" role="heading" aria-level="1">Footer here</h4>                
        </div>
    </div>
    <script>
    $(document).ready(function(){   
        $("#loading").hide();
        $(".Next").on( "vclick",function(event){                    
            event.preventDefault(); 
            //$.mobile.loading('show');         
            $("#loading").show();               
            var topage = event.currentTarget.href;          
            window.location.assign(topage);         
        });
    });
    </script>
</body>
</html>

In summary, I have a link in index.html that leads to a large test.html that needs to be loaded using data-ajax=false. The test.html takes 2 ~3 seconds to load and I wish to show a loading message till the test.html is shown on screen.

Many thanks for any suggestions you can provide to solve this problem.

Community
  • 1
  • 1
coltrane
  • 11
  • 4
  • Because ajax=false, showing a loading message in index.html won't work. Even though the page is still visible for a couple of seconds, it is actually gone while loading the new page. Could you 'redo' text.html so that it loads mostly blank with the loading message and then asynchronously renders the page? – ezanker Jan 24 '14 at 16:23
  • Thanks ezanker. This is my first jqm/jquery project so I am not quite sure how to go about doing what you have suggested..Do you mean that I create an intermediary html that simply shows a loading message and then ajax load the first jqm page in it from my test.html (it contains several jqm pages in it)? – coltrane Jan 24 '14 at 16:43
  • A quick and dirty method could be to have an intermediary with a loading message that immediately redirects to test.html. I did not realize that test.html had multiple jQM pages, i was thinking you could load test.html mostly empty with a loading message, and then immediately add the html markup via an ajax call. – ezanker Jan 24 '14 at 16:53
  • Tried it. The problem now is that the 'loading' page is in history so it appears in the back navigation. – coltrane Jan 24 '14 at 19:24
  • the intermediary page is definitely a hack, but you can try location.replace(url) from that page which should keep it out of history: http://www.w3schools.com/jsref/met_loc_replace.asp – ezanker Jan 24 '14 at 19:31
  • Thanks again. So, what I did finally is to load the intermediary page as a dialog and from the intermediary page to redirect to the actual page. It had the desired effect of showing the loading message (I need to style it now for it to look better). Works on A2.3 now. Will test on A4 later. If you can create an answer I will accept it. – coltrane Jan 24 '14 at 20:32

1 Answers1

1

Another solution I found was to add a pause of 50 ms after the loading widget is called. The 50 ms timeout allowed it to show it before doing the redirect.

    $('.Next').click(function(event) {              
            event.preventDefault();
            $.mobile.loading('show');       
            setTimeout(function() {     
                window.location.assign('test.html');
            }, 50);
    });

This didn't require creating an intermediary html and is consistently showing the loading message on both A2.3 and A4.1.2.

coltrane
  • 11
  • 4