Get Child Element being clicked - javascript

OK, so here's my issue (it must be simple, but I still cannot figure this one out)...
I've got a sample HTML code like the one below :
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="dev.css" />
</head>
<body id="jqm-website-6926" class="" >
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-6271" id="jqm-page-6271" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
<!-- New Header #1 -->
<div data-role="header" comp-id="jqm-header-364" id="jqm-header-364" class="" data-position="" data-fullscreen="false" data-theme="" >
<h1></h1>
</div>
<!-- / New Header #1 -->
<!-- New Content #1 -->
<div data-role="content" comp-id="jqm-content-3537" id="jqm-content-3537" class="" data-theme="" >
<!-- New Button #1 -->
<div comp-id="jqm-button-1547" >
<a data-role="button" id="jqm-button-1547" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="(null)">
</a>
</div>
<!-- / New Button #1 -->
</div>
<!-- / New Content #1 -->
</div>
<!-- / New Page #1 -->
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-9207" id="jqm-page-9207" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
</div>
<!-- / New Page #1 -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="custom.js"></script>
<script src="dev.js"></script>
</body>
</html>
<!-- / New Website #1 -->
All I want to do is when a specific element, with the comp-id attribute set, is clicked - we highlight (by adding the msp-selected class) just that specific element.
However, this is not working...
This is what I've tried :
function removeAll()
{
$("[comp-id]").each(function() {
if ($(this)!==undefined) {
$(this).removeClass("msp-selected");
}
});
}
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
$(this).addClass('msp-selected');
});
});
However, here's the problem :
When clicking on the button (comp-id="jqm-button-1547")
It highlights : a) first the button, b) then jqm-content-3537, c) then jqm-page-6271
In a few words, in the end, the 'page' is highlighted, instead of the button.
Any ideas?
And here's a fiddle : http://jsfiddle.net/CTZD3/


Maybe you can stop the event to be propagated to parents elements with event.stopPropagation();
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
e.stopPropagation();
$(this).addClass('msp-selected');
});
});

Related

JS works on CodePen but not locally [duplicate]

This question already has answers here:
Why is simple JavaScript code not running?
(3 answers)
Closed 1 year ago.
I'm trying to get a JS slider to work. I'm using Brackets as my code environment.
I have tried creating a local .js file and putting
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script type="text/javascript" src="my.js"></script>
line in <head>
I have also tried just putting only <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> in <head> and then putting all of the script code within a <script> tag in <head>.
CodePen for that:
https://codepen.io/hiarooo/pen/zYNboJq
As you can see, the slider doesn't function properly.
However, I have noticed that if I simply put the code in the JS box of CodePen (I have commented it, but you can try uncommenting it to see what I mean) then the Slider functions perfectly.
What is wrong with the way I am doing things? I do not understand.
Thank you for any advice.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypter | Upload01</title>`enter code here`
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght#700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="my.js"></script>-->
</head>
<body>
<section class="section-slider">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div id="slider-wrap">
<ul id="slider">
<li data-color="#1abc9c">
<div>
<h3>What is cat</h3>
<span>it is a cat</span>
</div>
<i></i>
</li>
<li data-color="#3498db">
<div>
<h3>Slide #2</h3>
<span>Sub-title #2</span>
</div>
<i class="fa fa-gears"></i>
</li>
<li data-color="#9b59b6">
<div>
<h3>Slide #3</h3>
<span>Sub-title #3</span>
</div>
<i class="fa fa-sliders"></i>
</li>
<li data-color="#34495e">
<div>
<h3>Slide #4</h3>
<span>Sub-title #4</span>
</div>
<i class="fa fa-code"></i>
</li>
<li data-color="#e74c3c">
<div>
<h3>Slide #5</h3>
<span>Sub-title #5</span>
</div>
<i class="fa fa-microphone-slash"></i>
</li>
</ul>
<!--controls-->
<div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
<div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
<div id="counter"></div>
<div id="pagination-wrap">
<ul>
</ul>
</div>
<!--controls-->
</div>
</div>
</section>
<script>
//current position
var pos = 0;
//number of slides
var totalSlides = $('#slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('#slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
//next slide
$('#next').click(function(){
slideRight();
});
//previous slide
$('#previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('#slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('#pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('#slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('#counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('#pagination-wrap ul li').removeClass('active');
$('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}
</script>
</body>
Try putting this way it works fine,because If you have code in your JavaScript that alters HTML as soon as the JavaScript file loads, there won't actually be any HTML elements available for it to affect DOM yet, so it will seem as though the JavaScript code isn't working, and you may get errors.Thanks :)

Bootstrap switch inside datatables plugin with ajax call catch event

I'm using datatables plugin and I have a problem with bootstrap switch.
This is my javascript code, where I create a switch with the value retrieved from ajax call:
$(document).ready(function() {
if ( ! $.fn.DataTable.isDataTable( '#usersTable' ) ) {
userTable = $('#usersTable').DataTable({
responsive: true,
//fix problem with responsive table
"autoWidth": false,
"ajax": "table",
"columns": [
{ "data": "username" },
{ data: "enabled", render: function ( data, type, row ) {
if (data) {
return '<input data="username" type="checkbox" name="my-checkbox" checked>';
}
else {
return '<input data="username" type="checkbox" name="my-checkbox">';
}
}
},
{ "data": "role.role"},
{ "data": "clientVersion.name" },
{
data: null,
className: "center",
defaultContent: '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal" th:attr="data-href=${license.idClientLicense}" data-target="#deleteLicenseModal">Delete</button>'
}
],
"fnDrawCallback": function() {
//Initialize checkbos for enable/disable user
$("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
}
});
}
else {
userTable.ajax.url("table").load();
}
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
//CSRF attribute for spring security
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$.ajax({
type : "POST",
url : "status"+(this).attr("data"),
data : form.serialize(),
beforeSend:function(xhr) {
xhr.setRequestHeader(header, token);
},
// all right with rest call
success : function(data) {
// No exception occurred
if (data.status==true){
// Also the field are right(for e.g. form value)
if(data.success==true){
// il risultato sta in data.result
// window.location.reload(true);
//reset select 2 choise because it can set with old user who no longer exist
// reload only the tag with id carsTable, so only the table
}
else{
// code if there are some error into form for example
}
} else {
// code exception
notifyMessage(data.result, 'error');
}
},
// error during rest call
error : function(data) {
window.location.href = "/ATS/500";
}
});
});
});
and this is HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Administration users</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- Ionicons -->
<link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2/select2.min.css}">
<!-- Bootstrap switch -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- page script -->
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/demo.js}"></script>
<!-- Select2 -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2/select2.full.min.js}"></script>
<!-- Bootstrap switch -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js}"></script>
<script type="text/javascript" th:src="#{/static/assets/js/user.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Administration</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home
</a></li>
<li class="active">User</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Users</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- -Users table -->
<table id="usersTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Username</th>
<th>Enable</th>
<th>Role</th>
<th>Version</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addUserButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addUserModal">Add
user</button>
<button id="addlicenseButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addUserModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add user"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
</div>
</body>
</html>
I read several questions and answer but I think that my problem is linked to "fnDrawCallback": function() because I tried all the solutions and None worked. Might be that the switch isn't correctly setted?
This is the table

CAUSE
Pages other than first do not exist in DOM at the time of initialization, that is why your handler never gets called.
SOLUTION
You need to use event delegation by providing selector as a second argument in on() call, see example below:
$('#usersTable').on('switchChange.bootstrapSwitch', 'input[name="my-checkbox"]', function(event, state) {
// ... skipped ...
});
From jQuery on() method documentation:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.
NOTES
Custom controls and Responsive extension require special handling. If column containing custom control becomes hidden or visible, it should be re-initialized. See jQuery DataTables – Responsive extension and custom controls for more information.

how to open popup on page init in jquery mobile [duplicate]

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

Intel XDK jQuery Mobile error when changing the page

I've just started with a simple jQuery Mobile app in Intel XDK. There are only two pages (views) and a button to show the second page from the main one.
Below is the code untouched (as produced by the visual designer).
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content" id="mainsub">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page-1</p>
</div>
</div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
<div class="upage" id="secondPage" data-role="page">
<div class="upage-outer">
<div id="secondPagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page 2</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
<!-- /upage-outer -->
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
And the index_user_scfripts.js file:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$("body").pagecontainer("change", "secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();
When I hit the button in the first page, the debugger throw a JavaScript error in jquery.min.js file:
Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"
Any sugestion are wellcome.

The problem was in the method to call the page change. Instead the original, the index_user_scripts.js must be:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();

jquerymobile session timeout with 2 timers

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

Categories

Resources