noeticpenguin · April 29, 2013 15:18
diff --git a/meetupapp.html b/meetupapp.html
 <apex:page docType="html-5.0"
 showHeader="false" sidebar="false"
 standardController="Contact">          
 <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>Meetups</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 MeetupRecs = new Array();
    
    var restAPIClient = new forcetk.Client();
    restAPIClient.setSessionToken('{!$Api.Session_ID}');
    
    $j(document).ready(function() {
        regBtnClickHandlers();
        getAllMeetups();
    });
    
    function getAllMeetups(){
        $j.mobile.showPageLoadingMsg();
        var q = "select id, Name, Event_Date__c, Location__c from Meetup__c order by Event_Date__c";
        restAPIClient.query(q , 
            function(response) { 
             showMeetups(response.records); 
         }); 
    }
    
    function getAttendeesForMeetup(MeetupID){
        var q2 = "select id, First_Name__c, Last_Name__c, Member_Email__c, Member_Phone__c, (select id, Meetup__c from Attendance__r where Meetup__c ='"+MeetupID+"') from Members__c where Attendance__r.id != null order by Last_Name__c";
        restAPIClient.query(q2 , 
            function(response) { 
             showMeetups(response.records); 
         });
    }
    
    function showMeetups(records) {    
        $j('#cList').empty();
        MeetupRecs.length = 0;
        
        
        for(var i = 0; i < records.length; i++) { MeetupRecs[records[i].Id] = records[i]; }
            var x = 0;
        $j.each(records,
            function() {
                var newLi = $j('<li></li>');
                var aList = new Array();            
                var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ ' '+this.Event_Date__c+ '</a>');
                var MeetupID = this.Id;
                newLink.click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    var q2 = "select id, Members__r.First_Name__C, Members__r.Last_Name__c "+
                    "from Attendance__c where Meetup__r.id = '"+MeetupID+"'";
                    console.log(q2);
                    restAPIClient.query(q2 , function(r) { 
                        r = r.records;
                        for(var i = 0; i < r.length; i++) {
                            var boo = r[i];
                            console.log(boo);
                            var attendee = $j("<li>" + r[i].Members__r.First_Name__c + " " + r[i].Members__r.Last_Name__c + "</li>");
                            attendee.appendTo('#aList');
                            $j.mobile.changePage('#attendeespage', {changeHash: true});
                        }
                    },function(e){
                        console.log(e);
                    });

                });
                newLi.append(newLink);            
                newLi.appendTo('#cList');
                x++;
            });

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

 function addUpdateContact(e){
    e.preventDefault();
    var cId = $j('#contactId').val();
    var contact = { FirstName : $j('#fName').val(),
    LastName : $j('#lName').val(),
    Phone : $j('#phone').val()};
    if (cId === 'undefined' || cId === ''){
        restAPIClient.create('Contact', contact, sucessCallback, displayError); 
    } else {
        restAPIClient.update('Contact', cId, contact, sucessCallback, displayError); 
    }
 }

 function deleteContact(e){
    e.preventDefault();
    restAPIClient.del('Contact', $j('#contactId').val(), sucessCallback, displayError);
 }

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

 function displayError(e){
    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('#fName').val('');
        $j('#lName').val('');
        $j('#phone').val('');
        $j('#error').html('');
        $j('#contactId').val('');
        $j.mobile.changePage('#detailpage', {changeHash: true});
        $j.mobile.hidePageLoadingMsg();            
    });
    
    $j('#save').click(function(e) {
     addUpdateContact(e);
 });
    
    $j('#delete').click(function(e) {
     deleteContact(e);
 });
 }
 </script>    
 </head>

 <body>    
    <div data-role="page" data-theme="b" id="listpage">                
        <div data-role="header" data-position="fixed">
            <h2>Meetups!</h2>
            <a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
        </div>
        <div data-role="content" id="meetupList">            
            <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="attendeespage">
    <div data-role="header" data-position="fixed">
        <a href='#listpage' id="back2ContactList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
        <h1>Attendee List</h1>
    </div>
    <div data-role="content" id="alistfoo">              
        <ul id="aList" 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="Contact">
	<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>Meetups</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 MeetupRecs = new Array();

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

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

	function getAllMeetups(){
	$j.mobile.showPageLoadingMsg();
	var q = "select id, Name, Event_Date__c, Location__c from Meetup__c order by Event_Date__c";
	restAPIClient.query(q ,
	function(response) {
	showMeetups(response.records);
	});
	}

	function getAttendeesForMeetup(MeetupID){
	var q2 = "select id, First_Name__c, Last_Name__c, Member_Email__c, Member_Phone__c, (select id, Meetup__c from Attendance__r where Meetup__c ='"+MeetupID+"') from Members__c where Attendance__r.id != null order by Last_Name__c";
	restAPIClient.query(q2 ,
	function(response) {
	showMeetups(response.records);
	});
	}

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


	for(var i = 0; i < records.length; i++) { MeetupRecs[records[i].Id] = records[i]; }
	var x = 0;
	$j.each(records,
	function() {
	var newLi = $j('<li></li>');
	var aList = new Array();
	var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ ' '+this.Event_Date__c+ '</a>');
	var MeetupID = this.Id;
	newLink.click(function(e) {
	e.preventDefault();
	$j.mobile.showPageLoadingMsg();
	var q2 = "select id, Members__r.First_Name__C, Members__r.Last_Name__c "+
	"from Attendance__c where Meetup__r.id = '"+MeetupID+"'";
	console.log(q2);
	restAPIClient.query(q2 , function(r) {
	r = r.records;
	for(var i = 0; i < r.length; i++) {
	var boo = r[i];
	console.log(boo);
	var attendee = $j("<li>" + r[i].Members__r.First_Name__c + " " + r[i].Members__r.Last_Name__c + "</li>");
	attendee.appendTo('#aList');
	$j.mobile.changePage('#attendeespage', {changeHash: true});
	}
	},function(e){
	console.log(e);
	});

	});
	newLi.append(newLink);
	newLi.appendTo('#cList');
	x++;
	});

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

	function addUpdateContact(e){
	e.preventDefault();
	var cId = $j('#contactId').val();
	var contact = { FirstName : $j('#fName').val(),
	LastName : $j('#lName').val(),
	Phone : $j('#phone').val()};
	if (cId === 'undefined' \|\| cId === ''){
	restAPIClient.create('Contact', contact, sucessCallback, displayError);
	} else {
	restAPIClient.update('Contact', cId, contact, sucessCallback, displayError);
	}
	}

	function deleteContact(e){
	e.preventDefault();
	restAPIClient.del('Contact', $j('#contactId').val(), sucessCallback, displayError);
	}

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

	function displayError(e){
	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('#fName').val('');
	$j('#lName').val('');
	$j('#phone').val('');
	$j('#error').html('');
	$j('#contactId').val('');
	$j.mobile.changePage('#detailpage', {changeHash: true});
	$j.mobile.hidePageLoadingMsg();
	});

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

	$j('#delete').click(function(e) {
	deleteContact(e);
	});
	}
	</script>
	</head>

	<body>
	<div data-role="page" data-theme="b" id="listpage">
	<div data-role="header" data-position="fixed">
	<h2>Meetups!</h2>
	<a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
	</div>
	<div data-role="content" id="meetupList">
	<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="attendeespage">
	<div data-role="header" data-position="fixed">
	<a href='#listpage' id="back2ContactList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
	<h1>Attendee List</h1>
	</div>
	<div data-role="content" id="alistfoo">
	<ul id="aList" data-filter="true" data-inset="true" data-role="listview"
	data-theme="c" data-dividertheme="b">
	</ul>
	</div>
	</div>
	</body>
	</apex:page>