{{ See demo }}
Page 1 is a jquery mobile page.
Page 2 is a page with jquery mobile tabs and navbar widget.
Page 3 is a page without jquery mobile tabs and navbar widget.
The only structural difference between 2 and 3 is the presence of data-role=tabs.
A) When each of them are run as is (you type the url on address bar), everything is fine.
B) When you click from page 1 to page 2,
i) js error: Uncaught SyntaxError: Unexpected token < VM10189 jquery-1.11.1.min.js:2
ii) the code outside <page/> on page 2 is run, as you see the alert.
C) When you click from page 1 to page 3, everything is fine (no js error, code outside <page/> not run).
What is wrong?
Somebody gave an answer on the same question asked elsewhere. I checked it working. Look for
$.widget( "ui.tabs", $.ui.tabs, {
....
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?
I am working on social plugins integration on my local site and i m trying to add twitter follow button onto it...but it is behaving differently in different browsers..Normally its works in the page...i have a slider inside which it is having this code...thats where it showing its case...i dont know why the follow button is rendering differently in different browsers...
the code i used to render the follow button,
<a href="https://twitter.com/Test" class="twitter-follow-button"
data-show-count="false" data-size="medium"></a>
and the script here,
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Similar codes i tried,
<a href="https://twitter.com/Test" class="twitter-follow-button"
data-show-count="false" data-size="medium">Follow #Test</a>
And this one too,
<a href="https://twitter.com/Test" class="twitter-follow-button"
data-show-count="false" data-size="medium">Follow</a>
I have tested this code with the following browsers,
1.Firefox
2.Opera
3.Chrome
4.Safari
1&2 works properly but 3&4 it not working properly...
1&2 its shows Follow #Test
3&4 is showing only Follow
Whats the problem?Why the #Test is left out in 3&4 browsers....or does my code need some changes...or is it the browser problem...
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/
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();
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