I am new to Jquery Mobile and attempting to learn it as I redevelop this mobile site. So I am doing all my navigation with different divs with data-role="page". and navigating with the #pagename. My question being doing my navigation this way how do I use the loading message and wait to make the transition until the next page is loaded? I tried putting the $.mobile.pageLoading() in the onClick attribute of the link but that didn't work.
Using JQM 1.0 beta 1
//show
$.mobile.showPageLoadingMsg();
//hide
$.mobile.hidePageLoadingMsg();
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/methods.html
http://jquerymobile.com/test/docs/api/methods.html
Update:
This method is also the accepted way to do it in the official 1.0 release.
http://code.jquery.com/mobile/latest/demos/docs/api/methods.html
mobile.showPageLoadingMsg ()
Show the page loading message, which is configurable via $.mobile.loadingMessage.
Example:
//cue the page loader
$.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg ()
Hide the page loading message, which is configurable via $.mobile.loadingMessage.
Example:
//cue the page loader
$.mobile.hidePageLoadingMsg();
The documentation is here (at the bottom) http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html but yeah it's a little vague on examples.
This might help you out: https://github.com/jquery/jquery-mobile/issues/1397
In jQuery mobile 1.4.5 the only thing that helped me is:
$('.ui-loader').hide();
Related
I'm having an issue with the page changes... In phonegap it works once and on chrome it doesn't work.
This is the code I use to load an external page in the dom and open it. After moving away it get's removed from dom.
function changeToMypage() {
$.mobile.loadPage('http://mydomain/mypage.html', {
prefetch: "true"
}).done(function() {
$.mobile.changePage('#mypageid');
});
}
$(document).on("pagehide", "#mypageid", function() {
$(this).remove();
});
On phonegap it works the first time I navigate to the external page but when I navigate to a local page and back to the external page it stops working.(Reloads the current page in stead)
In chrome it never works. It seems to try and load file://indexpage.html#mypageid in the changepage
but this doesn't work because I'm using single page navigation.
I don't understand how the pageload appends the mypage.html to the dom to navigate to it with the pageid?
Using jQuery.mobile.navigate() solved my problem but this is a low level api method according to the JQM docs. Maybe someone could give some extra information why it works with this method and not with changepage?
The Loading message in JQuery Mobile 1.1.0 doesn't seem to be working. Here is the JSFiddle for the code.
When I use version 1.0b2, it works as expected. Is this a bug in 1.1.0?
It is not a bug. Latest Jquery supports more config options. You can define the laoding message theme etc.
Refer the documentation here
Sample code
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTheme = 'a';
$.mobile.loadingMessageTextVisible = true;
});
Save above mentioned code in a js file (e.g. config.js ) and import it before importing jquerymobile framwork.
Good luck.
I'm developing a mobile application using jqm and phonegap.
I've created a multi-page html file. There are two jqm pages with ids 'myPage1' and 'myPage2' inside single html file.'myPage1' contains a list of items.On click of list item i've to issue an ajax call and show the response data on 'myPage2'.
After getting response from ajax call i'm calling jqm changePage function like:
$.mobile.changePage('#myPage2', {
transition : "slide",
reverse : false,
changeHash : true
});
On pagecreate event i'm making some changes in DOM which causes page display size to increase. Everything works perfectly fine on pc browser but on android the page size remains same as screen size i.e. i cannot scroll down to see full page content.
I've tried calling $('#myPage2').page() and $(document).resize() after updating DOM but all in vain.
The problem only occurs when changing page using jqm ajax based page loading. If i create a separate html file, declare 'myPage2' in it and instead of calling $.mobile.changePage, use rel='external' as link attribute in 'myPage1' list item, the problem resolves. I don't even have to call $('#myPage2').page().
But i want to use jqm Ajax based page loading as i want to leverage jqm page transitions.
Following are my config details:
Jquery verison - 1.6.2
Jquery Mobile Version - 1.0 Beta 2
Android version - 2.2.2
Android Browser : Mozilla/5.0 (Linux; U; Android 2.2.2; hd-us; eeepc Build/FRG83G) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Any pointer would be really helpful as my work is gated due to this.
Thanks in advance.
Ajay
instead of .resize(); or .page(); try the new trigger option:
.trigger('create');
Here are the release notes for Beta2:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Show Page Loading Spinner on Ajax Call in jQuery Mobile
have a JQuery mobile UI, how to show loading when page is not fully showed?
//show
$.mobile.showPageLoadingMsg();
//hide
$.mobile.hidePageLoadingMsg();
http://jquerymobile.com/test/docs/api/methods.html
This API changed again in JQM 1.2. In that version $.mobile.loading('show') and $.mobile.loading('hide') should be used instead.
Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html
$.mobile.pageLoading (method)
Show or hide the page loading message, which is configurable via $.mobile.loadingMessage.
Arguments:
Done (boolean, defaults to false, meaning loading has started). True will hide the loading message.
Examples:
//cue the page loader
$.mobile.pageLoading();
//hide the page loader
$.mobile.pageLoading( true );
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function