metadaddy/MobileInventory.page

## MobileInventory.page
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"
           standardController="Merchandise__c" extensions="MobileInventoryExtension"
           recordSetVar="products">

    <head>
        <title>Mobile Inventory</title>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

        <apex:stylesheet value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.css')}" />
        <apex:stylesheet value="{!$Resource.style}" />
        <apex:includeScript value="{!$Resource.jquery191}"/>
        <apex:includeScript value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.js')}"/>

        <script>
        var dataChanged = false;

        // Log JS errors to console
        window.onerror = function(message, url, lineNumber) {
            console.log("Error: "+message+" in "+url+" at line "+lineNumber);
        };

        $(document).ready(function() {
            $(".reloadLink").click(function() {
                // true forces the page to be reloaded from the server
                location.reload(true);
            });

            $(".updateButton").click(function() {
                var id = $(this).attr('data-id');
                var merchRecord = {
                    id: id,
                    Quantity__c: parseInt($("#quantity"+id).val()),
                    Price__c: parseFloat($("#price"+id).val())
                };
                $.mobile.showPageLoadingMsg();
                MobileInventoryExtension.updateMerchandiseItem(merchRecord, handleUpdate);
            });
        });

        function handleUpdate(result,event) {
            console.log('Response from server: '+result);
            alert(result);
            if (result == 'Item Updated') {
                dataChanged = true;
            }
            $.mobile.hidePageLoadingMsg();
        }
        </script>
    </head>

    <body>
        <!-- Main page, to display list of Merchandise once app starts -->
        <div data-role="page" data-theme="b" id="mainpage">
            <!-- page header -->
            <div  data-role="header">
                <!-- button for reloading the page -->
                <a href='#' class="reloadLink" data-role="button" data-icon='refresh'>
                    Reload
                </a>
                <!-- page title -->
                <h2>Merchandise</h2>
            </div>
            <!-- page content -->
            <div id="#content" data-role="content">
                <img class="logo" width="200" src="{!$Resource.logo}"></img>
                <!-- list of merchandise, links to detail pages -->
                <ul data-inset="true" data-role="listview" data-theme="a"
                    data-dividertheme="a">
                    <apex:repeat value="{!products}" var="product">
                        <li>
                            <a href="#detailpage{!product.Id}">
                                {!product.Name}
                            </a>
                        </li>
                    </apex:repeat>
                </ul>
            </div>
        </div>

        <!-- Detail page, to display details when user clicks specific Merchandise record -->
        <apex:repeat value="{!products}" var="product">
            <div data-role="page" data-theme="b" id="detailpage{!product.Id}">
                <!-- page header -->
                <div data-role="header">
                    <!-- button for going back to mainpage -->
                    <a href='#mainpage' id="backInventory" class='ui-btn-left'
                       data-icon='home'>
                        Home
                    </a>
                    <!-- page title -->
                    <h1>Edit</h1>
                </div>
                <!-- page content -->
                <div id="#content" data-role="content">
                    <h2 id="name">
                        <apex:outputField value="{!product.Name}"/>
                    </h2>
                    <div data-role="fieldcontain">
                        <label for="quantity{!product.Id}">Quantity:</label>
                        <input type="text" id="quantity{!product.Id}"
                               value="{!ROUND(product.Quantity__c, 0)}"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="price{!product.Id}">Price ($):</label>
                        <input type="text" id="price{!product.Id}"
                               value="{!product.Price__c}"/>
                    </div>
                    <a href="#" data-role="button" data-id="{!product.Id}"
                       class="updateButton" data-theme="b">
                        Update
                    </a>
                </div>
            </div>
        </apex:repeat>
    </body>

</apex:page>
	<apex:page standardStylesheets="false" showHeader="false" sidebar="false"
	standardController="Merchandise__c" extensions="MobileInventoryExtension"
	recordSetVar="products">

	<head>
	<title>Mobile Inventory</title>
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

	<apex:stylesheet value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.css')}" />
	<apex:stylesheet value="{!$Resource.style}" />
	<apex:includeScript value="{!$Resource.jquery191}"/>
	<apex:includeScript value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.js')}"/>

	<script>
	var dataChanged = false;

	// Log JS errors to console
	window.onerror = function(message, url, lineNumber) {
	console.log("Error: "+message+" in "+url+" at line "+lineNumber);
	};

	$(document).ready(function() {
	$(".reloadLink").click(function() {
	// true forces the page to be reloaded from the server
	location.reload(true);
	});

	$(".updateButton").click(function() {
	var id = $(this).attr('data-id');
	var merchRecord = {
	id: id,
	Quantity__c: parseInt($("#quantity"+id).val()),
	Price__c: parseFloat($("#price"+id).val())
	};
	$.mobile.showPageLoadingMsg();
	MobileInventoryExtension.updateMerchandiseItem(merchRecord, handleUpdate);
	});
	});

	function handleUpdate(result,event) {
	console.log('Response from server: '+result);
	alert(result);
	if (result == 'Item Updated') {
	dataChanged = true;
	}
	$.mobile.hidePageLoadingMsg();
	}
	</script>
	</head>

	<body>
	<!-- Main page, to display list of Merchandise once app starts -->
	<div data-role="page" data-theme="b" id="mainpage">
	<!-- page header -->
	<div data-role="header">
	<!-- button for reloading the page -->
	<a href='#' class="reloadLink" data-role="button" data-icon='refresh'>
	Reload
	</a>
	<!-- page title -->
	<h2>Merchandise</h2>
	</div>
	<!-- page content -->
	<div id="#content" data-role="content">
	<img class="logo" width="200" src="{!$Resource.logo}"></img>
	<!-- list of merchandise, links to detail pages -->
	<ul data-inset="true" data-role="listview" data-theme="a"
	data-dividertheme="a">
	<apex:repeat value="{!products}" var="product">
	<li>
	<a href="#detailpage{!product.Id}">
	{!product.Name}
	</a>
	</li>
	</apex:repeat>
	</ul>
	</div>
	</div>

	<!-- Detail page, to display details when user clicks specific Merchandise record -->
	<apex:repeat value="{!products}" var="product">
	<div data-role="page" data-theme="b" id="detailpage{!product.Id}">
	<!-- page header -->
	<div data-role="header">
	<!-- button for going back to mainpage -->
	<a href='#mainpage' id="backInventory" class='ui-btn-left'
	data-icon='home'>
	Home
	</a>
	<!-- page title -->
	<h1>Edit</h1>
	</div>
	<!-- page content -->
	<div id="#content" data-role="content">
	<h2 id="name">
	<apex:outputField value="{!product.Name}"/>
	</h2>
	<div data-role="fieldcontain">
	<label for="quantity{!product.Id}">Quantity:</label>
	<input type="text" id="quantity{!product.Id}"
	value="{!ROUND(product.Quantity__c, 0)}"/>
	</div>
	<div data-role="fieldcontain">
	<label for="price{!product.Id}">Price ($):</label>
	<input type="text" id="price{!product.Id}"
	value="{!product.Price__c}"/>
	</div>
	<a href="#" data-role="button" data-id="{!product.Id}"
	class="updateButton" data-theme="b">
	Update
	</a>
	</div>
	</div>
	</apex:repeat>
	</body>

	</apex:page>