Loading icon is not showing in jquery mobile application -



Loading icon is not showing in jquery mobile application -

i have tested code in http://api.jquerymobile.com/loader/ .

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>loader demo</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div role="main" class="ui-content"> <div data-role="controlgroup"> <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">default loader</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="text loader" data-icon="arrow-r" data-iconpos="right">text only</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="loading theme a" data-icon="arrow-r" data-iconpos="right">theme a</button> <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="loading theme b" data-icon="arrow-r" data-iconpos="right">theme b</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="custom loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-a ui-corner-all'><img src='../_assets/images/jquery-logo.png' /><h2>is loading ...</h2></span>" data-iconpos="right">custom html</button> <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">hide</button> </div> </div> </div> <script> $(document).on( "click", ".show-page-loading-msg", function() { var $this = $( ), theme = $this.jqmdata( "theme" ) || $.mobile.loader.prototype.options.theme, msgtext = $this.jqmdata( "msgtext" ) || $.mobile.loader.prototype.options.text, textvisible = $this.jqmdata( "textvisible" ) || $.mobile.loader.prototype.options.textvisible, textonly = !!$this.jqmdata( "textonly" ); html = $this.jqmdata( "html" ) || ""; $.mobile.loading( 'show', { text: msgtext, textvisible: textvisible, theme: theme, textonly: textonly, html: html }); }) .on( "click", ".hide-page-loading-msg", function() { $.mobile.loading( "hide" ); }); </script> </body> </html>

first created phonegap app using phoegap create command.then added css file in (//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css).added js files in js folder(//code.jquery.com/jquery-1.10.2.min.js,//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js).then ran application using phonegap run android.after installed apk in mobile.the loading icon not showing well.the white loader within black round not displaying.can help me prepare ?

i have same issue.i overcame putting image folder in css folder contains ajax-loader.gif , default icons.

jquery jquery-mobile cordova

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -