user2484319
Reputation:
How to call function on page load in jquery mobile and how to pass data from one page to another
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">
<a href="#UserSettingScreen" 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>
<a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
<a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
</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" >
<a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
<h1>Case Information</h1>
<a href="#" ddata-role="button" data-corners="false">Add</a>
</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" >
<a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
<h1>User Settings</h1>
<a href="#" ddata-role="button" data-corners="false">Ok</a>
</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 + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</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">
<a href="#" data-role="button" data-corners="false">Cancel</a>
<h1>Document Information</h1>
<a href="#" ddata-role="button" data-corners="false">Ok</a>
</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]: https://i.sstatic.net/UgfL6.png
Upvotes: 2
Views: 8899
Answers (1)
Gajotres
Reputation: 57309
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
HTMLpages, it will not work with oneHTMLcontaining 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">
<a href="#UserSettingScreen" 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>
<a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
<a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
</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" >
<a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
<h1>Case Information</h1>
<a href="#" ddata-role="button" data-corners="false">Add</a>
</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" >
<a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
<h1>User Settings</h1>
<a href="#" ddata-role="button" data-corners="false">Ok</a>
</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 + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
);
}
$('#folder_Contend_Data').listview('refresh');
}
</script>
</div>
</body>
Upvotes: 2
Related Questions
- Passing Local storage data betwen pages using jquery
- Pass parameter between pages using jquery mobile
- Jquery Mobile call function after change page
- jquery mobile send data to internal page and read from there
- jquery mobile load page and get data
- passing data between pages in jquery mobile
- How to display variable from local storage as soon as page loads. JQuery/JQuery Mobile
- How to pass dynamic data from page1 to page2 in jquery mobile
- execute a function on page load in jquery mobile
- jQuery mobile retrieving data between pages