Ideas to get the localStorage CRUD for this web app working

Question

This is my github link where you guys can see the app running. I managed to serialize the information stored into the localStorage and also display it. (click on display-data button after inserting something into the form).

The jqm.js file has all the code I managed to come up with. I would like it when I click on an item from the list (see outputData function from the jqm.js file) to add a dynamic page that links to the item I clicked on to show more information about that particular item.

Please guys, before coming up with a bunch of ways to "re-write" the whole thing, I'd like a solution (if there is any) to my current code. I'd like to work on my logic if possible rather than re-write the whole application from scratch. Thanks much for considering this detail when replaying. Any ideas or suggestions within this realm are more than appreciated. Thanks much in advance.

score 1 · Accepted Answer · edited May 23 '17 at 11:57

I have few idea's for you.

First I made you an example of how you can create a dynamic page after the click on a listview element: http://jsfiddle.net/Gajotres/nsfkx/

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a">
                <li data-id="1"><a>Dynamic page 1</a></li>
                <li data-id="1"><a>Dynamic page 2</a></li>
                <li data-id="1"><a>Dynamic page 3</a></li>
            </ul>    
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

JS :

$(document).on('pagecreate', '#index', function(){       
    $(document).on('click', '[data-role="listview"] li', function(event) {
        if(event.handled !== true) // This will prevent event triggering more then once
        {   
            console.log('click');            
            event.handled = true; // click event is handled, dont bind it again

            var nextPageId = parseInt($('body [data-role="page"]').length)+1;
            $('[data-role="page"]').last().after('<div data-role="page" id="article'+nextPageId+'"><div data-role="header" data-theme="b" data-position="fixed" data-id="footer"><h1>Articles</h1><a href="#" data-rel="back" data-role="button" data-theme="b" class="ui-btn-left">Back</a></div><div data-role="content"><p>Article '+nextPageId+'</p></div><div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"><h1>Footer</h1></div></article>');
            //console.log($('body').html());
            //$('#article'+nextPageId).trigger('pagecreate');
            $.mobile.changePage('#article'+nextPageId, {transition: "slide", reverse: false}, true, true); 
        }            
    });   
});

Second thing, because you are going to create dynamic content you will need to abandon document ready and switch to correct jquery Mobile page events.

If you want to find out more about jQuery Mobile page events take a look at this ARTICLE, or find it HERE.

Ideas to get the localStorage CRUD for this web app working

1 Answers1