sbhanot-sfdc/gist:5415001

## gistfile1.html
<apex:page docType="html-5.0"
         showHeader="false" sidebar="false"
		   standardController="Account">
    <!--c:RemoteTK /-->
	<apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'ForceTk.js')}"/>
    <head>
		<title>Accounts</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <script type="text/javascript">
            var $j = jQuery.noConflict();
            var acctsRecs = new Array();

            var restAPIClient = new forcetk.Client();
            restAPIClient.setSessionToken('{!$Api.Session_ID}');
            //var restAPIClient = new remotetk.Client();

            $j(document).ready(function() {
            	regBtnClickHandlers();
                getAllAccounts();
            });

            function getAllAccounts(){
                $j.mobile.showPageLoadingMsg();
                var q = "select id, Name, Phone, AnnualRevenue from Account order by Name limit 50";
                restAPIClient.query(q ,
                            function(response) {
                                   showAccounts(response.records);
                                });
            }

            function showAccounts(records) {
                $j('#cList').empty();
                acctsRecs.length = 0;


                for(var i = 0; i < records.length; i++) { acctsRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,
                    function() {
                    var newLi = $j('<li></li>');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#Name').val(acctsRecs[this.id].Name);
                        $j('#Phone').val(acctsRecs[this.id].Phone);
                        $j('#AnnualRevenue').val(acctsRecs[this.id].AnnualRevenue);
                        $j('#acctId').val(acctsRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#detailpage', {changeHash: true});
                    });
                    newLi.append(newLink);
                    newLi.appendTo('#cList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#cList').listview('refresh');
            }

            function addUpdateAccount(e){
                e.preventDefault();
                var cId = $j('#acctId').val();
                var acct = { 	Name : $j('#Name').val(),
                                Phone : $j('#Phone').val(),
                                AnnualRevenue : $j('#AnnualRevenue').val()};
                if (cId === 'undefined' || cId === ''){
                    restAPIClient.create('Account', acct, sucessCallback, displayError);
                } else {
                    restAPIClient.update('Account', cId, acct, sucessCallback, displayError);
                }
            }

            function deleteAccount(e){
                e.preventDefault();
                restAPIClient.del('Account', $j('#acctId').val(), sucessCallback, displayError);
            }

            function sucessCallback(r){
                getAllAccounts();
                $j.mobile.changePage('#listpage', {changeHash: true});
            }

            function displayError(e){
				if (e.responseText === undefined){
					$j('#error').html(e[0].message);
				}else{
                	var error = JSON.parse(e.responseText);
                	$j('#error').html(error[0].message);
				}
            }

            function regBtnClickHandlers() {
                $j('#add').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#Name').val('');
                    $j('#Phone').val('');
                    $j('#AnnualRevenue').val('');
                    $j('#error').html('');
                    $j('#acctId').val('');
                    $j.mobile.changePage('#detailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();
                });

                $j('#save').click(function(e) {
                   addUpdateAccount(e);
                });

                $j('#delete').click(function(e) {
                   deleteAccount(e);
                });

				$j('#opps').click(function(e) {
					e.preventDefault();
                    getRelatedOpportunities(e);
                });

			}

            function getRelatedOpportunities(){
				$j('#oppList').empty();
                $j.mobile.showPageLoadingMsg();
				var cId = $j('#acctId').val();
                var q = "select Name from Opportunity where accountId='"+cId+"'";
                restAPIClient.query(q ,
                            function(response) {
                                $j.each(response.records,
                                    function() {
                                    var newLi = $j('<li></li>');

                                    var newLink = $j('<h3>' +this.Name+ '</h3>');
                                    newLi.append(newLink);
                                    newLi.appendTo('#oppList');
                                  });
                                $j.mobile.changePage('#oppsPage', {changeHash: true});
                                $j.mobile.hidePageLoadingMsg();
                                $j('#oppList').listview('refresh');
							});
            }

		</script>
	</head>

    <body>
        <div data-role="page" data-theme="b" id="listpage">
            <div data-role="header" data-position="fixed">
                <h2>Accounts</h2>
	            <a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
            </div>
            <div data-role="content" id="acctList">
                <ul id="cList" data-filter="true" data-inset="true" data-role="listview"
                    data-theme="c" data-dividertheme="b">
                </ul>
            </div>
        </div>

        <div data-role="page" data-theme="b" id="detailpage">
            <div data-role="header" data-position="fixed">
                <a href='#listpage' id="back2AcctList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
                <h1>Account Details</h1>
                <a href='#' id="opps" class='ui-btn-right' data-icon='grid' data-transition="flip">Opportunities</a>
            </div>
            <div data-role="content">
				<div data-role="fieldcontain">
					<label for="Name">Name:</label>
					<input name="Name" id="Name" />
				</div>
				<div data-role="fieldcontain">
					<label for="Phone">Phone:</label>
					<input name="Phone" id="Phone"/>
				</div>
				<div data-role="fieldcontain">
					<label for="AnnualRevenue">Annual Revenue: $</label>
					<input name="AnnualRevenue" id="AnnualRevenue"/>
				</div>
				<h2 style="color:red" id="error"></h2><br/>
                <input type="hidden" id="acctId" />
				<button id="save" data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
				<button id="delete" data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
            </div>
        </div>
        <div data-role="page" data-theme="b" id="oppsPage">
            <div data-role="header" data-position="fixed">
                <a href='#detailpage' class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Account</a>
                <h1>Related Opportunities</h1>
            </div>
            <div data-role="content">
                <ul id="oppList" data-filter="true" data-inset="true" data-role="listview"
                    data-theme="c" data-dividertheme="b">
                </ul>
            </div>
        </div>
    </body>
</apex:page>
	<apex:page docType="html-5.0"
	showHeader="false" sidebar="false"
	standardController="Account">
	<!--c:RemoteTK /-->
	<apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'ForceTk.js')}"/>
	<head>
	<title>Accounts</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script type="text/javascript">
	var $j = jQuery.noConflict();
	var acctsRecs = new Array();

	var restAPIClient = new forcetk.Client();
	restAPIClient.setSessionToken('{!$Api.Session_ID}');
	//var restAPIClient = new remotetk.Client();

	$j(document).ready(function() {
	regBtnClickHandlers();
	getAllAccounts();
	});

	function getAllAccounts(){
	$j.mobile.showPageLoadingMsg();
	var q = "select id, Name, Phone, AnnualRevenue from Account order by Name limit 50";
	restAPIClient.query(q ,
	function(response) {
	showAccounts(response.records);
	});
	}

	function showAccounts(records) {
	$j('#cList').empty();
	acctsRecs.length = 0;


	for(var i = 0; i < records.length; i++) { acctsRecs[records[i].Id] = records[i]; }
	var x = 0;
	$j.each(records,
	function() {
	var newLi = $j('<li></li>');

	var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ '</a>');
	newLink.click(function(e) {
	e.preventDefault();
	$j.mobile.showPageLoadingMsg();
	$j('#Name').val(acctsRecs[this.id].Name);
	$j('#Phone').val(acctsRecs[this.id].Phone);
	$j('#AnnualRevenue').val(acctsRecs[this.id].AnnualRevenue);
	$j('#acctId').val(acctsRecs[this.id].Id);
	$j('#error').html('');

	$j.mobile.changePage('#detailpage', {changeHash: true});
	});
	newLi.append(newLink);
	newLi.appendTo('#cList');
	x++;
	});

	$j.mobile.hidePageLoadingMsg();
	$j('#cList').listview('refresh');
	}

	function addUpdateAccount(e){
	e.preventDefault();
	var cId = $j('#acctId').val();
	var acct = { Name : $j('#Name').val(),
	Phone : $j('#Phone').val(),
	AnnualRevenue : $j('#AnnualRevenue').val()};
	if (cId === 'undefined' \|\| cId === ''){
	restAPIClient.create('Account', acct, sucessCallback, displayError);
	} else {
	restAPIClient.update('Account', cId, acct, sucessCallback, displayError);
	}
	}

	function deleteAccount(e){
	e.preventDefault();
	restAPIClient.del('Account', $j('#acctId').val(), sucessCallback, displayError);
	}

	function sucessCallback(r){
	getAllAccounts();
	$j.mobile.changePage('#listpage', {changeHash: true});
	}

	function displayError(e){
	if (e.responseText === undefined){
	$j('#error').html(e[0].message);
	}else{
	var error = JSON.parse(e.responseText);
	$j('#error').html(error[0].message);
	}
	}

	function regBtnClickHandlers() {
	$j('#add').click(function(e) {
	e.preventDefault();
	$j.mobile.showPageLoadingMsg();
	$j('#Name').val('');
	$j('#Phone').val('');
	$j('#AnnualRevenue').val('');
	$j('#error').html('');
	$j('#acctId').val('');
	$j.mobile.changePage('#detailpage', {changeHash: true});
	$j.mobile.hidePageLoadingMsg();
	});

	$j('#save').click(function(e) {
	addUpdateAccount(e);
	});

	$j('#delete').click(function(e) {
	deleteAccount(e);
	});

	$j('#opps').click(function(e) {
	e.preventDefault();
	getRelatedOpportunities(e);
	});

	}

	function getRelatedOpportunities(){
	$j('#oppList').empty();
	$j.mobile.showPageLoadingMsg();
	var cId = $j('#acctId').val();
	var q = "select Name from Opportunity where accountId='"+cId+"'";
	restAPIClient.query(q ,
	function(response) {
	$j.each(response.records,
	function() {
	var newLi = $j('<li></li>');

	var newLink = $j('<h3>' +this.Name+ '</h3>');
	newLi.append(newLink);
	newLi.appendTo('#oppList');
	});
	$j.mobile.changePage('#oppsPage', {changeHash: true});
	$j.mobile.hidePageLoadingMsg();
	$j('#oppList').listview('refresh');
	});
	}

	</script>
	</head>

	<body>
	<div data-role="page" data-theme="b" id="listpage">
	<div data-role="header" data-position="fixed">
	<h2>Accounts</h2>
	<a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
	</div>
	<div data-role="content" id="acctList">
	<ul id="cList" data-filter="true" data-inset="true" data-role="listview"
	data-theme="c" data-dividertheme="b">
	</ul>
	</div>
	</div>

	<div data-role="page" data-theme="b" id="detailpage">
	<div data-role="header" data-position="fixed">
	<a href='#listpage' id="back2AcctList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
	<h1>Account Details</h1>
	<a href='#' id="opps" class='ui-btn-right' data-icon='grid' data-transition="flip">Opportunities</a>
	</div>
	<div data-role="content">
	<div data-role="fieldcontain">
	<label for="Name">Name:</label>
	<input name="Name" id="Name" />
	</div>
	<div data-role="fieldcontain">
	<label for="Phone">Phone:</label>
	<input name="Phone" id="Phone"/>
	</div>
	<div data-role="fieldcontain">
	<label for="AnnualRevenue">Annual Revenue: $</label>
	<input name="AnnualRevenue" id="AnnualRevenue"/>
	</div>
	<h2 style="color:red" id="error"></h2><br/>
	<input type="hidden" id="acctId" />
	<button id="save" data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
	<button id="delete" data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
	</div>
	</div>
	<div data-role="page" data-theme="b" id="oppsPage">
	<div data-role="header" data-position="fixed">
	<a href='#detailpage' class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Account</a>
	<h1>Related Opportunities</h1>
	</div>
	<div data-role="content">
	<ul id="oppList" data-filter="true" data-inset="true" data-role="listview"
	data-theme="c" data-dividertheme="b">
	</ul>
	</div>
	</div>
	</body>
	</apex:page>