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
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.
I have a few simple jquery mobile pages set up. But when I navigate from one page to another, the extra CSS I added to the destination page doesnt take affect.
jQuery("#home").click(function(){
jQuery.mobile.changePage( "/home.html", { transition: "slideup", changeHash: false });
});
I looked around and found this
$('#form').trigger("reset");
But my page is mainly HTML right now so Im not sure how to reset all the elements in one go. Im pretty sure the transition is calling the problem.
Would anyone have any suggestions?
I have two pages .I am able to show page on clicking the button but i need to show same content as a dialog box on same screen without changing the screen. I need to show dialog box having same field in page .Here is my code in fiddle. on clicking the add button new page is open but i need the dialog box.
http://fiddle.jshell.net/ravi1989/nLJR7/
Are you looking for this?
$.mobile.changePage($("#UserSettingScreen"), {
transition: "slide",
reverse: false,
changeHash: false,
role: 'dialog' // you can use role: 'dialog' to open a dialog
});
Here is jsFiddle demo.
UPDATE
1) You can close a dialog programmatically by calling dialog('close') method like so
$("#case_dialog_cancel").on("click", function(){
$("#CaseInformationScreen").dialog('close');
});
Here is updated jsFiddle.
2) You can theme an overlay. Read more about overlayTHeme. If you for some reason want to get rid of the overlay completely or make it transparent - google for hakish ways. Here is one link Transparent jQuery mobile dialogs
We have a very jQuery/Javascript heavy web app with jQuery Dialogs in use all over the place, but one particular dialog is having issues in Safari on Windows. It's created like so:
$('#cnav-dispatch-center-window').dialog({
close: stateObject.DeviceOptions.dispatchPin_dispose,
resizable: false,
width: 613,
height: 467,
dialogClass: 'dialog-window-alertedit',
show: 'fade',
hide: 'fade',
open: stateObject.DeviceOptions.RefreshSelection
});
We don't do anything special for this dialog than any other dialog. This dialog exhibits weird behavior:
It's not visible
It still intercepts clicks
It's still draggable if you can find the title bar
It has a really high z-index (10,000+)
If I remove the z-index, the dialog will display. I've tested that with the developer tools. I don't know what is setting the z-index and I'm not sure how to unset it. As long as the z-index is present, regardless what the value of it is, it won't display. It works fine in every other browser.
For anybody running into this problem:
I don't know why, and kudos to anybody who can explain it, but adding:
z-index: auto important;
To the dialog's class (in my example dialog-window-alertedit) fixes the issue for me. What's strange is that Safari continues to report that the z-index is 10,000+ but my dialog is displaying so I'm calling it close enough.
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>