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.
Related
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.
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.
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.
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>
I have an html page which has some html form elements and jquery
if I open the html page as a standalone page, everything seems fine, however, if I open the page as jquery ui dialog whithin an aspx web forms page (I get the contents of the html page through jquery ajax method), the input elements text and textarea are not enabled, but select lists are enabled.
The problem is coused by modal property.
If the modal is false, then the fields are editable
Any ideas why this happens this?