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
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); }
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");
}
}
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");
}
});
I'm developing a mobile app that uses json to retrieve database data. Using my mac browser I can get the requested data and the alert and display it on a new mobile page. I can't get it to work on safari on ipad or iPhone. The page loads but no data.
Any hints would be appreciated.
HTML code
<!DOCTYPE HTML>
<html>
<head>
<title>tourmap_main.jpg</title>
<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/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="js/treedetails14.js"></script><div data-role="page" id="firstpage" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Winter Hill Garden Tour</h1>
</div>
<div data-role="content" id="mainpage" data-theme="a">
<div id="area1Button">AREA 1
</div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</div>
<div data-role="page" id="area1" data-add-back-btn="true" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Garden Tour - Area 1</h1>
</div>
<div id="area1content" data-role="content">
<div id="tree105" class="treebutton">Button 1
</div>
<div id="tree106" class="treebutton">Button 2
</div>
</div>
</div>
<div data-role="page" id="detailsPage" data-overlay-theme="a">
<div data-role="header" data-add-back-btn="true">
<h1 align="left"><span>Tree information -</span> <span id="treetitle"></span></h1>
</div>
<div id="treeDetails" data-role="content">
<div id="treedescription"></div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</div>
And my script:
$(document).on('pagebeforeshow', '#firstpage', function(){
$('.treelink').live('click', function(){
var serviceURL = "http://winterhill.com.au/gardentour/services/";
currentId = $(this).attr('data-id');
$.getJSON(serviceURL + 'gettree.php?id='+currentId, function(data) {
var tree = data.item;
alert(tree.tree_description);
$('#detailsPage').append("<p>item1="+tree.tree_description +"</p>");
});
});
});
Here's the basic code setup:
http://jsfiddle.net/VgxnQ/1/
Try this code:
$('#area1').on('pagebeforeshow', function () {
$('.treelink').on('click', function () {
currentId = $(this).attr("data-id");
window.sessionStorage.setItem("IdKey", currentId);
$.mobile.changePage( "#detailsPage",
{ reverse: false,
changeHash: false
});
});
});
$('#detailsPage').on('pagebeforeshow', function () {
currentId = window.sessionStorage.getItem("IdKey");
var serviceURL = "http://winterhill.com.au/gardentour/services/";
$.getJSON(serviceURL + 'gettree.php?id=' + currentId, function (data) {
var tree = data.item;
$('#treedescription').text(tree.tree_description);
});
});
Still there is Access allow origin issue that needs to be resolved at the server level either have it JSONP enabled or enable the setting that it allows any domain that access the web service.