Showing page Loader when rel="external"

Question

I am navigating to an external html page in jQuery Mobile application. the page takes a while loading i want to show loader in mean time but its not working.. here is what i have tried..

$(document).ajaxStart(function() {
        //  $.mobile.loading('show');
        $.mobile.loading( "show", {
                    text: 'Please Wait!',
                    textVisible: 'true',
                    theme: "b",
                    textonly: 'true',
                    html: ''
            });

        });

        $(document).ajaxStop(function() {
            $.mobile.loading('hide');
        });

I know rel="external" disables ajax, Is there there any way i can show this loader opening external links..?

It's not possible because page isn't loaded via Ajax and DOM is replaced with new page's DOM. — Omar, Jun 18 '14 at 06:26
@Omar : is there any traditional way to do it via pure JS ..? I just need to show a Please Wait tag.. thats it... — AddyProg, Jun 18 '14 at 06:40
The only way to show loader before page is hidden is to delay showing next page. — Omar, Jun 18 '14 at 07:30
@Omar : can you please show me a demo or refer me to a link with some info about it... — AddyProg, Jun 18 '14 at 08:06

score 1 · Accepted Answer · answered Jun 18 '14 at 08:26

When you move to an external page with Ajax disabled, the loader doesn't show because DOM is wiped and replaced with contents of that external page.

The only possible way to show loader before navigating is to delay moving to that page by setTimeout().

HTML

<a href="http://www.*****.com" rel="external" class="ui-btn external">External Page</a>

JS

$(document).on("pagecreate", "#pageID", function () {
    $(".external").on("click", function (e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $.mobile.loading("show", {
            text: "redirecting...",
            textVisible: true
        });
        setTimeout(function () {
            location.href = url;
        }, 2000); // 2secs delay
    });
});

Demo - Code

Showing page Loader when rel="external"

1 Answers1