0

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

2
Contributors
6
Replies
7
Views
5 Years
Discussion Span
Last Post by jackbauer24-2
0

Test this code

For that, you will need to provide the missing javascript file (grid.js). Are you sure you have the correct name/path to the grid.js file?

Edited by hielo

0

Thanks a lot hielo!!!! My main problem is solved. One more thing, when I load an entry, the Date field is empty. I think I know the problem, what I think is that datepicker field is not recognised as text. How to solve this, anyone? And hows the app?

0

when I load an entry

I don't know what you mean by that. What exactly are you doing? Provide step-by-step instructions.

0

first thing, use my webpage. you can save things(record like things to be precise that are stored in localstorage). and you can load. But the date field is empty. how to solve that?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.