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
Related
I have an Spring MCV 4 + HTML5 + Thymeleaf based application I can't seem to use javascript on pages.
The webapp structure is:
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
In my login page, since it is a single page, with only a picture in the background, I have a piece of JS that works flawlessly:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="#{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
Forgot Password?
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
Login page has its own fragment, because it's a single, no menus, no sidebar page. All other are.
For may default templating, I have a file called fragments/default.html reponsible for pages organization.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
So that, for every page, I get included the following links and scripts from fragments/common.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="#{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="#{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="#{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="#{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="#{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="#{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="#{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
My fragments/header.html is defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html is very similar to `fragments/header.html, just different classes and content.
So, on every page I have on my application, I do something like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
I'm sure it's something quite stupid, but I'm failing to see why can't I get javascript working on my pages, even for something quite as simple as:
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
And, what's bothering (a lot!) is that if I on the browser something like:
localhost:8080/appName/assets/js/bootstrap.min.js
It will show the contents of the file.
What am I missing here?
Thanks for the input, guys! I got it working. What I did is placing the JavaScript section inside the <div layout:fragment="content">*HERE*</script> area, like on the example bellow.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
Hope this will save someone's precious time!
I think you have problems because there are 2 jquery files included to your fragments/common.html (check it via Firebug or something like that):
<head th:id="commonFragment" th:fragment="commonFragment">
...
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Try to remove one of the definitions.
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.
I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>
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"