Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.
Where am I going wrong below?
Do i need to put this code block somewhere else?
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
Full html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>
Home Page</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile! new page
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
<h1>
new Page</h1>
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs
$(document).on("pageinit","#newpage",function(){
$('#saveButton').click(function() {
localStorage.setItem("name", $('#name').val());
});
});
$(document).on('pageshow','#newpage', function() {
var personName = localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their command does not work for me. See my answer: https://stackoverflow.com/a/12707386/561545
Small correction! .val should be .html. Please see the below code.
$('#my_name').html(personName);
add:
div id="my_name"
Related
I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>
I have problem in implementing Javascript on Jquery mobile, everytime I back from a page, the javascript would be duplicated.
Here is the example code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page1</title>
<meta name="viewport" content="width=device-width, initial-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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
<script src="js/tes.js"></script>
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page1">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page2
</div>
</body>
and here is the another page:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page2</title>
<meta name="viewport" content="width=device-width, initial-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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page2">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page1
</div>
</body>
</html>
And here is the custom JS:
$( document ).on( "pageshow", function() {
$(".header #option").toggle('inactive');
$(".header #option").hide();
$(".right").click(function(){
$(".header #option").toggle('inactive');
$(".header #option").show();
});
});
Everytime I back from page 2, the toggle run 2 times when I clicked it.
If I initialize the JS only in page1, when navigate to page2, the js didn't work.
Please help ..
Page 2 does not have the script tag, so it was not being loaded. Just add it in.
<head>
<script src="js/tes.js"></script>
</head>
Demo is working for me.
In onDeviceReady I'm trying to detect if a network connection is present with navigator.connection.type and if it's not then a div with the offline content is shown, but it's not working. running it on a device (Z10).
My page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone-no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/mustache.js"></script>
<script src="phonegap.js"></script>
</head>
<body onload="init()">
<div data-role="page" id="main">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div data-role="content">
<ul id="canlist" data-role="listview">
</ul>
New can
</div>
<div data-role="footer" data-theme="c">
<h2 class="offline">Offline Mode</h2>
</div>
</div>
<div data-role="page" id="newcan">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div id="candetailcontent" data-role="content">
</div>
<div data-role="footer" data-theme="c">
<p>Snapcan!</p>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('ready');
var networkstate = navigator.connection.type;
if(networkstate == "none")
{
$(".offline").css("visibility","visible");
}
}
</script>
</body>
</html>
my index.css:
.offline{
visibility: hidden;
color: #f00;
font-style:italic;
}
If there is no connection then the red"Offline Mode' should be visible but it's not. Any ideas?
I think you should try with cordova's offline eventlistener.
have you tried using the css property "display" on your offline class and either have it set to "none" if online or "" is offline?
I am trying to build a Web application using jQuery Mobile.
When testing on my desktop everything works as expected.
On Android (both 3.2 and 4.0.3) seems like JavaScript is disabled after navigating to second page.
My first page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Jetty experiments:</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Hello World</li>
<li>Sample Form</li>
<li>Test JSP</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK");
});
});
</script>
</html>
My second page (that is sample-form.html):
<!DOCTYPE html>
<html>
<head>
<title>Collects text into a database</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/tempo.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Enter some text:</h3>
</div>
<div data-role="content">
<form id="searchForm" method="get" action="SampleForm"
data-ajax="false">
<input type="text" name="text" /> <input type="submit"
value="Submit" />
</form>
<ul id="names" data-role="listview">
<li data-template>{{name}}</li> <!-- the template here does not work on Android -->
<li data-template-fallback>Sorry, JavaScript required!</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script>
var names;
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK"); // the alert here does not work on Android :(
});
names = Tempo.prepare("names")
});
// this binding does not work on Android
$("#searchForm").submit(function(event) {
event.preventDefault();
$.getJSON("SampleForm", function(data) {
names.render(data);
});
});
</script>
</html>
Any idea what am I doing wrong?
BR,
Adrian.
In jQuery Mobile the document ready event is called once. Linked pages are loaded in same DOM and page init is triggered.
http://jquerymobile.com/test/docs/api/events.html
Here is another question:
jQuery Mobile delegate vs live vs bind
So I have a listview in which each component wired to an on click function which looks like this:
function launchNewPage() {
$.mobile.changePage( "newPage.html", { transition: "slide"} );
}
The problem I am encountering has to do with the next page. The page shows up just fine, but none of the resources are loading. When I inspect the page in firebug, none of the necessary JS files are loaded. On top of this, it doesn't seem like the $(document).ready function is ever getting executed. Does anyone have any insight as to what I am doing wrong? Sorry, I am a bit new to JQ... Thanks in advance.
Requested HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="CSS/JqueryMobile.css" />
<link rel="stylesheet" href="CSS/theme.css" />
<link rel="stylesheet" href="CSS/JQM-DatePicker.css" />
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/JqueryMobile.js"></script>
<script type="text/javascript" src="JS/JQM-DatePicker.js"></script>
<script type="text/javascript" src="JS/mockjax.js"></script>
<script type="text/javascript" src="JS/soyutils.js"></script>
<script type="text/javascript" src="JS/fields.js"></script>
<script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
<script type="text/javascript" src="JS/AddingForm.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="x">
<div class="ui-body-x" data-role="header" data-position="fixed">
<h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
<div data-type="horizontal" class="ui-btn-right ui-button-group">
<a id="cancelButton" href="http://www.google.com" data-role="link" data-ajax="false">Cancel</a>
<a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="x">
<form id="f" src="#"></form>
</div><!-- /content -->
</div><!-- /page -->
</body>
You cannot start the jQuery mobile with $(document).ready() you should started like this:
try to work with this in the first HTML
$("div[data-role*='page']").live('pageshow', function(event, ui) {
document.location.href="newPage.html";
});
Geoff, if you are using the Beta 3 version of the JQM framework, read this. It will help shed light on the DOM and $(document).ready(). You may want to consider the "pagecreate" and "pagebeforecreate" events. They are delineated in the doc referenced in the above link.