I am building a site using JQuery mobile 1.4.5. It consists of 3 pages (index.html, blog.html, blog-category.html). When the home page loads, there is a link to the blog page. I am using the following code to pass the variables:
$.mobile.changePage("blog.html", {
dataUrl : "blog.html?user=" + travel_user_id,
data:{ user: travel_user_id },
transition: "slide",
reverse: false,
});
This works and pulls up the blog page.
On the blog page I have a back button:
back
Which takes you back to the homepage. If I click the blog link again, it slides left twide, so it transitions to the blog page, then transitions again. If I click the back button, then the blog button again, it doubles, so slides left 4 times.
Related
I use multipage (on the same page) with jquery mobile and $.mobile.changePage transition slide.
Obviously I need to go back on pages that I already open via changePage function.
It works perfectly on Firefox but not on safari or chrome.
On safari and chrome when I come back on a page that I already opened then, the page is displayed few milliseconds and the all the page is hidden. If I use "alert('stop');" just after the changePage function, then the page is displayed, "stop" is displayed, the page is still displayed until I close the popup "stop", then the page is hidden.
I found the following code on another page linked to transition issue and you will see how it happens.
if you go back on page that has been open once, then the page is hidden:
http://jsfiddle.net/GYAB7/2/
FYI: if I use
$.mobile.changePage( "#mypage", {
transition: "none",
reverse: true,
changeHash: false
});
instead of
$.mobile.changePage( "#mypage", {
transition: "slide",
reverse: true,
changeHash: false
});
for the transition parameters, then it works fine (but it is not what I want)
Thank you.
PS: page where I found the code link
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.
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>