The following code creates a dialog page in jQuery Mobile:
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content">
<p> replace html </p>
close dialog page
</div>
</div>
The page is currently called with:
open dialog page
How can I make this dialog page dynamic so that I can replace the html in the "header" and "main" content areas when the user clicks on a unique anchor element. I need to be able to create multiple anchor tags that can each dynamically alter the content of the same dialog page. For example:
button1
button2
You just need to use the pagecontainerbeforeshow trigger:
var data = {
"dialog-1": {
title: "Choose one:",
content: [
'<fieldset data-role="controlgroup" data-type="horizontal">',
'<legend>Horizontal controlgroup, checkbox:</legend>',
'<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">',
'<label for="checkbox-h-2a">One</label>',
'<input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">',
'<label for="checkbox-h-2b">Two</label>',
'<input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">',
'<label for="checkbox-h-2c">Three</label>',
'</fieldset>'
].join("")
},
"dialog-2": {
title: "Search:",
content: [
'<label for="search-2">Search Input:</label>',
'<input name="search-2" id="search-2" value="" type="search">'
].join("")
}
},
calle = "";
$(document).on("vclick", "a[data-dialog]", function(e) {
calle = $(this).data("dialog");
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var pageId = ui.toPage.attr("id");
if (pageId == "dialogPage") {
$("#dialogPage .ui-title").text(data[calle].title);
$("#dialogContent").html(data[calle].content);
$("#dialogPage").enhanceWithin();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-theme="a" data-role="header" data-position="fixed">
<h2>List Page</h2>
</div>
<div data-role="content">
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-1" data-transition="none">Callee 1</a>
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-2" data-transition="none">Callee 2</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
</div>
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content ui-page-theme-b">
<div id="dialogContent"> replace html </div>
close dialog page
</div>
</div>
</body>
</html>
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); }
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'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);
})();
I am using jquery mobile. I want to call function on page load. I googled a lot find using
But it did not work.
I also need to pass data from one page to another in jquery mobile. Here is my code:
I need to call loadData function on page load so that table view is created.
How to pass data from one page to another?
i see like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<ink rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="js/jquery.mobile-1.3.1.js"></script>
<!-- Extra Codiqa features -->
</head>
<style>
.ui-page {
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
#CaseInformationScreen {
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
#UserSettingScreen {
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
</style>
<body>
<!--page one My Cases Screen------------->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<div data-role="popup" id="UserSettingScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
<script>
$(document).on('pagebeforeshow', '#Home', function(){
console.log("init");
test();
});
function test() {
alert("dfg")
for (i = 0; i < 40; i++) {
$('#folderData').append(
'<li class="row" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
}
</script>
</div>
<!-- Page two Case Information Screen-------------------------->
<!-- Page Three Case User setting Screens-------------------------->
<!-- Page Four Document Information Screens-------------------------->
<div data-role="page" >
<div data-role="header" data-theme="b" data-position="fixed">
Cancel
<h1>Document Information</h1>
Ok
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Notes:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!------------------------------>
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png"/></div>
<!--a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a-->
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
</div>
</body>
<script >
$(document).ready(function() {
// $('.ui-loader').remove();
$.mobile.loading('hide');
});
$(document).bind("mobileinit", function(){
// $.mobile.touchOverflowEnabled = true;
$(document).delegate('.ui-content', 'touchmove', false);
});
$(".row").click(function() {
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
// $('#here_table').append(content);
$("#addbuttons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
// alert("--")
// alert("---")
// console.log('divclicked');
// $('#CaseInformationScreen').popup();
// $('#CaseInformationScreen').popup('open');
// $.mobile.changePage('#popupStatus','pop',true,true);
/*$.mobile.changePage($("#CaseInformationScreen"), {
transition: "slidedown",
reverse: false,
changeHash: false,
role: 'dialog',
});*/
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
}
});
$("#Cancel").click(function() {
// alert("---")
$('.ui-dialog').dialog('close')
// ('#CaseInformationScreen').dialog('close');
$.mobile.changePage($("#Home"), {
transition: "pop",
reverse: false,
changeHash: false
});
});
$("#CancelSettingButton").click(function() {
$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});
});
/*function createDir(dirname){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
function(fileSys) {
fileSys.root.getDirectory(dirname, {create: true,
exclusive: false},
function(directory) {
console.log("Directory has been created");
}, createError);
}, createError);
}
function createError(error){
alert(error.code);
}
<!-------------------->
You have to get a directoryentry (the variable entry in the examples)
first. This can be done in two ways:
way 1: getLocalFileSystem
function onSuccess(fileSystem) {
var entry=fileSystem.root;
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess,
onError);
or way 2: resolveLocalFileSystemURI
function onSuccess(directryEntry) {
var entry = directoryEntry;
}
window.resolveLocalFileSystemURI("file:///sdcard", onSuccess,
onError); */
<!------------------------------------------>
<!------------------------------------------------------>
/*var reader;
var text;
var myFileSystem;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function myfile() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotmyFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
myFileSystem = fileSystem;
console.log(fileSystem.name);
}
function gotmyFS(fileSystem) {
fileSystem.root.getFile("readme2.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
fileEntry.file(gotFile, fail);
}
function gotFileWriter(writer) {
writer.write("some sample text");
}
function gotFile(file){
readAsText(file);
}
function readDataUrl(file) {
reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
console.log(file);
text = evt.target.result;
};
reader.readAsText(file);
}
function readmyfile() {
var myPara = document.getElementById("mytext");
myPara.innerText = text;
}
function fail(error) {
console.log(error.code);
}*/
<!----------------------------Example-------------------->
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onFileSystemFail);
}
function onFileSystemSuccess(fileSystem) {
console.log(fileSystem.name);
var directoryEntry = fileSystem.root;
directoryEntry.getDirectory("newDir", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail)
}
function onDirectorySuccess(parent) {
console.log(parent);
// alert(parent+"Directory");
}
function onDirectoryFail(error) {
alert("Unable to create new directory: " + error.code);
}
function onFileSystemFail(evt) {
console.log(evt.target.error.code);
alert(evt.target.error.code);
}
</script>
</html>
[1]: http://i.stack.imgur.com/UgfL6.png
Proper way to initialize function on a page load is:
$(document).on('pageinit', '#index', function(){
});
Working example: http://jsfiddle.net/Gajotres/PMrDn/
Regarding passing data from one page to another, there are several solutions, you can find them in my blog ARTICLE. Just search for the chapter called: Data/Parameters manipulation between page transitions. You will also find working examples.
Basically there are 3 main approaches:
Pass data from page 1 to page 2 directly. It requires several HTML pages, it will not work with one HTML containing several pages.
Store data into some global javascript variable (the easiest solution).
Store data into localstorage
EDIT :
There's one more thing. If you are using several HTML pages you need to be careful with your javascript. When jQuery Mobile loads additional HTML pages it loads only BODY content so everything inside a HEAD will be discarded. Solutions to this problem can be fond HERE.
EDIT 2 :
You had an error in your example. You were missing BODY tag. And you had 2 much initialized css files. Only 1 is needed.
Here is a working example:
index.html: - This is just a test page so we can try to go from page 1 to page 2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="index" data-role="page">
<div data-role="content">
<a data-role="button" href="test.html">click me</a>
</div>
</div>
</body>
</html>
test.html - And this is your fixed page
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
</head>
<body>
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folder_Contend_Data" >
</ul>
<!--- CaseInformationScreen Popup screen---------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!--- CaseInformationScreen Popup screen End---------------------------->
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
<!--- User Setting Popup screen End---------------------------->
</div>
<script>
$(document).on('pagebeforeshow', '#Home', function(){
console.log("init");
test();
});
function test() {
alert("dfg")
for (i = 0; i < 40; i++) {
$('#folder_Contend_Data').append(
'<li class="row" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folder_Contend_Data').listview('refresh');
}
</script>
</div>
</body>
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