I have 2 Jquery Mobile pages (Login and Home). When the user first launches the application (phonegap) the system check for a local storage variable ('ses_already_login). If the variable is set then the system should not show the login page instead it should show the home page. If the variable is not set then it should show the login page.
Both login and home page contains a header and footer with some form controls which are loaded dynamically using jQuery.
I am doing something like below and I see a blank grey screen. The condition gets through and could see the alert message after that I goes to a blank screen.
$(document).on("pagebeforeshow","#pg_login",function(){
if(checkAlreadyLogin()){
alert('I am inside');
$.mobile.changePage("#pg_home");
e.preventDefault();
}
});
I also aware that changePage is deprecated. So, can someone help me how I can redirect/change to the home page.
Solution 1:
You need to use pagecontainerbeforechange in that case not any other event. Because at this stage, you can alter toPage property to redirect user to any page you want.
That event always fires twice and returns toPage which holds either url (string) or jQuery object of target page. However, on first run it returns a jQuery object twice. When it fires for the first time, you have to make sure that toPage is an object and absUrl is undefined, in addition to your condition.
$(document).on("pagecontainerbeforechange", function(e, data) {
if(typeof data.toPage == "object" && typeof data.absUrl == "undefined" && !condition) {
data.toPage = $("#login"); /* change to page with ID "login" */
}
});
Demo
Solution 2:
Another solution is to listen to mobileinit event to check whether user is logged in or not, and then change the position of target page to make "first" page in DOM.
$(document).on("mobileinit", function (e, data) {
$.mobile.autoInitializePage = false; /* optional - stop auto-initalization */
if (!condition) {
$(function () {
$("#login").prependTo("body"); /* make "login" page first child of "pagecontainer" (body by default) */
$.mobile.initializePage(); /* optional - manual initialization */
});
}
});
You can delay auto-initialization of the framework if you want, however, jQuery functions .prependTo should be wrapped in $(function() {}); or .ready() because mobileinit fires before jQuery library is ready.
Demo
Related
I'm using jquery mobile v1.3.2
For some reasons I want to set an global pagechange event to prepare all of my pages :
var Front = {
initDom : function($dom) {
// here i can bind some events in my page
$(".someButton",$dom).bind("tap",function(){
alert("some actions");
});
// etc.....
});
}
$(document).on("pagechange", function(event, data) {
Front.initDom($(data.toPage));
});
This works well. But it is triggered at each page change. And some times it will init the same event twice and that will lead to some bugs.
Now i have tested to do it with the event pageinit or pagecreate but both are triggered before the page is ready and $("ui-page-active"); is empty.
I have though about some setTimeout, but that's definitively a bad idea.
I have also though to init everything at the first pageinit and unbind it. But ajax called page wont be bound.
It there some good workarround ?
You can use pageinit and then get the id of the page from the event target object:
$(document).on("pageinit", function(e){
alert(e.target.id);
});
DEMO
I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
I am using change page event in jquery mobile with multiview plugin when page is change the function calling two times means if am using alert it shows same alert two times and when I click on back button some it shows the page but when I do this frequently it shows error in plug in file can any one help me
Do you mean the pagebeforechange event?
This event is triggering twice as designed.
The difference between this two calls is the data's toPage attribute:
jQuery(document).bind('pagebeforechange', function(e, data) {
var toPage = data.toPage;
if(typeof toPage === 'string') {
// -- triggered first
// -- toPage is a string containing the page`s url
} else {
// -- triggered second
// -- toPage is an jQuery collection object containing the page
}
});
I'd like to turn off the accordian animation during page load, and then turn it back on after the page is loaded.
Basically I've got multiple forms inside the accordion sections and when submitted the page gets reloaded and the relevant section is reloaded. But during the reload the animation is triggered which looks a little ugly. But I like it when the page is not being loaded.
How do I achieve this effect?
To answer my own question. The following worked.
What I found was that when creating the accordion object, you define no animation first.
Then, select what section you want displayed at load time. In my case my Kohana controller
retrieves this from a session variable set by the previous form submission. It then gets passed into the template containing this code.
After thats done, set the animated setting to slide and it's all go from there.
$(function(){
/* Create the accordion object first */
$("#accordion").accordion({ animated: false, header: "h3", autoHeight: false, clearstyle: true, collapsible: true })
/* get the section to load. This is set by the previous form submission and saved to a session variable. */
var id = <?php echo $sectionId; ?>;
/* activate on sectionId=0 causes it to close (which is by design) this gets around it */
if (id != 0) {
$("#accordion").accordion("activate", id);
}
$("#accordion").accordion("option", {animated: "slide" });
});
If the page reloads after a submission then the whole JS script will be reloaded as well, therefore, any variable containing any kind of data will be reset to the default value. The only way I can think this could be done is having a variable set by your server side languaje in the javascript script after it receives a submission.
In JS when you load the page do
var = false; //false = no open tabs
$( ".selector" ).accordion( { ..., active: var } );
On submission make PHP, assuming you're using it, do:
$my_tab_number = n;
var = <php echo $my_tab_number; ?>;
So when the page gets reloaded it will be opened in the tab you want.