Move this topic
I have an app which has an HTML5 local storage form on separate pages, each page with its own form. So each page is linked to its own JS local storage code. Works fine.
Now with JQuery mobile, everything is on one index.html page. I'm having a hard time getting more than one form on the same page to save to local storage. Any pointers? If you've had this problem, what was your solution?
Thanks!
1
Replies(9)
What do you mean you "are having a hard time"?
Error messages? Unexpected/unwanted behaviour? You haven't given enough information.
Error messages? Unexpected/unwanted behaviour? You haven't given enough information.
Leave a comment on watusiware's reply
Simple: the data in the second form does not store or retrieve. Here's an example of mixing two forms, form2, form1b. form 1b does not store or retrieve data:
Save data:
var transponderNo = document.form2["transponderNo"].value;
var storageIndex = "local.storage2.transponderNo";
localStorage[storageIndex] = transponderNo;
var SOneDateFrom = document.form1b["SOneDateFrom"].value;
var storageIndex = "local.storage2.SOneDateFrom";
localStorage[storageIndex] = SOneDateFrom;
Load data:
//
setupSummariesString += "\nTransponder Numbers: ";
if (localStorage["local.storage2.transponderNo"] === undefined)
{
document.form2["transponderNo"].value = '';
}
else
{
document.form2["transponderNo"].value = localStorage["local.storage2.transponderNo"];
setupSummariesString += localStorage["local.storage2.transponderNo"];
showSummary = true;
}
//
setupSummariesString += "\nTest: ";
if (localStorage["local.storage2.SOneDateFrom"] === undefined)
{
document.form1b["SOneDateFrom"].value = '';
}
else
{
document.form1b["SOneDateFrom"].value = localStorage["local.storage2.SOneDateFrom"];
setupSummariesString += localStorage["local.storage2.SOneDateFrom"];
showSummary = true;
}
Leave a comment on stevenhus's reply
Please show your index.html. You can edit stuff out for security, as long as we can see the structure.
Leave a comment on watusiware's reply
<!DOCTYPE html>
<html>
<head>
<title>SC10 Setups</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.js"></script>
<script type="text/javascript" src="phonegap-1.0.0.js" charset="utf-8"></script>
<script type="text/javascript" src="ChildBrowser.js" charset="utf-8"></script>
<script src="js/localStorageAbout.js" type="text/javascript"></script>
<!-- <script src="js/localStorageForm1b.js" type="text/javascript"></script>
<script src="js/localStorageForm1c.js" type="text/javascript"></script>
-->
<script src="js/charcount.js" type="text/javascript"></script>
<script type="text/javascript">
// Confirm Dialog box from http://www.tizag.com/javascriptT/javascriptconfirm.php
function confirmation() {
var answer = confirm("Are you sure you want to erase ALL data you entered into the fields on this page? Action cannot be undone.")
if (answer){
clearData();
}
else{
close();
}
}
</script>
<script type="text/javascript">
function confirmationSOne() {
var answer = confirm("Are you sure you want to erase ALL data you entered into the fields for Setup 1? Action cannot be undone.")
if (answer){
clearDataSOne();
}
else{
close();
}
}
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<h1>Setups Home</h1>
</div><!-- /header -->
<div data-role="content"><form name="form2">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-theme="c" onclick="loadData()">Load</a>
<a href="#" data-role="button" data-theme="e" onclick="persistData()">Save</a>
<a href="#" data-role="button" data-theme="c" onclick="confirmation()">Erase</a>
<a href="#" data-role="button" data-theme="c" onclick="alert('Tap Save to save the entries made in the fields below. Tap Load to repopulate the fields when you return to this page. Tap Erase to remove all data from the fields below - the Erase action cannot be undone.')">?</a>
</div><br>
<ul data-role="listview" data-dividertheme="b">
<li data-role="list-divider">SC10 Setups List</li>
<li><a href="#setup1TOC">Setup 1</a></li>
<li><input type="text" name="aboutSetupOne" placeholder="About Setup 1 (30 characters)" style="background-color:#fff; color:#000" maxlength="30"></li>
<li><a href="#setup2TOC">Setup 2</a></li>
<li><input type="text" name="aboutSetupTwo" placeholder="About Setup 2 (30 characters)" style="background-color:#fff; color:#000" maxlength="30"></li>
<li><a href="#setup3TOC">Setup 3</a></li>
<li><input type="text" name="aboutSetupThree" placeholder="About Setup 3 (30 characters)" style="background-color:#fff; color:#000" maxlength="30"></li>
<li><a href="#setup4TOC">Setup 4</a></li>
<li><input type="text" name="aboutSetupFour" placeholder="About Setup 4 (30 characters)" style="background-color:#fff; color:#000" maxlength="30"></li>
<li><a href="#setup5TOC">Setup 5</a></li>
<li><input type="text" name="aboutSetupFive" placeholder="About Setup 5 (30 characters)" style="background-color:#fff; color:#000" maxlength="30"></li>
...
<li data-role="list-divider">Setup Summaries</li>
<li>Copy text below and paste into your email client to export this page's data.</li>
<li><textarea name="setupSummaries" cols="20" rows="7" style="background-color:#fff; color:#000; height:40em;" placeholder="Tap on Load to fill this box." ></textarea></li>
</ul>
</form></div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Leave a comment on stevenhus's reply
HERE IS ANOTHER FORM ON THE PAGE, "form1b":
<!-- ################## Event Information ################## -->
<!-- Start of first page -->
<div data-role="page" id="eventInfo" data-theme="b" data-add-back-btn="true">
<div data-role="header">
<h1>Setup 1</h1>
</div><!-- /header -->
<div data-role="content"><form name="form1b">
<div data-role="controlgroup" data-type="horizontal">
<a href="#home" data-role="button" data-theme="c"data-icon="home">Home</a>
<a href="#" data-role="button" data-theme="c"onclick="loadDataform1b()">Load</a>
<a href="#" data-role="button" data-theme="e"onclick="persistDataform1b()">Save</a>
</div><br>
<ul data-role="listview" data-dividertheme="b">
<li data-role="list-divider">EVENT INFORMATION</li>
<li>Event Date: From<br>
<input type="text" name="SOneDateFrom"id="SOneDateFrom" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
</li>
<li>Event Date: To<br>
<input type="text" name="SOneDateTo"id="SOneDateTo" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
</li>
<li>Track Name<br>
<li><input type="text" name="SOneTrackName"id="SOneTrackName" placeholder="30 characters" maxlength="30" /></li>
<li>Location<br>
<li><input type="text" name="SOneLocation"id="SOneLocation" placeholder="City, state, country" maxlength="30" /></li>
<li>Event Name<br>
<li><input type="text"name="SOneEventName" id="SOneEventName" placeholder="30 characters"maxlength="30" /></li>
<li>Notes<br>
<textarea name="SOneEventNotes"id="SOneEventNotes" cols="20" rows="4" style="background-color:white"
onkeyup="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);" onkeydown="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);"onmouseout="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);"></textarea><br>
<div class="caption"><spanid="charcount-SOneEventNotes">0</span> characters entered - <spanid="remaining-SOneEventNotes">80</span> left<br></div></li>
</ul>
</form> </div> <!--content-->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Leave a comment on stevenhus's reply
I don't know if this is a problem, but it's not a good idea to use raw Javascript DOM methods to access elements. Use JQuery selectors instead.
Also, you need to insure that each "page" has a truly unique identifier. This is probably true in your case, but you do need to be careful with, say "edit" screens, where you may have multiple copies of the page loaded in the DOM. i.e. if you are editing a Thing, don't make the id "thing". Make it, say, "thing-1", where 1 is your database ID of the specific thing.
JQuery selector:
$('div#home form[name=form2]')
will select your first form, for example.
Use a similar approach to select elements within a form.
"JQuery Pocket Reference" has a great, exhaustive tutorial and reference on JQuery selectors.
As well, to access form values, use JQuery, not raw underlying Javascript DOM methods.
my_value =
$('div#home form[name=form2] text[name=transponderNo]').val()
Also, you need to insure that each "page" has a truly unique identifier. This is probably true in your case, but you do need to be careful with, say "edit" screens, where you may have multiple copies of the page loaded in the DOM. i.e. if you are editing a Thing, don't make the id "thing". Make it, say, "thing-1", where 1 is your database ID of the specific thing.
JQuery selector:
$('div#home form[name=form2]')
will select your first form, for example.
Use a similar approach to select elements within a form.
"JQuery Pocket Reference" has a great, exhaustive tutorial and reference on JQuery selectors.
As well, to access form values, use JQuery, not raw underlying Javascript DOM methods.
my_value =
$('div#home form[name=form2] text[name=transponderNo]').val()
Leave a comment on watusiware's reply
Thank you for responding, but the reply is too general. It still doesn't tell me what to do differently. For instance, the code in my second post: Is it wrong in the context of the index.html page I posted? Should it be different?
Leave a comment on stevenhus's reply
I don't know if it HAS to be different. I would experiment. But this isn't the "normal" way of going about this in JQ/JQM.
If you're coding using DOM methods, you're missing a major point of JQ/JQM - to use a universal API that hides the differences between browsers.
Try changing, for example:
var SOneDateFrom = document.form1b["SOneDateFrom"].value;
to:
var SOneDateFrom =
$('div#home form[name=form2] text[name=transponderNo]').val();
The easiest way to try-out things in JQ/JQM is to use a Javascript console, and type-in expressions and see if you get what you expect.
If you're coding using DOM methods, you're missing a major point of JQ/JQM - to use a universal API that hides the differences between browsers.
Try changing, for example:
var SOneDateFrom = document.form1b["SOneDateFrom"].value;
to:
var SOneDateFrom =
$('div#home form[name=form2] text[name=transponderNo]').val();
The easiest way to try-out things in JQ/JQM is to use a Javascript console, and type-in expressions and see if you get what you expect.
I am not proficient in JS so that won't work for me. I wouldn't know what to do differently. I used the above code from another source, then adapted it to fit my needs. It works on the first page/first form, but I'm stuck on the second form.
Oh well. Thanks for responding. I haven't gotten any other responses over the last 2-3 weeks on this topic over several different forums, though I've tried wording it in different ways.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to stevenhus's question
Statistics
- 9 Replies
- 3321 Views
- 0 Followers