Hey guys! Remember jackbauer24? I'm the same guy, but for some reason can't log into my account. So this is my new account. Anyways, here is my code:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- Bootstrap and jQuery UI CSS Libraries are included here -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.22.custom.css">
<!-- jQuery, jQuery UI and JS Grid scripts are included here -->
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.22.custom.min.js"></script>
<script src="scripts/grid.js"></script>
<!-- The following three scripts are included for drawing charts -->
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/min/g.raphael-min.js"></script>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.line-min.js?raw=true"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
function addItemTable() {
var headings = {
'name': 'Name',
'inStock': 'In Stock?',
'date': 'Date added',
'price': 'Price'
};
var types = {
'name': {'type': 'text'},
'inStock': {'type': 'select', 'source': {'yes' : 'Yes', 'no': 'No'}},
'date': {'type': 'text'},
'price': {'type': 'text'}
};
renderGrid({
'label': headings,
'element_type': types,
'data': null,
'container': 'table',
'id': 'holder',
'addVisible': true,
'deleteVisible': true,
'saveVisible': true,
'actionButtonPosition': 'line',
'onSave': onSave,
'onDelete': onDelete
});
$(".date").datepicker();
}
addItemTable();
});
function makeTableOnSearch(data){
var headings = {
'name': 'Name',
'inStock': 'In Stock?',
'dateS': 'Date added',
'price': 'Price'
};
var types = {
'name': {'type': 'readOnly'},
'inStock': {'type': 'readOnly'},
'dateS': {'type': 'readOnly'},
'price': {'type': 'readOnly'}
};
renderGrid({
'label': headings,
'element_type': types,
'data': data,
'container': 'table',
'id': 'searchTable'
});
};
$("#search").live('click', function(){
var searchKey = $("#searchBox").val();
var item = localStorage.getItem(searchKey);
item = JSON.parse(item);
makeTableOnSearch(item);
});
function onSave() {
$('.eachRow').each(function(current_key, cur_row){
var rows = [];
var name = $(cur_row).find('.name').val();
var inStock = $(cur_row).find('.inStock').val();
var date = $(cur_row).find('.date').val();
var price = $(cur_row).find('.price').val();
var obj = {
'name': name,
'inStock': inStock,
'date': date,
'price': price
};
rows.push(obj);
rows = JSON.stringify(rows);
localStorage.setItem(name, rows);
});
};
function onDelete() {
$(this).remove();
localStorage.clear();
onSave();
};
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href="#addItem">Add Item</a></li>
<li><a href="#searchItem">Search Item</a></li>
</ul>
<div id = "addItem">
<div id = "holder" style = "height: 500px"></div>
</div>
<div id = "searchItem">
<div id = "well">
Item Name: <input id = "searchBox" type = "text"/>
<button id = "search" class = "btn btn-info">Search!</button>
<div id = "searchTable" style = "height: 500px"></div>
</div>
</div>
</div>
</body>
</html>
Test this code. So the add item works fine, saves to local storage, I can even access it using localStorage.getItem(); but the search item just gives me "undefined undefined undefined undefined." What is wrong?
P.S. tell me how the web app is.
Signing off,
jackbauer24