CODEWITHSUNDEEP
cssjqueryjquery-mobile
vladCovaliov
vladCovaliov

Reputation: 4403

Ajax loader not working correctly

I am trying to use the jquery-mobile spinner but it doesn't seem to work

From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works

$.mobile.loading( 'show', {
    text: 'foo',
    textVisible: true,
    theme: 'z',
    html:  "<i class='icon-spinner icon-4x'></i>"
});

but if i try running this, from application.html.haml or console, doesn't seem to work

$( document ).bind( 'mobileinit', function(){
  $.mobile.loader.prototype.options.text = "loading";
  $.mobile.loader.prototype.options.textVisible = false;
  $.mobile.loader.prototype.options.theme = "a";
  $.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});

it displayes a shadow instead of my spinner :-? .

What am i missing here?

Thanks :)

Upvotes: 2

Views: 1938

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Solution:

Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/

Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.

First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.

.ui-loader-default {
    opacity: 1 !important;      
}

And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.

.custom-spinner {
    width: 37px !important;
    height: 37px !important;
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
    display: block;
}

Here's a working example:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>

            .ui-loader-default {
                opacity: 1 !important;      
            }

            .custom-spinner {
                width: 37px !important;
                height: 37px !important;
                background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
                opacity: 1 !important;
                display: block;
            }
        </style>
        <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
        <script>
            $( document ).bind( 'mobileinit', function(){
                $.mobile.loader.prototype.options.text = "loading";
                $.mobile.loader.prototype.options.textVisible = false;
                $.mobile.loader.prototype.options.theme = "a";
                $.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
            }); 
        </script>       
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        <script>
            $(document).on('pageshow', '#index', function(){        
                $.mobile.loading( 'show');          
            }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">

            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

Upvotes: 3

Related Questions