In webkit, jquery mobile is giving me issues.
I link to an internal page and when arriving upon that page, both '<div data-role="page">' elements have the ui-page-active class which makes both of them display. This is not the case with Firefox. Firefox correctly removes that class so that the first page's "page" is hidden.
I'm using jQuery 1.7.1,
jQuery Mobile 1.0,
jQuery default css theme,
Latest Safari, Chrome, Firefox versions.
It also does not work in the iPhone emulator.
Example:
http://chrispaul.ws/mobile.html
If you go directly to http://chrispaul.ws/weather.html or http://chrispaul.ws/deals.html then they display fine.
Try adding data-rel="external" attribute to the anchor tags. Worked for me.
Related
I developed a project in jquery mobile which have fixed header. its working fine in laptop browser but when I run in mobile browser then after browse some pages my mobile getting stuck because jquery mobile keep cache of previous page. so to remove previous pages I added below code
$(document).on( "pageshow", function( event, data ){
$('div[data-role=page]:hidden').remove();
});
It also worked fine but now when i clicked on a link first time it remove previous page data as well padding-top from ui-page which was added for fixed header. now if I goes to next page and again comes on this page its work fine.
Please suggest, Thanks!!!
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
This is a really weird issue. I've first read the answer from Maayan Glikser on this question which looked similar : Uploadify inside Jquery UI Dialog => Chrome & Opera bugs
It didn't work at all. Let me explain my problem.
I have 3 different Uplodify (Flash version) controls on my website (not on the same pages), only one of them doesn't work and it's the one that is inside a JQuery UI Dialog. Basically, the button is visible but not clickable. The problem occurs only for this particular control, the others behave normally.
So I tried adjusting the z-index inside the javascript, it didn't change anything. Then I tried adding manually (through firebug's "edit html" feature) a <br /> at the beginning of the container generated by uploadify and bam, the button became clickable
I then tried adding the <br /> on page load with $("#fmuploader").prepend('<br />') and nothing happened, the line break was added but the button wasn't clickable. When I added manually a blank space it became clickable again.
I believe there is some kind of paint event that gets triggered when you manually edit the page from firebug which makes the button suddenly become clickable, but I'm really wondering if I can make it finally work as intended without asking all my firefox-using visitors to install firebug :)
It is really hard to explain so I have setup a small test page at this address : deleted (edit: the test page is now offline on the production environment and is no longer reachable)
This reproduces exactly the problem I have.
Load the page, click the link to open the popup, open firebug, find the uploader's container <div id="fmuploader" class="uploadify" style="height: 30px; width: 120px;"> and just add a blank space after the opening tag. The button becomes clickable.
The problem occurs on Firefox 17 with no add-ons except firebug and Flash 11. The problem does not occur on IE 7/8/9 and Chrome on the same machine.
Update: I tested it with Firefox 15 and wasn't able to reproduce the bug.
I had a similar issue, but found that updating Firebug to version 1.11 sorted it.
It was only seemed to be the issue in verstion 1.10.
Looks like a change in the Firefox 17 security model means that minified version of jQuery breaks when using Firebug. Plenty of jQuery based stuff has stopped working for me in Firefox 17 unless I disable Firebug.
https://blog.mozilla.org/addons/2012/08/20/exposing-objects-to-content-safely/
https://developer.mozilla.org/en-US/docs/XPConnect_wrappers
I have a strange task, I need two types of popup windows for my site,
the first one is a normal popup, for desktop version of site
and another one is for mobile version of site
the question is: is it possible to enable jquery.mobile once I show popup for mobile version
and disable jquery mobile once I close the popup ?
(For your information: I do not use an iframe for my popups)
I found strange way how to enable jquery.mobile once I need it
but in this case I can't disable jquery.mobile
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
setTimeout(function(){
$.mobile.initializePage();// run jquery.mobile in 15 seconds for example
},15000);
You could alter the CSS of jQuery Mobile to add a "flag" so it only applies to elements within a specific container.
Here is a sample jQuery Mobile CSS rule declaration (just the selector):
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit
If you change this to:
.my-custom-class .ui-li-has-arrow .ui-btn-inner a.ui-link-inherit
Then the CSS will only be applied to elements within an element with the my-custom-class class. This means that you can have a regularly styled page most of the time, but when you want to use jQuery Mobile styles you just have to show your dialog in a container with the my-custom-class (or whatever you want to name your class).
I have 2 application layouts: application.html.haml and application.mobile.haml. But when I switch from mobile to the non-mobile version the mobile layout is still used for the first load. In Firebug console I see that the non-mobile view was properly returned, however the browser and the Firebug HTML tab show the mobile layout. Any idea what's going? It's fine after a refresh.
The issue turned out to be caused by JQuery Mobile.
I found the answer here: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
JQuery Mobile doesn't do full page reloads unless it's told to, so although the full html was returned, JQuery Mobile just replaced the page portion.
The key portion from the docs is:
"It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts."
Recently, I encountered a similar problem.
In my case, Rails4's turbolinks suffered. Similarly as JQuery Mobile, turbolinks only updates the body part of a full page without updating the head part of the html when an intra-site link is clicked. I simply removed the require line for turbolinks in my application.js and the problem disappeared.