I am trying to set and retrieve session variables. For each I have javascript code that runs ajax to call php functions. In my javascript code I want to use the returned session field. Nothing works. Can someone look at my code and tell me what I did wrong. Thanx
MY Ajax code to set the session variable is:
{$.ajax({
type: "POST",
url: "setsessionvar.php",
data: option,
success: function(){ alert("success")
}
});
Its PHP function is:
function setvar($option) {
session_start();
$_SESSION["temp"]=$option;
}
MY Ajax code to retrieve the session variable is:
{$.ajax({
type: "POST",
url: "getsessionvar.php",
data: option,
success: function(option){
}
});
It's PHP function is:
function getsessionvar()
{
return .$_SESSION['option'];
}
I made the changes to the php code, however nothing is still working. I have an alert in the success sections of the ajax. Neither alert executes. I am also not sure I am accessing the session variable value in the ajax code. I am including the entire code of my page this time. The set ajax is in the function called foo. The get ajax is in the routine called startup.
<!DOCTYPE HTML>
<html><!-- InstanceBegin template="/Templates/Ricks Universe.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fun and Games</title>
<!-- InstanceEndEditable -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale 1.0 minimum-scale 1.0" />
<link rel="stylesheet" href="ricks.css" type="text/css" media="screen" title="Ricks Style Sheet"/>
<link rel="stylesheet" href="hh.css" type="text/css" media="handheld"/>
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#Games{display:inline;}
#Humor{display:none;}
</style>
<script type="text/javascript">
function foo(option)
{
var n = option.search(".HTM"); // Check for external file to link to;
if (n > -1) // If true...
{
window.location.href=option;
}
for (i in divs) //loop thru divs table
{
x=divs[i].substr(1) //Get value for option without #
z=document.getElementById(x) // Locate div
if (option == divs[i]) //On match to table...
{$.ajax({
type: "POST",
url: "setsessionvar.php",
data: option,
success: function(){ alert("success")
}
});
createCookie("fungame", option,1);
z.style.display= "inline";
}
else
{
z.style.display="none" //On no match hide div on page
}
}
}
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
//document.cookie = escape(name) + "=" + escape(value) + "; path=/";
}
function readCookie(name) {
var nameEQ = escape(name) + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ')
cookie = cookie.substring(1, cookie.length);
if (cookie.indexOf(nameEQ) === 0)
return unescape(cookie.substring(nameEQ.length, cookie.length));
}
return null;
}
</script>
<script type="text/javascript">
function startup()
{
//document.cookie = opt + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
if (option == divs[i]) //On match to table...
{$.ajax({
type: "POST",
url: "getsessionvar.php",
data: option,
success: function(option){
alert(option);
}
});
var
option = readCookie("fungame");
if (option != null) { foo(option);
document.getElementById("StoreDirectory").value = readCookie("fungame"); }
}
</script>
<!-- InstanceEndEditable -->
<!-- InstanceParam name="home" type="boolean" value="false" -->
<script type="text/javascript">
function displaymenu() {
document.getElementById("content").style.display="none";
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("menu").style.display ='inline';
document.getElementById("menu").style.width="100%";
document.getElementById("menu").style["text-align"]='center';
document.getElementById("menu").style.height="300%";
document.getElementById("menu").style.zoom="300%";
};
</script>
<style type="text/css">
<!--
-->#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.sidebar1 {display:none;}
.header {display:none;}
.footer {display: none;}
.pagepics {display:none;}
.menulink {display:inline;}
.content {height:100%;
width:100%;}
.textSmall{
font-size:x-large;
font-weight:bold;
}
#titlex {display:inline;}
.bigpic {
width:400;
margin-left:0px;
}
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<!-- InstanceBeginEditable name="onload" -->
<body onload="startup()">
<script type="text/javascript">
var string ="#Games,#Humor"; //Load table for foo to match against
var divs = new Array();
divs = string.split(",");
</script>
<!-- InstanceEndEditable -->
<div class="container" id="wrapper">
<div class="header" id="header">
<p class="clock">
<iframe src="http://free.timeanddate.com/clock/i425m2zy/n179/tct/pct/ahl/avt/tt0/ta1" frameborder="0" width="378" height="19" allowTransparency="true"></iframe></p><br/><br/>
<!-- InstanceBeginEditable name="title" -->
<p class="title">Fun and Games</p>
<!-- InstanceEndEditable -->
<!-- end .header --></div>
<div class="sidebar1" id="menu">
<ul class="nav">
<li>Meet the dogs</li>
<li>Rick's Dog Page</li>
<li>Art</li>
<li>Automotive</li>
<li>Babies</li>
<li>The Boutique</li>
<li>Catalogs</li>
<li>Charities</li>
<li>Computing</li>
<li>Day Care</li>
<li>Deals and Coupons</li>
<li>Department Stores</li>
<li>Dogs In Competition</li>
<li>Drug Stores</li>
<li>Education</li>
<li>Electronics</li>
<li>Employment</li>
<li>Entertainment</li>
<li>Financial</li>
<li>Fitness</li>
<li>Flowers</li>
<li>Food</li>
<li>Fun and Games</li>
<li>Gardening</li>
<li>Government</li>
<li>Greeting Cards</li>
<li>Groceries</li>
<li>Health</li>
<li>Hobbies</li>
<li>Home Improvement</li>
<li>Information</li>
<li>Internet and More</li>
<li>Jewelry</li>
<li>Literature</li>
<li>Maps and Directions</li>
<li>Music and Video</li>
<li>Movies</li>
<li>News Stand</li>
<li>Office Supplies</li>
<li>People</li>
<li>Pets</li>
<li>Phones</li>
<li>Photography</li>
<li>Post Office</li>
<li>Price Comparison</li>
<li>Real Estate</li>
<li>Security</li>
<li>Searches</li>
<li>Senior Page</li>
<li>Shoe Store</li>
<li>Shopping Clubs</li>
<li>Sports</li>
<li>Toys and Games</li>
<li>Television</li>
<li>Travel</li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content" id="content">
<p class="menulink" > <a onclick="displaymenu()" href="javascript:void(0);" >
<span>Menu</span></a></p>
<script type="text/javascript">
var head = '<br/><br/><h3 id = "titlex">';
var title=document.title;
var trail = '</h3>'
var heading = head + title + trail;
document.write(heading);
</script>
<!-- InstanceBeginEditable name="content" -->
<p><img class="pagepics" style="width:250px;"src="Pictures/weimball.jpg" alt="weimball.jpg" /></p>
<div id="form" class="form">
<form action="">
<h5>Page Directory</h5>
<select id="StoreDirectory" name="StoreDirectory" onchange="foo(this.value)">
<option value="#Games">Games</option>
<option value="#Humor">Humor</option>
</select>
</form>
</div>
<div class="d1">
<div <a id="Games" name="Games"></a>
<h2>Games</h2>
<ul>
<li>Addicting Games</li>
<li>BestCrosswords.com</li>
<li>The Bingo Zone</li>
<li>blufrA trivia game challenging you to identify statements as true or false</li>
<li>Free Flash Online Games</li>
<li>FreeArcade.com</li>
<li>Gamespot</li>
<li> It's Your TurnChess, Checkers, Backgammon and more</li>
<li>Ultimate Online Gaming</li>
<li>JigZoneJigsaw Puzzle Paradise</li>
<li>Play-Free-Online-Games.netMulti Player Games on the Internet</li>
<li>Puzzle Choice</li>
<li>The Puzzle Connection</li>
<li>Web Sudoku</li>
</ul>
</div>
<div <a id="Humor" name="Humor"></a>
<h2>Humor</h2>
<ul>
<li>BreakFunny Pics, Hot Chicks, and Cool Flicks</li>
<li>Dumb Criminal Acts!</li>
<li>The Darwin AwardsImprovement of the human genome by honoring those who accidentally kill themselves in really stupid ways</li>
<li>The Pay BackGet revenge with this collection of revenge ideas, pranks, and practical jokes</li>
<li>Practical Jokes</li>
</ul>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- end .content --></div>
<div class="footer" id="footer">
<a class="sitemap" href="SiteMap.htm">Site map</a> ¦ <a href="index.html"> Home</a >
<!-- end .footer --></div>
<!-- end .container --></div>
<div id="sitelock_shield_logo" class="fixed_btm" style="bottom:0;position:fixed;_position:absolute;right:0;"><a href="https://www.sitelock.com/verify.php?site=www.rickzipser.com" onclick="window.open('https://www.sitelock.com/verify.php?site=www.rickzipser.com','SiteLock','width=600,height=600,left=160,top=170');return false;" ><img alt="PCI Compliance and Malware Removal" title="SiteLock" src="http://shield.sitelock.com/shield/www.rickzipser.com"/></a></div>
</body>
<!-- InstanceEnd --></html>
change this line
return .$_SESSION['option'];
to
return $_SESSION['option'];
Related
So I am trying to make 2 slide shows of img on the same page. I have it so that one will work, but can not get the second on to work. Please help. If you need I can post the CSS for the whole thing as well. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colorado Marauders</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script language="JavaScript">
function mdy(todaysdate)
{
return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() + "/" + todaysdate.getFullYear();
};
mdy(new Date());
function slide(id, intval, total) {
var image = document.getElementById(id),
imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg";
return window.setInterval(function() {
if (++imgcount > total) imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg";
}, intval);
}
window.onload = function()
{
var slider1 = slide('img', 3000, 8);
var slider2 = slide('c1', 4000, 22);
};
</script>
</head>
<body >
<header>
<div class="title">
<h1>Colorado Marauders Disk Golf</h1>
</div>
<h3 class="event" style="text-align:center;">Events</h3>
</header>
<section>
<div class="content"></div>
<div><img src="image/main.jpg" style= "width:33em; height:auto; margin-right: .1em;
margin-top: 1.9; border-color:white; border-style:solid; border-radius:50%; border-
width:.1em; float:left; height:auto; box-shadow: .6em .6em .6em red;"></img></div >
<div class="top">
<div id="container" >
<img id="img" src="image/img1.jpg" />
<h1 style="text-align:center;">Check out the pictures from our last event.</h1>
</div>
</div >
</section>
<section>
<table>
<tr>
<h3 class="Tmain">
Top 10 Tag holders
<div class="tag">
<ol>
<li style="color: white;">Shawn Gould</li>
<li style="color: white;">Josh Cain</li>
<li style="color: white;">Adrian Meyer</li>
<li style="color: white;">John Allen</li>
<li style="color: white;">Mike Brown</li>
<li style="color: white;">Marcus Moreno</li>
<li style="color: white;">Cameron Palen</li>
<li style="color: white;">Tyler Moffitt</li>
<li style="color: white;">Raymond Lewis</li>
<li style="color: white;">Connor Madsen</li>
</ol>
</div>
<h3 class="Bmain">
Other stuff for the group
</h1>
</h1>
</tr>
<tr>
<h1 class="Tmain2">
</h1>
<h1 class="Bmain2">
news
</h1>
</tr>
<tr>
<h4 class="Tmain3">
<div>
<a href = "mailto:coloradomaraudersdiskgolf#gmail.com?subject=Request to
join"/><img
style="height:21.3em; width:33.1em;" src="image/c1.jpg"/>
</div>
</h4>
<h1 class="Bmain3">
<div style="text-align:center;">
Here are some other link that you might like.
</div>
<div class="fb">
Like us on <a href="https://www.facebook.com/pages/Colorado-Marauders
/297312640455928?skip_nax_wizard=true&ref_type=logout_gear" target="_blank"><img
src="image/facebook.jpg"/></a>
</div>
<div class="fb1">
<img src="image/discraft.jpg"/>
</div>
<div class="fb2">
<img src="image/dg.jpg"/>
</div>
<div class="fb3">
<a href="http://www.innovadiscs.com/" target="_blank"><img src="image/innova.jpg"
/></a>
</div>
<div class="fb4">
<a href="http://www.vibramdiscgolf.com/" target="_blank"><img
src="image/vibram.jpg"
/></a>
</div>
<div class="fb5">
<img src="image/mvp.jpg"/>
</div>
<div class="fb6">
<img src="image/pdga.jpg"/>
</div>
</h1>
</tr>
</table>
</section>
<footer>
<h3>
Colorado Marauders
<date><script language="JavaScript">
sampleDate1=new Date()
document.write (mdy(sampleDate1))
</script></date>
</h3>
</body>
</html>
You should have had a look on your console!
1) First error is TypeError: slideA is not defined because it's defined inside the setInterval.
2) Don't declare multiple functions with same name!
3) There's no need to define slideA multiple times. Once defined you can call it as often as you need by passing the target element as argument. I pass the interval time as a second argument so each slider can have its own speed.
4) Better than body.onload use the window.onload event to avoid errors if images are not completely loaded.
First remove onload="slideA()" from <body>, then your code should look like this:
<script language="JavaScript">
function mdy(todaysdate) {
return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() + "/" + todaysdate.getFullYear();
};
mdy(new Date());
// here the global vars imgcount and total are removed, each slider has its own
// now define function slide, first arument is id of element its applied to,
// second is the interval in ms, third is the total amount of imgs
function slide(id, intval, total) {
// define vars outside setInterval, otherwise it's always repeated
var image = document.getElementById(id),
imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg"; // setup the first image
// return the interval so it becomes stopable
return window.setInterval(function() {
if (++imgcount > total) imgcount = 1; // increase and compare imgcount in one line
// since imgcount is always increased second compare (< 1) can be omitted
image.src = "image/" + id + imgcount + ".jpg";
}, intval);
}
// when window is loaded start the slider
window.onload = function() {
// start first slider by calling function slide and store it in a variable
var slider1 = slide('img', 3000, 8);
var slider2 = slide('c', 4000, 22); // same with second slider
};
</script>
Now if you want to stop the first slider you can simply do (inside the window.onload):
window.clearInterval(slider1);
Hope that helps.
I have TWO main questions that I really would have help with.
I have googled and searched for some day now without any help, but if you know any links that I maybe haven't watched or any site with help, then give me.
I would appreciated it, OR if you already have the code/sample code, would help :-)
I work with PhoneGap & JQuery Mobile right now, and the thing is this.
I have a 'textarea' there you write something, then a save button, what I want it to do is that when I press the save-button, the textvalue I wrote in the textarea would get saved in a listview in another page of the app. I have looked at "localstorage" but nothing works correctly.
(Also, if you write something in textarea and you press the cancel button, the text in the textarea should be deleted next time you go in to that page.)
The second question is:
When I press the save button, it should begin to count, in seconds, minutes, hours, days.
Think of it like this. I write "toothbrush" in the textarea and press save, now when I go to the listview-page, I can see it says toothbrush in the listview, beside the text it says 1m, 5m, 1h, it just update when it was last time I bought or changed the toothbrush, so next time I open the app, I can see "TOOTHBRUSH: 4Days, 16HRS, 52MINS AGO". In that way I can check when I bought something, or changed something.
This is my codes, both html & .js, what should I do so this mission will work.
Any suggestions, sites, or code you guys have that would help?
Thank you so much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="save">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ol data-role="listview" id="orderedList" data-inset="true"></ol>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and my almost empty -js code.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#add', function(){
$.mobile.navigate( "#page2", { transition : "slide", info: "info about the #bar hash" });
});
});
function save ()
{
var fieldValue = document.getElementById('textarea').value;
localStorage.setItem('content', orderedList);
}
EDIT:
Here is my new html & js file, after looked at your awesome code-example, but when I run it on my phone with phonegap, still, the save, cancel, the time and even the saved text will not show up.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea id="newItemText"></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#" data-transition="slide" id="btnSave">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="orderedList" data-inset="true">
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the JS file.
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});
function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600 },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800 },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";
var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
var diff = Math.floor(diff / unit.in_seconds);
return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}
SOLUTION:
The JSFiddler code-example, the demo is perfect and are based on jQuery 1.9.1 & jQuery Mobile 1.3.0b1, I used 1.6.4 & 1.1.0.
After updating this two .js files, everything worked on PhoneGap!
Here is a DEMO
There are many questions within your problem, so I will probably not manage to answer all of them. To use localStorage with an array of 'tasks' you use JSON.stringify when saving and JSON.parse when retrieving.
So, each time page3 is displayed, you retrieve the current list of items from localStorage, create list items, empty the list and then append the created items :
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
When entering a new item, you want to store the text and the current time, so use an object. First get the current list from localStorage, then create the new item and add it to the list, finally save back to localStorage clear the textarea and navigate to page3. The cancel button just clears the textarea:
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});
there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});
If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();
At first sorry if i have some typing errors english is not my main language but i try to do my best to explain it at my best.
I am working on a test app with a note database.
It works fine with adding and deleting but there is a small problem...
At the moment that i add a note (on edit.html) and want to go back to the index.html page it is not going back.
i am working with multiple data-page-role pages so each page has his own id.
The code that i use for the note database:
index.html Header:
$("#homePage").live('pageinit', function() {
init();
});
index.html data-page-role
<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
<h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
Voeg notitie toe
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
Edit.html (here u can add/change/remove the notes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
<h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Delete').click(function() {
DeleteNote($('#noteId').val());
});
$('#addNote').click(function() {
var data = {title:$("#noteTitle").val(),
body:$("#noteBody").val(),
id:$("#noteId").val()
};
saveNote(data);
});
});
</script>
<div data-role="content">
<form id="editNoteForm" method="post">
<input type="hidden" name="noteId" id="noteId" value="">
<div data-role="fieldcontain">
<label for="noteTitle">Title</label>
<input type="text" name="noteTitle" id="noteTitle">
</div>
<div data-role="fieldcontain">
<label for="noteBody">Note</label>
<textarea name="noteBody" id="noteBody"></textarea>
</div>
<div data-role="fieldcontain">
<button id="addNote">Opslaan</button>
</div>
</form>
<button id="Delete">Verwijder</button>
</div>
Ga terug
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>
And here is the backend code that i use for the note database
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
function getEntries() {
dbShell.transaction(function(tx)
{
tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries");
});
}
function renderEntries(tx,results){
if (results.rows.length == 0) {
$("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
var s = "";
for(var i=0; i<results.rows.length; i++) {
s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";
}
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
function saveNote(note) {
//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
if(note.id == "")
{
tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
}
else
{
tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
}
}, function(){ alert ("Error savenote");},
function()
{
window.navigator.location("index.html#homePage");
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
window.navigator.location("index.html#homePage");
});
}
function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();
}
function init(){
getEntries();
//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
//get the location - it is a hash - got to be a better way
var loc = window.location.hash;
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1,loc.length);
var noteId = qs.split("=")[1];
//load the values
dbShell.transaction(
function(tx) {
tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
$("#noteId").val(results.rows.item(0).id);
$("#noteTitle").val(results.rows.item(0).title);
$("#noteBody").val(results.rows.item(0).body);
});
}, dbErrorHandler);
}
});
}
As u can see at saveNote and on deleteNote i call the function window.navigator.location("index.html#homePage");
I did this as far as i tried with $.mobile.changePage("index.html#homePage"); it will go back but then it won't run the init(); function at the header script.
I hope i explained it all correct and if there are any questions please let me know.
I will try then to do my best at explaining it.
edit:
More information:
At first thank you for your answer, i got multiple data-role-pages.
A extra example:
<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header -->
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
You are trying to change page with deep link "index.html#homePage" .
JqueryMobile does not support that. When you pass a file, he will load ONLY the first page of that file.
This means that when you pass "index.html#homePage", he'll only consider the "index.html" and load the first page on that file.
I don't know it for sure, but if in your index.html file only have the "homePage", change function window.navigator.location to:
$.mobile.changePage("index.html")
And of course do the same for the anchor tag .
I use:
window.location = "#home";
i am new of srackoverflow and i have a problem that i hope u guys can help me fix, since i broke my arm i need to get a faster way to copy and paste emails template into a email editor (in Siebel)...but so far i am having trouble because the html page i "wrote' is quite messy (i'm not good at it, i just take parts here and there and try to make them working together).
My biggest issue is that when i past the template in to the siebel email editor, all the character with axcent they come out wrong (like ò or ì ...and many other)
can smone pls help me in fixing the code properly??
I know that the codedon't work properly on firefox but i only need it to work on Ie (and apparently work) and most of all i need it working properly on siebel (automotive).
heres thesupermessy code
<!-- CSS : AddOns - WorldA -->
<!--<link rel="alternate stylesheet" title="styleA" type="text/css" media="all"
href="core/css/D_worldA.css" />-->
<!-- JavaScript : Librarys: jQuery-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/jQuery/jquery-1.2.6.min.js"></script>
<!-- JavaScript : Librarys: swfObject-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/swfobject/swfobject.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/flash/devenv/deploy/js/swfaddress.js"></script>
<!-- JavaScript : Include and embedded versions-->
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/document.ready.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/script.js"></script>
<script type="text/javascript" >
// <![CDATA[
function resizeHeader(val){
var flashHeader = document.getElementById('B_MediaNavigationLevel1');
flashHeader.style.height=val+'px';
var flashObject = document.getElementById('shell_header');
flashObject.style.height=val+'px';
}
function resizeFooter(val){
var flashFooter = document.getElementById('B_MediaNavigationLevel2');
flashFooter.style.height=val+'px';
var flashFooterObject = document.getElementById('shell_footer');
flashFooterObject.style.height=val+'px';
}
// ]]>
jQuery(document).ready(function() {
// HEADER
soHead = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_header", "100%", "100%",
"10.0.45.2", "#ffffff");
soHead.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soHead.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf");
soHead.addVariable("manifest", "http://www.nissan.it/IT/it.-
headerContent-Single-nointernal-trvheaderxml.xml");
soHead.addVariable("trvheader_resizeFunc", "resizeHeader" );
soHead.addVariable("trvheader_emebed", "true" );
soHead.addParam( "allowScriptAccess", "always" );
soHead.addVariable("verbose", "false" );
soHead.addVariable("fps", "false" );
soHead.addVariable("trv_header_selected_nodeid", "glossary" );
soHead.addParam( "wmode", "transparent" );
// FOOTER
soFoot = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_footer", "100%", "100%", "10.0.45.2", "#ffffff");
soFoot.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soFoot.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf" );
soFoot.addVariable("manifest",
"http://www.nissan.it/IT/it/glossary.-trvbottomNavxml.xml");
soFoot.addVariable("trvfooter_resizeFunc", "resizeFooter" );
soFoot.addParam( "allowScriptAccess", "always" );
soFoot.addVariable("trvfooter_emebed", "true" );
soFoot.addVariable("verbose", "false" );
soFoot.addVariable("fps", "false" );
soFoot.addParam( "wmode", "transparent" );
soHead.write( "B_MediaNavigationLevel1" );
soFoot.write( "B_MediaNavigationLevel2" );
});
</script>
<!-- trackingHtmlContent -->
</head><body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" class="body">
<div id="theDocument">
<div id="A_body">
<div class="topDecoration"></div>
<div class="middleDecoration">
<div id="B_content" class="glossaryDisplay">
<!-- component zone 2 -->
<div class="stdDisplay">
<!-- component zone 3-->
<Script Language=JavaScript>
function copyToClipboard(ID){
ctrlRange = document.body.createControlRange();
ctrlRange.add(document.all(ID));
ctrlRange.execCommand("Copy");
}
</Script>
<style type="text/css">
#coolmenu a{
font: bold 13px Verdana;
padding: 5px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
</style>
<div id="coolmenu">
<table width="100%" border="0">
<tr>
<td><ol class="descriptionList">
<li class="openDefault" >Concessionario Aut.</li>
<!-- "Access description from" -->
<li ><a href="#templ2" title="Centro Assistenza Fiducia">Centro Assistenza
Fiducia</a></li>
<!-- "Access description from" -->
<li >CETOC</li>
<!-- "Access description from" -->
<li >Dati Mancanti</li>
<!-- "Access description from" -->
<li >Contatti Nissan Italia</li>
<!-- "Access description from" -->
<li >Inviare Richiesta Scritta Roma </li>
<!-- "Access description from" -->
<li >Richiesta Info+Link</li>
<!-- "Access description from" -->
<li ><a href="#templ8" title="Libretto uso/manutenzione o garanzia">Libretto
uso/manutenzione o garanzia</a></li>
<!-- "Access description from" -->
<li ><a href="#templ9" title="Elenco Concessionari GT-R">Elenco Concessionari GT-
R</a></li>
<!-- "Access description from" -->
<li ><a href="#templ10" title="Infiniti: Info Request+link">Infiniti: Info Request
+link</a></li>
<li >Qashqai Tempi di attesa</li>
<!-- "Access description from" -->
<li >Sconti categorie speciali - legge 104 etc.</li>
</ol></td>
<td><ol class="descriptionList">
<!-- "Access description from" -->
<li >Disponibilita veicoli presso cocessionari </li>
<!-- "Access description from" -->
<li >Risorse umane -cv - etc.</li>
<li >Reclamo: segnalazione e codice</li>
</ol></td>
</tr>
</table>
<!-- "Access description from" -->
</ol>
</div>
<div class="glossaryContainer">
<div class="glossaryTab" id="templ1">Concessionario Autorizzato <br> <input type=button value='Copy Table To Clipboard' onClick="copyToClipboard('thisTable')">
<table id='thisTable' class=MsoNormalTable border=1 cellspacing=0 cellpadding=0>
<tr id=>
<td id="t1" width=852>email template in here</td>
</tr>
</table>
</div>
</div>
<a class="anchorLink" href="#A_body">Torna sù</a>
</div>
<!-- component zone 4 (title area)-->
</div>
<!-- MAIN DATA CONTAINER //////////////////////////////////////////////////////-->
</div>
</div>
</div>
</body>
You should put this string in "head" tag where meta usually goes
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>