<apex:page controller="TestController" showHeader="false">
<apex:includeScript value="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" />
<apex:includeScript value="{!$Resource.jQote2}"/>

<script>
    var contacts = new Array();
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('#update').click(function() {
            j$('.lastNameInput').each(function(index) {
                for(var x = 0; x < contacts.length; x++) {
                    console.log(j$(this).attr('id'));
                    if(contacts[x].Id == j$(this).attr('id')) {
                        if(contacts[x].LastName != j$(this).val()) {
                                console.log("Updating "+contacts[x].LastName);
                                contacts[x].LastName = j$(this).val();
                                }
                        }
                }
            });
        	TestController.updateContacts(contacts,function(response,message) {
                if(response) {
                                console.log('Updated');
                                for (myKey in message){alert ("message["+myKey +"] = "+message[myKey]);}
                                }
                });
        });
    });

    function getMyContacts() {
        TestController.pullCurrentContacts(function(records,message) {
            contacts = records;
            j$('#contactList').jqoteapp('#contacts_tmpl', contacts);
            for (myKey in records[0]){
                console.log ("contacts[0]["+myKey +"] = "+contacts[0][myKey]);
                }
        });
    }
</script>
    <button onclick="getMyContacts()">Click Me</button>
    <ul id="contactList">
	<script type="text/x-jqote-template" id="contacts_tmpl">
	 <li>Contact: <input type="text" class="lastNameInput" id="<%=this.Id%>" value="<%= this.LastName %>">, <input type="text" value="<%= this.Account.Name %>"></li>
	</script>
    </ul><button id="update">Update</button>
</apex:page>