i have been working on homework assignment time, , stuck.
html file
<html> <head> <title>web storage tester</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" media="screen" href="../../css/snippets.css" /> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../../js/json2.js"></script> <script type="text/javascript" src="../../js/prowebapps.js"></script> <script type="text/javascript" src="webstorage-test.js"></script> </head> <body> <h1 class="fancy"><web storage > web storage json wrapper</h1> <ul id="items"> <li class="header">items in storage (tap remove)</li> </ul> <ul id="newitem"> <li class="header">new item</li> <li class="bordered"><input type="text" id="newtitle" placeholder="title" /></li> </ul> <ul id="actions"> <li><button id="add"> add </button></li> <li><button id="clear">clear</button></li> </ul> </body> </html> javascript file
$(document).ready(function() { // read data local storage items var items = prowebapps.storage.get("listitems"); var loadticks = new date().gettime(); function displayitems() { loadticks = new date().gettime(); $("#items li[class!='header']").remove(); if (items) { // create list items display current items (var ii = 0; ii < items.length; ii++) { var itemage = math.floor((loadticks - items[ii].created) / 1000); $("#items").append("<li>" + items[ii].title + " (created " + itemage + "s ago)</li>"); } // } else { $("#items").append("<li>no items</li>"); // initialise items array items = []; } // if..else } // displayitems $(document.getelementbyid.("#add")).addbutton(function(){ //function addbutton(){ alart("added"); items.push({ title: $("#newtitle").val(); created: new date().gettime(); }); prowebapps.storage.set("listitems", items); displayitems(); }); $("#clear").click(function() { alart("clear"); items = null; prowebapps.storage.remove("listitems"); displayitems(); }); displayitems(); }); my buttons not working. used method in book , able find online , still not working. did check source files, , correct since css file working. ideas on going on?
check fiddle
html
<h1 class="fancy"><web storage > web storage json wrapper</h1> <ul id="items"> <li class="header">items in storage (tap remove)</li> </ul> <ul id="newitem"> <li class="header">new item</li> <li class="bordered"><input type="text" id="newtitle" placeholder="title" /></li> </ul> <ul id="actions"> <li><button id="add"> add </button></li> <li><button id="clear">clear</button></li> </ul> jquery
// read data local storage items var items = []; var loadticks = new date().gettime(); function displayitems() { loadticks = new date().gettime(); //items =localstorage.getitem("listitems"); items= json.parse(localstorage.getitem("listitems")); $("#items li[class!='header']").remove(); if (items) { // create list items display current items (var ii = 0; ii < items.length; ii++) { if(typeof items[ii].title !== 'undefined') { var itemage = math.floor((loadticks - items[ii].created) / 1000); $("#items").append("<li>" + items[ii].title + " (created " + itemage + "s ago)</li>"); } // } } else { $("#items").append("<li>no items</li>"); items = []; } // if..else } // displayitems $("#add").click(function(){ items.push({ title: $("#newtitle").val(), created: new date().gettime() }); localstorage.setitem("listitems", json.stringify(items)); displayitems(); $("#newtitle").val(''); }); $("#clear").click(function() { alert("clear"); items.length = 0; localstorage.removeitem("listitems"); displayitems(); }); displayitems(); 
Comments
Post a Comment