Created
April 12, 2012 20:18
-
-
Save dgs700/2370713 to your computer and use it in GitHub Desktop.
A singleton / module object and its use plus lots of jQuery from a non-profit client
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Example of a singleton object and its use for protected member access and | |
| extensive use of jQuery. This code manages validation and ajax submits of form data, | |
| and is used to display / hide panes in a wizard form plus build an extra data field | |
| with all the form data for email notification. The code is used on a non-profit | |
| website for it's annual golf and banquet fundraising events. | |
| */ | |
| var eventMgr = (function (global) { | |
| var donationTotal = 0, | |
| guestTotal = 0, | |
| playerTotal = 0, | |
| actionTarget = '', | |
| donor = '', | |
| $ = global.$; | |
| return{ | |
| getDonationTotal: function(){ | |
| return donationTotal; | |
| }, | |
| setDonationTotal: function(v){ | |
| donationTotal = v; | |
| }, | |
| getGuestTotal: function(){ | |
| return guestTotal; | |
| }, | |
| setGuestTotal: function(v){ | |
| guestTotal = v; | |
| }, | |
| getPlayerTotal: function(){ | |
| return playerTotal; | |
| }, | |
| setPlayerTotal: function(v){ | |
| playerTotal = v; | |
| }, | |
| getActionTarget: function(){ | |
| return actionTarget; | |
| }, | |
| setActionTarget: function(v){ | |
| actionTarget = v; | |
| }, | |
| clearValue: function(e){ | |
| if($(this).val() === 'required'){ | |
| $(this).val(''); | |
| } | |
| $(this).removeClass('required'); | |
| }, | |
| nextPrevious: function(){ | |
| $(actionTarget.hideDiv).hide(); | |
| $(actionTarget.showDiv).show(); | |
| }, | |
| //builds a string with all form values and labels for a latter email submission | |
| //ideally it should enumerate over the form fields and utilize an html template | |
| addDetails: function(){ | |
| donor += 'Donor Name: ' + $('#DonorFirstName').val() + ' ' + $('#DonorLastName').val() + '<br/>'; | |
| donor += 'Phone: ' + $('#DonorPhone1').val() + '<br/>'; | |
| donor += 'Email: ' + $('#DonorEmail').val() + '<br/>'; | |
| donor += 'Address: ' + $('#DonorAddress').val() + '<br/>'; | |
| donor += 'City: ' + $('#DonorCity').val() + '<br/>'; | |
| donor += 'State: ' + $('#DonorState').val() + '<br/>'; | |
| donor += 'Zipcode: ' + $('#DonorZipcode').val() + '<br/>'; | |
| donor += 'Phone2: ' + $('#DonorPhone2').val() + '<br/>'; | |
| if($('#event_type').val() === 'golf'){ | |
| donor += ($('#wildcard:checked') > 0) ? 'Wildcard: $' + $('#wildcard:checked').metadata().amt + '<br/>' : ''; | |
| donor += 'Number of players: ' + $('input.players:checked').val() + '<br/>'; | |
| donor += 'Number of additional lunch guests: ' + $('select.guests > :selected').val() + '<br/>'; | |
| $('.playerName').each(function(e){ | |
| donor += 'Player ' + e + ': ' + $(this).val() + '<br/>'; | |
| }); | |
| $('.guestName').each(function(e){ | |
| donor += 'Lunch guest ' + e + ': ' + $(this).val() + '<br/>'; | |
| }); | |
| }else if($('#event_type').val() === 'banquet'){ | |
| donor += 'Number of places: ' + $('#DonorNumPlaces').val() + '<br/>'; | |
| donor += 'Number of tables: ' + $('#DonorNumTables1').val() + '<br/>'; | |
| donor += 'Number of tables with advertising: ' + $('#DonorNumTables2').val() + '<br/>'; | |
| donor += 'Number of child sponsorships: ' + $('#DonorNumKids').val() + '<br/>'; | |
| donor += 'Number of raffle tickets: ' + $('#DonorNumTix').val() + '<br/>'; | |
| $('.guestName').each(function(e){ | |
| donor += 'Guest name & meal choice ' + e + ': ' + $(this).val() + ', ' + $('.mealChoice_'+e+':checked').val() + '<br/>'; | |
| }); | |
| } | |
| donor += $('#DonorVolunteer:checked').val() === 'Yes' ? 'Additional Volunteering info requested. <br/>' : ''; | |
| donor += $('#DonorBoard:checked').val() === 'Yes' ? 'Additional Board of Directors info requested. <br/>' : ''; | |
| donor += 'Total Donation Amount: ' + $('#total_donation').val() + '<br/>'; | |
| donor += 'Prefered payment method: ' + $('.payment:checked').val(); | |
| return donor; | |
| } | |
| }; | |
| }(window)); | |
| $(function(window){ | |
| var eventMgr = window.eventMgr; | |
| $('input#DonorPhone1').mask("(999) 999-9999"); | |
| $('input#DonorPhone2').mask("(999) 999-9999"); | |
| $('input#DonorZipcode').keyfilter(/[\d]/); | |
| $('.donation').keyfilter(/[\d]/); | |
| $('#wildcard').click(function(){ | |
| $(this).toggleClass('donation'); | |
| }); | |
| $('input[name=players]:radio').click(function(){ | |
| $('input[name=players]:radio').removeClass('donation'); | |
| $(this).addClass('donation'); | |
| }); | |
| $('.updateTotal').click(function(){ | |
| eventMgr.setDonationTotal(0); | |
| $('.donation').each(function(){ | |
| eventMgr.setDonationTotal(eventMgr.getDonationTotal() + $(this).metadata().amt * $(this).val()); | |
| }); | |
| $('.total_donation').val('$ ' + eventMgr.getDonationTotal()); | |
| }); | |
| //adds rows to the form for number of guests indicated | |
| $('#banquetDonation').click( | |
| function(){ | |
| var x, guestTotal; | |
| //eventMgr.setGuestTotal(0); | |
| $('input.guests').each(function(){ | |
| eventMgr.setGuestTotal(eventMgr.getGuestTotal() + ($(this).metadata().guests * $(this).val()) ); | |
| }); | |
| $('#guest_list').empty(); | |
| $('#guest_list').append('<thead><tr><th> </th><th style="text-align:left;">First, Last</th><th>Chicken</th><th>Fish</th><th>Vegetarian</th></tr></thead><tbody id="guestNames">'); | |
| guestTotal = eventMgr.getGuestTotal(); | |
| //this should use and html template | |
| for( x = 0; x < guestTotal; x++){ | |
| $('#guest_list').append( | |
| '<tr><td style="text-align:left;">' + x + '.</td><td><input class="guestName" id="guestName_' | |
| + x + '" type="text" value="" size="30" name="guestName_' + x + '"/></td><td><input type="radio" class="mealChoice_' | |
| + x + '" name="mealChoice_' + x + '" value="chicken"/></td><td><input type="radio" class="mealChoice_' | |
| + x + '" name="mealChoice_' + x + '" value="fish"/></td><td><input type="radio" class="mealChoice_' | |
| + x + '" name="mealChoice_' + x + '" value="vegetarian"/></td></tr>'); | |
| } | |
| $('#guest_list').append('</tbody>'); | |
| }); | |
| //adds rows to the form based on number of players indicated | |
| $('#golfDonation').click( | |
| function(){ | |
| var guestTotal, playerTotal, x; | |
| //eventMgr.setPlayerTotal(0); | |
| $('input.players:checked').each(function(){ | |
| eventMgr.setPlayerTotal( $(this).metadata().players ); | |
| }); | |
| //eventMgr.setGuestTotal(0); | |
| $('select.guests > :selected').each(function(){ | |
| eventMgr.setGuestTotal( eventMgr.getGuestTotal() + $(this).val() ); | |
| }); | |
| $('#guest_list').empty(); | |
| //this should use and html template | |
| $('#guest_list').append('<thead><tr><th> </th><th style="text-align:left;">Players: First, Last</th></tr></thead><tbody>'); | |
| playerTotal = eventMgr.getPlayerTotal(); | |
| for( x = 0; x < playerTotal; x++){ | |
| $('#guest_list').append( | |
| '<tr><td style="text-align:left;">' + x + '.</td><td><input class="playerName" id="playerName_' | |
| + x + '" type="text" value="" size="30" name="playerName_' + x + '"/></td></tr>'); | |
| } | |
| if(eventMgr.getGuestTotal() > 0){ | |
| $('#guest_list').append('<tr><td> </td><td style="text-align:left;">Lunch guests: First, Last</td></tr>'); | |
| guestTotal = eventMgr.getGuestTotal(); | |
| for( x = 0; x < guestTotal; x++){ | |
| $('#guest_list').append( | |
| '<tr><td style="text-align:left;">' + x + '.</td><td><input class="guestName" id="guestName_' | |
| + x + '" type="text" value="" size="30" name="guestName_' + x + '"/></td></tr>'); | |
| } | |
| } | |
| $('#guest_list').append('</tbody>'); | |
| }); | |
| $('#mealChoices').click(function(){ | |
| $('input.guestName').each(function(i){ | |
| //var x = i + 1; | |
| //var name = $(this).val(); | |
| //var choice = $('input.mealChoice_' + x + ':checked').val(); | |
| }); | |
| }); | |
| //$("ul.css-tabs:first").tabs("div.css-panes:first > div"); | |
| $("input.required").focus(eventMgr.clearValue); | |
| //validate and submit the donor form | |
| $("#newDonorForm").validate( { | |
| submitHandler: function(form){ | |
| $(form).ajaxSubmit({ | |
| url: $(this).attr('action'), | |
| target: null, | |
| beforeSubmit: null, | |
| success: function(dataReceived){ | |
| $("input#donor_id").val(dataReceived); | |
| eventMgr.nextPrevious(); | |
| }, | |
| dataType: 'html' | |
| }); | |
| eventMgr.nextPrevious(); | |
| } | |
| }); | |
| //validate and submit the signup form | |
| $("#EventSignupForm").validate( { | |
| submitHandler:function(form){ | |
| $('#event_details').val(eventMgr.addDetails()); | |
| $(form).ajaxSubmit({ | |
| url: $(this).attr('action'), | |
| target: '#payment', | |
| beforeSubmit: null, | |
| success: function(dataReceived){ | |
| $("#payment").html(dataReceived); | |
| }, | |
| error: function(dataReceived){ | |
| $("#payment").html('There was an error communicating with the server: ' + dataReceived); | |
| }, | |
| dataType: 'html' | |
| }); | |
| } | |
| }); | |
| //handle form navigation | |
| $("a.action").click(function(e){ | |
| var target = $(this).metadata(); | |
| $("input.required").each(eventMgr.clearValue); | |
| eventMgr.setActionTarget(target); | |
| if(typeof target.formId){ | |
| $(target.formId).submit(); | |
| } else { | |
| eventMgr.nextPrevious(); | |
| } | |
| }); | |
| /* $("#byCC").click(function(e){ | |
| $("#item_price_1")[0].value = eventMgr.getDonationTotal(); | |
| $("#BB_BuyButtonForm")[0].submit(); | |
| return; | |
| }); | |
| $('.payment').click(function(){ | |
| $('#check').show(); | |
| }); | |
| */ | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment