JQuery Mobile getting loading animation to go away once content is loaded

Question

I am loading content into a div from an external html file. It is pretty simple (although I had some trouble getting the content to appear that was solved here: jquery mobile - loading content into a div) but once the content is loaded (it's just text) there is this little spinning loading animation in the center of the screen that won't go away. I don't know if JQuery is trying to load something else or what.

<script>
        $(document).ready(function()
        {
            $('#welcome').click(function(){
                console.log('clicked');
                $('#mainContent').load('welcome.html');
            $('#mainContent').trigger("pagecreate").trigger("refresh");
            });
        });
</script>

Does the loaded "welcome.html" contain javascript? – r0m4n Jun 19 '12 at 21:48 — r0m4n, Jun 19 '12 at 21:48
Nope. All it really is is some text. – Nolski Jun 19 '12 at 22:35 — Nolski, Jun 19 '12 at 22:35

score 1 · Answer 1 · answered Jun 19 '12 at 22:39

I believe that the spinner is started when you .trigger('pagecreate'). In any case you can stop the spinner by running this function:

$.mobile.hidePageLoadingMsg();

Which I would run inside the callback function for the .load() AJAX request:

    $(document).ready(function()
    {
        $('#welcome').click(function(){
            $('#mainContent').load('welcome.html', function () {
                $(this).trigger("create");
                $.mobile.hidePageLoadingMsg();
            });
        });
    });

You should read this page of the jQuery Mobile documentation: http://jquerymobile.com/demos/1.1.0/docs/api/events.html (Notice the big yellow sections, these are important)

You're using document.ready which doesn't play nice with jQuery Mobile, it's suggested that you use the pageinit event for individual pseudo-page elements.

To actually make this work you should use the built-in $.mobile.changePage() function that handles all of the initialization of the pseueo-page:

    $(document).delegate('#welcome', 'click', function()
    {
        $.mobile.changePage('welcome.html');
    });

There are also some options you can pass into the $.mobile.changePage() function, here is a list of them: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

This is very helpful, one problem with the changePage function is I want to load all of my data into a specific div without loosing all of the other data currently on the page. I am looking through the options for the changePage() function and I see that pageContainer() option might work, but I am not sure how it would fit into the rest of the code... ALSO I got the loading screen to go away but once I navigate back to my home page the website doesn't recognize clicks or at least won't run any code in any click listener on the page. — Nolski, Jun 20 '12 at 13:26

score 0 · Answer 2 · answered Jun 19 '12 at 22:30

0

It may not be the cleanest solution, because you're probably looking for a way to trigger an event causing the loading animation to hide by itself, right?

But you could try and trace the loading animation's class or ID and just hide it like this:

    $(document).ready(function() {
        $('#welcome').click(function(){
            console.log('clicked');
            $('#mainContent').load('welcome.html', function(){
                $('.loadinganimationclass').hide();
            });
            $('#mainContent').trigger("pagecreate").trigger("refresh");
        });
    });

answered Jun 19 '12 at 22:30

Michiel

956
2
7
19

Unfortunately it seems that the loading never stops. Once I can navigate back to the main page no more jQuery commands will work (all of my onClick's aren't being recognized.) – Nolski Jun 19 '12 at 22:37
pretty obvious question but have you tried $.mobile.loading( 'hide' ); ? – Michiel Jun 19 '12 at 22:46

JQuery Mobile getting loading animation to go away once content is loaded

2 Answers2