Basically creating a mobile app using phonegap/cordova and jquery mobile, I need to land user on a particular page from status bar notification but it shows default page for a while and go to the other page (I want to show) and ends up with default page loaded again.Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/style.css" />
<title>App name</title>
</head>
<body>
<!--***************************Start Welcome Page*********************************** -->
<div data-role="page" data-theme='b' id="welcome" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************End of Welcome page********************************************-->
<!--***************************Start Login Page*********************************** -->
<div data-role="page" data-theme='b' id="login" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************End Login Page*********************************** -->
<!--***************************Start chat Page*********************************** -->
<div data-role="page" data-theme='b' id="chat" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************end chat Page*********************************** -->
<script type="text/javascript" src="cordova.js"></script>
<!-- Jquery mobile -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Jquery mobile -->
<script type="text/javascript" src="js/PushNotification.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript
function onNotification(e) {
switch( e.event )
{
case 'registered':
break;
case 'message':
if (e.foreground)
{ // Status bar notification if app is in foreground
navigator.notification.beep(1);
}
else
{ // after clicking on status bar notification
$.mobile.changePage('#chat');
}
// notifications when app is open
break;
case 'error':
//$("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
break;
default:
//$("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
break;
}
}
So it shows welcome page and go to the chat page and again get back to welcome. Tried to set timeout but didn't help.
Any solution?
Please see if it help for you, i have used this code in phonegap android it is working fine.also check the $.mobile.changePage is deprecated from jquery mobile 1.4
onNotificationGCM: function (e) {
var open = false;
switch (e.event) {
case 'registered':
break;
case 'message':
if (e.foreground) {
//App.alertMsg("New message received", "Notification");
}
else {
open = true;
}
break;
case 'error':
// App.alertMsg(e.msg, "NotificationFail");
break;
default:
//App.alertMsg("Unknown", "Notification");
break;
}
if (open) {
$.mobile.pageContainer.pagecontainer('change', "#chat");
}
}
Related
So I hope I'm asking this correctly.
I have content from a php file being loaded into an html page. The php file contains the info for a collapsible set. The popup does not work for the data sent back from the php file once i change the html of the popup div.
Is this because the content did not exist when the page was initially loaded? If this is the case, how do I go about loading this content. I'm really trying to keep the php off the main html pages if at all possible. Although I'm starting to realize this may not be possible. Any help with this would be greatly appreciated.
Here's my html page (this page is loaded after an initializing page is submitted)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>theClipboard: Count</title>
<link rel="stylesheet" href="../inc/stylez.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">
<div data-role="header" data-position="fixed" class="ui-grid-c">
<div class="ui-block-a">
<a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
<div id="loadCatMenuHere">
<!--<div id="categoryMenu" data-role="popup" data-theme="b">
<p>is it working</p>
</div>-->
</div>
</div>
<div class="ui-block-b">
<p>location menu</p>
</div>
<div class="ui-block-c">
Go Back
</div>
<div class="ui-block-d">
<p>validate counts</p>
</div>
</div>
<div data-role="main" id="countPageContent">
<h3> content goes here</h3>
</div>
<div data-role="footer" data-position="fixed">
<p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->
<script>
$(document).ready(function(){
console.log("page 2 loaded");
getCategoryMenu();
function getCategoryMenu() {
var getCatMenu = $.post('categoryMenu.php');
getCatMenu.done(function (data) {
console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
$('#loadCatMenuHere').html(data);
console.log("#category menu data: " + data);
});
getCatMenu.fail(function (data) {
console.log("failed at getting cat menu:");
});
}
})
</script>
</body>
</html>
here's my php file i'm pulling from
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<?php
include("../inc/connect.php");
session_start();
$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);
$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";
while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
<h3>" .$family ."</h3>
<ul><li>test</li><li>test2</li><li>test3</li></ul>
</div>";
}
echo "</div></div>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference.
I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval.
(some pseudo code):
if (myDiv is not undefined) { do stuff } else
{ setInterval(thisSameFunction, 2000); }
I am following the jsfiddle. The code sample is working fine on jsfiddle, However I am unable to make it to work in my cordova mobile app.
I have placed the javascript code in home.js in js folder.
home.js:
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
home.html:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script type="text/javascript" src="js/home.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 2</p>
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
</html>
I can't swipe to change the pages. Could someone point me in right direction ?
Seems you are missing the 'ui-page' class from your HTML.
<div class="ui-page" data-role="page" id="article1">
Is there any method to call/show Dialog or popup before page load using jquery Mobile?
I want to get some input before page load and according to that input next page will be loaded
To load a dialog or a popup before showing a page, you need to use seTimeout. if you call it without a delay, it will open and close at once.
$(document).on('pagebeforeshow', '#pageID', function() {
setTimeout(function () {
$('#popupID').popup('open');
}, 100); // delay above zero
});
Similar issue.
There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog.
Working example: http://jsfiddle.net/Gajotres/dj3UP/1/
As you can see it in my example this is a pure HTML solution. First page data-role attribute was changed to dialog.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="dialog" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input type="text" value="" id="some-input"/>
<a data-role="button" id="some-button" href="#second">Next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try Following:
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
Refere Link:
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
I have three pages A,B,C and i want to swap right from A to B then go back, and swap left from A to C then go back ...
I'm new to jquery mobile and javascript, I've tried a lot of scripts but non of them did the job,
here is my js and html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.1.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.4.1.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" >
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="main" class="ui-content">
<p>page1</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>page2</h1>
</div>
<div data-role="main" class="ui-content">
<p>page2</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>page3</h1>
</div>
<div data-role="main" class="ui-content">
<p>page3</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
</body>
</html>
js
<script>
$(document).on('swiperight swipeleft', function(event) {
if (event.type == 'swiperight') {
if(id == 'page1'){
$.mobile.changePage("#page3");
}
else
{
$.mobile.changePage("#page1");
}
}
if (event.type == 'swipeleft') {
if(id == 'page1'){
$.mobile.changePage("#page2");
}
else
{
$.mobile.changePage("#page1");
}
}
});
</script>
Add in page header of #page2 and #page3
<a data-rel="back" href="#" data-transition="slide" direction="reverse">Back</a>
Javascript
$(document).on('swiperight swipeleft', "#page1", function(event) {
if (event.type == 'swiperight') {
$.mobile.changePage("#page2");
}
if (event.type == 'swipeleft') {
$.mobile.changePage("#page3");
}
});
Edit: I see the issue is with using live instead of on. I fixed that however, can't get the second timer to fire..
Error: Object [object Object] has no method "popup"
I am trying to implement a client side session time out using jquery mobile. My code is at: http://jsfiddle.net/83BSW/5
Appreciate any insights..
Here is the code for convenience:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- Application specific -->
<script>
var first_timer = 2 * 1000;
var second_timer = 3 * 1000;
var down = -1;
function initTimer() {
down = setTimeout(processTimeout, first_timer)
}
function processTimeout() {
down = setTimeout(logout, second_timer);
$.mobile.changePage('#timeout1',{transition:'slide', role:'dialog'});
//alert ("Timeout of first timer, timerid:" + down );
}
function logout() {
$("#timeout").popup('close');
$.mobile.changePage('#timeout2',{transition:'slide', role:'dialog'});
alert("You are logged out");
// window.location = "http://www.google.com"
}
function resetMyTimer() {
if ( -1 != down )
clearTimeout(down);
alert("Restarting timer");
initTimer();
}
$("#loadingpage").on(function() {
resetMyTimer();
});
initTimer();
</script>
</head>
<body>
<div data-role="page" id="loadingpage">
<div data-role="header" data-position="fixed">
<div class="headerlogo"> </div>
<h1> Test </h1>
</div>
<div data-role="content" >
<div id="ssagov">
<h1> Hi there </h1>
</div>
<input type="button" data-shadow="false" data-corners="false" value="Next" />
</div><!-- /content -->
</div><!-- /launch page -->
<div data-role="page" id="timeout1" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout1</h1>
</div>
<div data-role="content">
Your session will timeout in 2 mins.
</div>
</div>
<div data-role="page" id="timeout2" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout2</h1>
</div>
<div data-role="content">
Your session has timed out
</div>
</div>
</body>
</html>
Finally I fixed the issue, instead of popup, I should be using dialog. Here is the working version: http://jsfiddle.net/83BSW/6