CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Nolski
Nolski

Reputation: 443

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

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>

Upvotes: 0

Views: 2641

Answers (2)

Jasper
Jasper

Reputation: 76003

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

Upvotes: 1

Michiel
Michiel

Reputation: 1006

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");
        });
    });

Upvotes: 0

Related Questions