I must use localstorage in my phonegap (3.0) app so that I can call the specific number want by the user in each page. In order to do that I use a form and a script like that below. This script work in browser but not with phonegap build. I should have miss something but can't find what!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>local storage</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<style>
#message {
display: none;
border-radius: 10px;
padding: 10px;
background-color: #ff0000;
color: #fff;
}
#storageDemoPage h2 {
white-space: normal;
}
</style>
<script type="text/javascript">
var localStorageKey = "allo";
$('#storageDemoPage').live('pagecreate', function() {
showStoreValue();
$('#addToStorage').click(function(e) {
localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
});
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
<section data-role="header">
<h2>My app</h2>
</section>
<section data-role="content">
<p id="message"/>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Enter your number</li>
<li>
<input type="text" id="entry" name="entry" placeholder="Write digits"/>
<input type="button" id="addToStorage" value="Store value"/>
</li>
<li data-role="list-divider">Value record</li>
<li class="storeItem"/>
</ul>
<div data-role="content">
<p id="audio_position"></p>
<ul id="allRepos" data-role="listview"></ul>
</div>
</section>
</body>
</html>
Edit : add cordova script at the begining
Thanks to #QuickFix and #Chris here is the solution :
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var localStorageKey = "allo";
function onDeviceReady() {
showStoreValue();
$('#addToStorage').click(function(e) {
window.localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
}
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
Here are the possible things you would have missed
a)Cordova script file inclusion in your head tag.
b)Use and listen device ready before using local storage.
Implementing this should solve your issue.
Related
I want to show a calendar event on fullcalendar dynamically. I've tried the code given below but it did not succeed:
#model List<EcommerceDbFirstApproch.Models.EventMaster>
#{
ViewBag.Title = "DashBoard";
var event_data = #Model;
}
<style type="text/css">
.mycalhedar {
background: #000;
text-align: center;
padding: 10px;
}
.mycalhedar h1 {
color: #fff;
}
</style>
<br />
<script src="~/Content/jquery-1.8.2.min.js"></script>
<script src="~/Content/jquery.mobile-1.2.0.min.js"></script>
<script src="~/Content/themes/fullcalendar.min.js"></script>
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<div data-role="page" id="index">
<div class="mycalhedar">
<h1>My Team</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id='calendar' style="width: 100%;"></div>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
$(document).on('pageshow', '#index', function (e, data) {
debugger;
var myary = [];
#foreach (var h in Model)
{
#:alert("#h.EventTitle");
#:alert("#h.StartDate");
#:alert("#h.EndDate");
}
$('#calendar').fullCalendar({
ContentType: "application/json",
editable: true,
events: [{
#foreach (var h in Model)
{
title: #h.EventTitle.ToString();
start: #h.StartDate.ToString();
end: #h.EndDate.ToString();
}
}]
});
});
</script>
Please help me to solve this problem. I want to show the events dynamically on the fullcalender demo. Thanks
I'm starting with developing for webpage available on mobile.
I need to have an application with 6 big icons which will consume almost all visible space. When mobile is placed horizontaly I'd like to have those icons 3 rows in 2 columns. And when mobile is placed vertically I'd like to have them 2 rows and 3 columns. I can't declare single icon widht as for example 100px and then use simple float:left - I'd like my loyout to be fluid.
I plan to use jQuery mobile in my page.
I made you a working example, just copy it into an empty html file.
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" />
<style>
#custom-icon {
position: relative;
float: left;
width: 33.333%;
height: 50%;
}
.ui-content {
padding: 0 !important;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
detectOrientationMode();
setRealContentHeight();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
setRealContentHeight();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'50%','height':'33.33333%'});
});
} else {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'33.33333%','height':'50%'});
});
}
}
function setRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find("div[data-role='content']").height(content_height);
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div id="custom-icon" style="background: red;">Icon 1</div>
<div id="custom-icon" style="background: blue;">Icon 2</div>
<div id="custom-icon" style="background: green;">Icon 3</div>
<div id="custom-icon" style="background: yellow;">Icon 4</div>
<div id="custom-icon" style="background: orange;">Icon 5</div>
<div id="custom-icon" style="background: violet;">Icon 6</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Tested on :
Android 4.1.1 Chrome
iPad iOS 6.0
I have two pages: index.html and main.html
When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, the javascript on the main.html just stops working.
here is the HTML of the two pages:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxLinksEnabled = false;
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
}
function onSuccess(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}
// se o arquivo não existir
function failFile(error) {
$("#formLogin").show();
}
// se o arquivo existir
function gotMe(fileEntry) {
$.mobile.changePage("main.html", null, false, false);
}
</script>
</head>
<body onload="onLoad();">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="formLogin">
<form id="loginFrm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputEmail">
</label>
<input id="textinputEmail" placeholder="email" value="" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputPassword">
</label>
<input id="textinputPassword" placeholder="senha" value="" type="password" />
</fieldset>
</div>
<input value="entrar" type="submit" />
</form>
</div>
</div>
<script>
var xml;
function gotFS(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write(xml);
}
function fail(error) {
alert(error.code);
}
// ao fazer o login
$("form").submit(function() {
// chama função que valida usuário
ValidateUser();
return false;
});
// verifica se o usuário existe
function ValidateUser(email, password) {
$.ajax({
type: 'POST',
url: 'http://********/oauth.aspx',
data: "email=" + $("#textinputEmail").val() + "&password=" + $("#textinputPassword").val(),
success: function(data) {
// se o usuário existir
if (data != "false") {
xml = data;
// cria o arquivo xml se ainda não existir
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
// muda o usuário de página
$.mobile.changePage("main.html");
}
else {
alert("Dados inválidos. Tente novamente.");
}
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("yesss");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
</body>
</html>
jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.
The best work-around is to put all of your app's JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).
You can also put the JS for each page inside the data-role="page" element so it is grabbed by jQuery Mobile and not just discarded:
<div data-role="page" id="page1">
<script>
alert('hello');
</script>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
I have this code:
<html>
<head>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(document).ready(function(){ $( "#selectable" ).selectable(); });
</script>
</head>
<body>
<form method='post'>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
</ol>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->
</form>
</body>
</html>
I downloaded the jquery but it has no result
I used this site:
http://jqueryui.com/demos/selectable/#event-create
what is wrong here?
You must embed jQuery before jQuery UI, because UI uses jQuery.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
instead of
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
Did you try placing your code inside of a ready function?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Try putting the
$(document).ready(function(){ $( "#selectable" ).selectable(); });
Inside the <head></head> element. Also the <script src=".."> should be in <head> as well.
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');