I has three page in my jquery mobile apps. For example page1.html->page2.html ->page3.html . I navigate to each other page by using mobile change
Here is the example code
$.mobile.changePage("contact-listing.html",
{
allowSamePageTransition: false,
transition: 'none',
showLoadMsg: false,
reverse: true,
}
This work very nice when page1->page2->page3 . but the problem cum when page3->page2 . All javascript function inside page2 is not able to work. Any solution?
Thanks
Related
Iam using jquery mobile 1.4.5
Here, Page is redirect automatically into last page and redirect count also increasing respectively.
For Page Redirection, I Have used following method but still same issue
$.mobile.pageContainer.pagecontainer("change", "dashboardPage.html");
$.mobile.changePage( "dashboard.html", {
//transition: "pop",
reverse: false,
changeHash: false
});
$.mobile.changePage( "dashboard.html");
My Issue is
For Ex:
I'm in Page 1, from page 1 i'll goto page 2, Then from there i come to page 1. Then again i goto page 2. So this time page2 is automatically redirect to page1.
If i switch between two pages, automatic page redirection increasing 1,2,3 time.
For switching pages, im using above page redirection method.
I am using jquery mobile and I am using $.mobile.changePage( "#newpage"); option when the user authentication is done to move to next page. in the next page I have a logout button and when user clicks on that it has to logout and on success it has to come back to the login screen again.
WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})
in this code onsuccess it is reloading the same url. i tried to change it like onSuccess: $.mobile.changePage( "#loginpage");
but it is not working. any suggestions please
Hi I got it working ..
Instead making a page change I used onSuccess: WL.Client.reloadApp and for all the pages where I am using the load page function i have added changeHash: false so that the same url follows till the end . now it works fine as I expected
I am not sure about that #loginpage bit, but that depends on your multiple pages implementation.
Anyway, try this instead as the onSuccess callback:
$.mobile.changePage("#loginpage", { changeHash: false });
I have a simple function that opens a page with jquery mobile; the page structure is like that:
$(document).on('pageinit','#page', function(){
//all script
});
My function:
function dettail(id) {
//alert(id);
localStorage.setItem("id", id);
var url = "#page";
$.mobile.changePage( url, {transition: "none", reloadPage:true} );
}
This function doesn't load #page; "reloadPage:true" why doesn't work?
ps (I used pageinit and no pageshow because I need that the page is loading only in one case).
Try using the allowSamePageTransition option, i.e.:
$.mobile.changePage(
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
);
Taken from http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/
If I understand your question correctly, you are trying to refresh just a specific #page portion within a multi page layout.
As you have discovered, the $.mobile.changePage does not work like that, it retrieves a fresh copy of the entire page from the server and not just the #page portion you want to refresh. The work around I came up with uses an 'emulated' refresh, for lack of a better term.
The following will walk you through the setup/use of the emulated refresh:
Step 1 - Create an empty page
Place the following html code into the body .. /body section of your multi page layout
<div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div>
Step 2 - Your dettail() function
In the head .. /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place your dettail function, written as follows:
function dettail(id){
localStorage.setItem("id", id);
//emulate a refresh by switching to an empty page div (and then back to this page again)
$.mobile.changePage(
'#empty_page_content',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
}
Step 3 - Setup a pageshow event on the #empty_page_content page
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#empty_page_content", function() {
//console.log('pageshow event - #empty_page_content only');
// return to #page whenever this page is loaded
// The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed
$.mobile.changePage(
'#page',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
});
Step 4 - doing stuff in your #page each time it is displayed
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#page", function() {
//console.log('pageshow event - #page');
// .. do stuff here, such as look for a stored id value and update the content of the #page accordingly
});
});
I successfully tested this solution on a private network (so I don't have a link for you to go look at). Hopefully it will work for you in your project. If not let me know and I'll see if I can help you get it going.
Just remember that it is best to load all head .. /head javascript code that is needed for all your pages on every page (best done by loading the same external js file on all pages) because the js code in the head section is only ever loaded ONCE from the first page that is accessed. You may intend for users to initially browse page1 but unless you can guarantee it your code should work if page 2 or 3 or etc were initially loaded instead.
reloadPage:true works only with page urls, not page ids
therefore:
$.mobile.changePage("#page", {
transition : "fade",
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true
});
will not work
I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.
An example of a link would be: My Interests
So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.
I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.
This is what I have so far:
$("#leaving-section").dialog({
resizable: false,
modal: true,
buttons: {
"I understand, take me there": function () {
$(this).dialog("close");
},
"I want to stay where I am": function () {
$(this).dialog("close");
}
}
});
$('.leaving-section').click(function (event)
{
event.preventDefault();
var $dialog = $('#leaving-section');
$dialog.dialog('open');
});
But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?
Thanks to all who can help. Thanks
I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.
Here's my solution, abstracted away to be suitable for an example.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).
I think this plugin may be help
http://jqueryui.com/demos/dialog/#modal-confirmation
Heres an example of how you can do it:
http://jsfiddle.net/yFkgR/3/
Or to do something besides cancel
http://jsfiddle.net/yFkgR/4/
You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.
also to use ajax to load the html you can take a look at:
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing
$("<div>");
it will create the closing tag too. Or as suggested in the post you can also use
$('a.ajax')
I have a page that loads a jQuery UI Dialog with an iFrame in it. This iFrame has a login form, however I want a link in this iFrame that says "click here if you are a member" that they can click that will redirect the PARENT to a different page (and thereby close the modal).
Right now any links in the modal (and so in the iFrame) just redirects the iFrame)
Here is the code that calls the modal with the iFrame in it:
$(document).ready(function() {
$("#modalIframeId").attr("src","http://site.com/wordpress/register-now/?the_email_address=<?php echo $the_email_address; ?>");
$("#divId").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
dialogClass: 'no-close',
height: 570,
width: 500,
title: 'Sign Up',
close: function(event, ui) { window.location.href = window.location.pathname; }
});
});
This is all within a Wordpress framework and the page that is called above has the form in it (that works) and the is where a need to have a link to redirect the parent to another page.
Any thoughts?
Thanks! Chris
I guess sometimes the old=school "lo-tech" way is the one we often forget. Found this thread:
Stack Overflow
Which reminded me that target="_top" would do what I needed...and it did. Tested in FF and Android and works well in both (wider testing expected to work well too).
Thanks