Context: asp.net MVC 3 app. Page1 is a mobile page using jquery mobile and it contains a link to Page2 which is a normal page which uses a specific stylesheet.
Issue: on my phone, when I click the link on Page1, it goes to Page2 (with a horizontal sliding effect) but the stylesheet is not loaded. If I force a reload of Page2 then the stylesheet is loaded. Also, on the iphone, if I press the link to show the "open in new window" button and click it, it loads well in the new window.
Debug: if I simulate this on a desktop computer (by forcing mobile views) the same happens. The back button does not even work well. When loading Page2, Firebug, in the Net tab, displays as if I was still loading Page1 (it displays Get Page1) even if this is the text of Page2 that appears (without the css), and it doesn't show a line saying that it tries to load the css.
Update: I was using 1.0. I just tried the latest 1.1 and this is even worse. When clicking on the link, the title for Page2 appears in my firefox tab, the address bar shows the new url but Page2 is not displayed (even if Firebug shows it loads something).
To turn off AJAX page transitions:
$(document).bind("mobileinit", function () {
$.mobile.addBackBtn = false;
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
EDIT
To change single links to non-ajax or vice verca you can use this code:
jQuery:
$("a").attr("data-ajax", "false");
Or you can simply do <a href="somepage" data-ajax="false" >Link</a>
Related
Weirdest thing, using JQuery Mobile 1.2.0. When a user travels to a page with a collapsible, clicking anywhere inside that collapsible div except on buttons adds ui-mobile-viewport-transitioning viewport-slidefade to the body, which is freezing the pane and hiding the scroll bar, and snapping the view to the top of the page. Before click :
<body class="ui-mobile-viewport ui-overlay-c">
After clicking inside a collapsible (Not anywhere else):
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-slidefade">
If I f5 and reload the page, it doesn't do this anymore. Only after following a link.
Example of a link that leads to the page :
<a href="ax_mer_view.cfm?MERID=XXX" class="ui-link-inherit">
<h3>Info here
</a>
This is happening on every single page across our entire mobile application, no matter the browser. iOS, Android, Chrome on PC, Firefox on PC, etc.
For a JQuery Mobile site, I need an new image to load on page navigation. The image only displays on the homescreen.
So for example, you load m.smellyeggs.com which has image_A.png as the top banner. You select menu item 1, then press back and now image_B.jpg is showing as the top banner.
I was able to get it working using cookies. I get an array of potential images, then use cookies to traverse the array. This works on page reload, but any cache loading of a page (e.g. href="/" or using "Back" in mobile or the browser) would not call the javascript. Thus the image would not actually alternate.
var images = new Array();
<% banner_mobile_uris( controller.conference ).each do |url| %>
images.push( "<%= url %>" );
<% end %>
inc_banner_cookie();
load_banner();
To fix this, I use the following code, which deletes the image, forcing an image refresh whenever the homepage is loaded.
$( 'a' ).live( 'click', function( ev ){
var banner = $('#m_banner').load(htm_file);
banner.empty().remove();
});
This code removes the "Back" button from any subsequent page navigation that occurs.
Well that's unacceptable! Any advice on a better approach? I'd rather not implement my own "Back" button unless that is absolutely necessary.
Thanks for reading (and hopefully helping ).
The answer lies in using pageinit to detect successful JQuery Mobile page loads...
$(document).on('pageinit', function(){
inc_banner_cookie();
load_banner();
});
This will not disable the back button. And cause image reloads on any type of page navigation. Well almost any type...
As it turns out, this appraoch is fragile when AJAX redirects occur, and subsequent pageinits may not work. See my question concerning this issue.
I have the following problem: When I use either the jQuery Mobile back-button or the changePage function of jQuery Mobile to return to the previous page it doesn't show any data on the page. All javascript gets executed but page remains empty..
Any ideas?
This was a problem I faced when I was removing pages from the DOM via javascript to prevent the first page from sticking into the DOM. All it would show was a blank page when clicking the back button.
Are you removing previous pages from the DOM in your javascript?
And when you say the page "remains empty", is it just the data within the content tags, or is nothing appearing on the page at all (including jquery mobile enhancement markup)?
You should post your changePage function here so that I and others can help you out.
Im using JQueryMobile v1.2.0:
The flow of interaction with the webapp:
home page is entered in browser address bar. The home page have link to page1.
Clicking the link for page1 will load the page via Ajax.
page1 have link to home page. Clicking the link for home page will go to home page.
What I want is to load the home page via ajax when clicking the link in page1. I wasn't loaded via ajax since it is the first page that was loaded.
I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?
Just hide your div via your CSS file:
#dialog {display: none}
This will not affect its actual display when the dialog is opened.
I tested to be sure, and this method worked with jQuery UI 1.7.2
Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.