Updating front end js code for removing alerts
authorSteve Sutton <steve@gaslightmedia.com>
Mon, 8 Oct 2018 17:30:56 +0000 (13:30 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Mon, 8 Oct 2018 17:30:56 +0000 (13:30 -0400)
Removing alerts from the front end when adding or editing attendees.
Using inline error messages.

js/frontRegApp.js
js/views/front/regClass.js
js/views/front/regRequestRegistrant.js
js/views/front/regTime.js
js/views/front/registrantForm.js
views/front/registrations/registration.html

index 59301bd..9f3e9f6 100644 (file)
@@ -680,7 +680,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
             // Check for id and email
             if ( account.validEmail !== true ) {
                 // If not found then nothing was found for that email.
-                alert('Must be a valid email address!');
+                app.sendAlertMessage( '#add-attendee-form-message', 'Must be a valid email address!' );
             }  else if ( account.id !== undefined && account.email !== undefined ) {
                 var regRequest = cart.get( 'request' );
                 this.model.registrants.create({
@@ -788,7 +788,7 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
         var country = ( this.$('.reg_country').val() ) ? this.$('.reg_country').val().trim(): '';
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail && email ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'Email must be valid' );
             this.$('.reg_email').val('');
             return;
         }
@@ -798,11 +798,11 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
             var rTime = null;
         }
         if ( app.timeSpecific && !rTime ) {
-            alert( 'You must select a time!' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'You must select a time!' );
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'First and Last name required!' );
             return;
         }
         // Validate the model
@@ -1008,7 +1008,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            app.sendAlertMessage( '#add-attendee-form-message', 'First and Last name required!' );
             // Hide the loading graphic
             this.$('#loading-' + this.model.get('id') ).hide();
             return;
@@ -1145,7 +1145,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '#add-attendee-form-message', 'Email must be valid' );
             this.$('.add_reg_email').val('');
             return;
         }
@@ -1159,7 +1159,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '#search-account-form-message', 'Email must be valid' );
             this.$('.lookup_email').val('');
             return;
         } else {
@@ -1184,11 +1184,10 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
                     this.$('.add_reg_state').val(account.state);
                     this.$('.add_reg_zip').val(account.zip);
                     this.$('.add_reg_country').val(account.country);
-                    // alert( 'Account Found' );
                     this.$('.account-lookup').hide();
                 } else {
                     // Notify them nothing found
-                    alert( 'Could not find account' );
+                    app.sendAlertMessage( '#search-account-form-message', 'Could not find account' );
                     this.$('.add_reg_email').val(email);
                 }
             })
index e49eb59..9ec8f87 100644 (file)
@@ -178,7 +178,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
             // Check for id and email
             if ( account.validEmail !== true ) {
                 // If not found then nothing was found for that email.
-                alert('Must be a valid email address!');
+                app.sendAlertMessage( '#add-attendee-form-message', 'Must be a valid email address!' );
             }  else if ( account.id !== undefined && account.email !== undefined ) {
                 var regRequest = cart.get( 'request' );
                 this.model.registrants.create({
index 37217fd..cd60c05 100644 (file)
@@ -42,7 +42,7 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
         var country = ( this.$('.reg_country').val() ) ? this.$('.reg_country').val().trim(): '';
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail && email ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'Email must be valid' );
             this.$('.reg_email').val('');
             return;
         }
@@ -52,11 +52,11 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
             var rTime = null;
         }
         if ( app.timeSpecific && !rTime ) {
-            alert( 'You must select a time!' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'You must select a time!' );
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            app.sendAlertMessage( '.edit-attendee-form-message', 'First and Last name required!' );
             return;
         }
         // Validate the model
index 5c97745..4929651 100644 (file)
@@ -103,7 +103,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            app.sendAlertMessage( '#add-attendee-form-message', 'First and Last name required!' );
             // Hide the loading graphic
             this.$('#loading-' + this.model.get('id') ).hide();
             return;
index 9aa17e6..a02cddc 100644 (file)
@@ -42,7 +42,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '#add-attendee-form-message', 'Email must be valid' );
             this.$('.add_reg_email').val('');
             return;
         }
@@ -56,7 +56,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            app.sendAlertMessage( '#search-account-form-message', 'Email must be valid' );
             this.$('.lookup_email').val('');
             return;
         } else {
@@ -81,11 +81,10 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
                     this.$('.add_reg_state').val(account.state);
                     this.$('.add_reg_zip').val(account.zip);
                     this.$('.add_reg_country').val(account.country);
-                    // alert( 'Account Found' );
                     this.$('.account-lookup').hide();
                 } else {
                     // Notify them nothing found
-                    alert( 'Could not find account' );
+                    app.sendAlertMessage( '#search-account-form-message', 'Could not find account' );
                     this.$('.add_reg_email').val(email);
                 }
             })
index fd2cf51..6b18058 100755 (executable)
         <div>
             <div>
                 <div class="row account-lookup">
+                    <div id="search-account-form-message" class="columns small-12 text-right glm-reg-required glm-hidden">
+                        Message...
+                    </div>
                     <div class="columns small-12">
                         Search for Existing Account
                     </div>
                     <div class="columns small-12 text-right glm-reg-required">
                         * Required Fields
                     </div>
+                    <div id="add-attendee-form-message" class="columns small-12 text-right glm-reg-required glm-hidden">
+                        Message...
+                    </div>
                     <div class="columns small-12">&nbsp;</div>
                 </div>
                 <div class="row">
                         <div class="columns small-12 text-right glm-reg-required">
                             * Required Fields
                         </div>
+                        <div class="edit-attendee-form-message columns small-12 text-right glm-reg-required glm-hidden">
+                            Message...
+                        </div>
                         <div class="columns small-12">&nbsp;</div>
                     </div>
                     <div class="row">
@@ -527,6 +536,9 @@ var app = {
     attendeePlurCapTerm: '{$terms.reg_term_attendee_plur_cap}',
     attendeeCapTerm: '{$terms.reg_term_attendee_cap}',
     eventCapTerm: '{$terms.reg_term_event_cap}',
+    sendAlertMessage: function( messageArea, message ){
+        jQuery( messageArea ).html( message ).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
+    },
     checkForMaxAttendees: function(){
         if ( app.attendeeMaxPerReg ) {
             // Here we need to see how many registrants total in each class.