jQM - Lawnchair example

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>File Writer</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>      
    <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>    
    <!--<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>-->
    <script type="text/javascript" charset="utf-8" src="http://brian.io/lawnchair/downloads/lawnchair-0.6.1.min.js"></script>
    <!--<script type="text/javascript" charset="utf-8" src="js/dom.js"></script>-->
  </head>
  <body>
  	<div data-role="page" id="page" data-theme="b">
		<div data-role="header" data-theme="b">
			<h4>Lawnchair</h4>
		</div>
		<div data-role="content">	
		    <form>
                <label for="id">ID</label><br/>
                <input id="id" value="0" disabled="disabled"/><br/>
                <label for="name">Name</label><br/>
                <input id="name" /><br/>
                <label for="desc">Description</label><br/>
                <input id="desc" /><br/>
			<input type="button" value="Save" id="save"/>
			<input type="button" value="Delete" id="del"/>
			</form>
		</div>
		<div>
			 <ul id="show_list">
			 </ul>
		<div>
	    <div data-role="footer" data-theme="b">
			<h4>August Infotech Demo &copy; 2012</h4>
		</div>
	</div>
  </body>
</html>

JavaScript

$(function(e) {
    
		var details = Lawnchair({name:'details',adapter:'dom'},function(e){
			//this.nuke();
		});
		
		details.all(function(data){
			for(var i = 0; i<data.length;i++)
			{
				//alert(data.length);
				var id = data.length + 1;
				//alert(id);
				document.getElementById("id").value = id;
				var listdiv = document.createElement('li');
            	listdiv.setAttribute('id','listdiv' + i);
            	listdiv.innerHTML = "ID : " + data[i].value.id + " | " + "Name : " + data[i].value.name + " | " + "Desc : " + data[i].value.desc;
            	$('#show_list').append(listdiv);
            	//$('#show_list').listview('refresh');
			}
            $('#show_list').listview().listview('refresh');            
		});
		
		$('#save').click(function(e){
			var obj1 = {id:$('#id').val(),name:$('#name').val(),desc:$('#desc').val()};
			//alert("listdiv" + obj1.id);
			details.save({key:"listdiv" + obj1.id,value:obj1});
			//alert("Data Saved Successfully");

            details.all(function(data){
                //$('#show_list').empty();
                for(var i = 0; i<data.length;i++)
                {
                    //alert(data.length);
                    var id = data.length + 1;
                    //alert(id);
                    document.getElementById("id").value = id;
                    var listdiv = document.createElement('li');
                    listdiv.setAttribute('id','listdiv' + i);
                    listdiv.innerHTML = "ID : " + data[i].value.id + " | " + "Name : " + data[i].value.name + " | " + "Desc : " + data[i].value.desc;
                    $('#show_list').append(listdiv);
                }
                $('#show_list').listview().listview('refresh');             
            });          
            
		});
		
		
	$('#del').click(function(e){
		if(document.getElementById("name").value != "")
		{
			var id = document.getElementById("id").value;
			details.remove("listdiv" +...