Replacing alerts with jquery dialog.

Creating a function to replace the alert calls.
Was getting strange text placement issue with the dialogs.
Have css to position the ui-content to absolute.

diff --git a/css/front.css b/css/front.css
index 32dba28..5fd8c2a 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1375,3 +1375,7 @@ hr.glm-reg-class-separator{
 #ui-id-1.ui-dialog-title {
     line-height: 1;
 }
+/* For jquery dialog */
+.ui-dialog .ui-dialog-content {
+    position: absolute !important;
+}

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index d941621..b959204 100644 (file)
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -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' );
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
             this.$('.reg_email').val('');
             return;
         }
@@ -798,11 +798,14 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
             var rTime = null;
         }
         if ( app.timeSpecific && !rTime ) {
-            alert( 'You must select a time!' );
+            glmRegNotice( 'Alert', 'You must select a time!' );
+            // alert( 'You must select a time!' );
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            glmRegNotice( 'Required Fields', 'Please fill out First and Last Name!' );
+            // $('#attendeeFormReq').dialog('open');
+            // alert( 'First and Last name required!' );
             return;
         }
         // Validate the model
@@ -952,7 +955,8 @@ app.Views.Front.RegTime = Backbone.View.extend({
     // add new account
     addNewAccount: function(){
         if ( app.checkForMaxAttendees() === true ) {
-            alert( 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
+            glmRegNotice( 'Max Reached', 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
+            // alert( 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
             return;
         }
         // check for the lock
@@ -996,6 +1000,12 @@ app.Views.Front.RegTime = Backbone.View.extend({
         var zip     = this.$('.add_reg_zip').val().trim();
         var country = ( this.$('.add_reg_country').val() ) ? this.$('.add_reg_country').val().trim(): '';
         var sTime   = this.model.get( 'rate_id' );
+        var isValidEmail = app.isValidEmail( email );
+        if ( !isValidEmail && email ) {
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
+            this.$('.add_reg_email').val('');
+            return;
+        }
         if ( this.$('#add_reg-select-time').length ) {
             var times  = this.model.get( 'times' );
         } else {
@@ -1008,7 +1018,9 @@ app.Views.Front.RegTime = Backbone.View.extend({
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            // $('#attendeeFormReq').dialog('open');
+            glmRegNotice( 'Required Fields', 'Please fill out First and Last Name!' );
+            // alert( 'First and Last name required!' );
             // Hide the loading graphic
             this.$('#loading-' + this.model.get('id') ).hide();
             return;
@@ -1145,7 +1157,9 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            // $('#attendeeEmailNotValid').dialog('open');
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
+            // alert( 'Email must be valid' );
             this.$('.add_reg_email').val('');
             return;
         }
@@ -1159,7 +1173,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
             this.$('.lookup_email').val('');
             return;
         } else {
@@ -1188,7 +1202,8 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
                     this.$('.account-lookup').hide();
                 } else {
                     // Notify them nothing found
-                    alert( 'Could not find account' );
+                    glmRegNotice( 'Account Search', 'Could not find account' );
+                    // alert( 'Could not find account' );
                     this.$('.add_reg_email').val(email);
                 }
             })

diff --git a/js/views/front/regRequestRegistrant.js b/js/views/front/regRequestRegistrant.js
index 37217fd..17d4bfb 100644 (file)
--- a/js/views/front/regRequestRegistrant.js
+++ b/js/views/front/regRequestRegistrant.js
@@ -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' );
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
             this.$('.reg_email').val('');
             return;
         }
@@ -52,11 +52,14 @@ app.Views.Front.RegRequestRegistrant = Backbone.View.extend({
             var rTime = null;
         }
         if ( app.timeSpecific && !rTime ) {
-            alert( 'You must select a time!' );
+            glmRegNotice( 'Alert', 'You must select a time!' );
+            // alert( 'You must select a time!' );
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            glmRegNotice( 'Required Fields', 'Please fill out First and Last Name!' );
+            // $('#attendeeFormReq').dialog('open');
+            // alert( 'First and Last name required!' );
             return;
         }
         // Validate the model

diff --git a/js/views/front/regTime.js b/js/views/front/regTime.js
index 71b4a5d..974a354 100644 (file)
--- a/js/views/front/regTime.js
+++ b/js/views/front/regTime.js
@@ -47,7 +47,8 @@ app.Views.Front.RegTime = Backbone.View.extend({
     // add new account
     addNewAccount: function(){
         if ( app.checkForMaxAttendees() === true ) {
-            alert( 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
+            glmRegNotice( 'Max Reached', 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
+            // alert( 'You\'re only allowed to have ' + app.attendeeMaxPerReg + ' ' + app.attendeePlurCapTerm + ' per Registration!' );
             return;
         }
         // check for the lock
@@ -91,6 +92,12 @@ app.Views.Front.RegTime = Backbone.View.extend({
         var zip     = this.$('.add_reg_zip').val().trim();
         var country = ( this.$('.add_reg_country').val() ) ? this.$('.add_reg_country').val().trim(): '';
         var sTime   = this.model.get( 'rate_id' );
+        var isValidEmail = app.isValidEmail( email );
+        if ( !isValidEmail && email ) {
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
+            this.$('.add_reg_email').val('');
+            return;
+        }
         if ( this.$('#add_reg-select-time').length ) {
             var times  = this.model.get( 'times' );
         } else {
@@ -103,7 +110,9 @@ app.Views.Front.RegTime = Backbone.View.extend({
             return;
         }
         if ( fname === '' || lname === '' ) {
-            alert( 'First and Last name required!' );
+            // $('#attendeeFormReq').dialog('open');
+            glmRegNotice( 'Required Fields', 'Please fill out First and Last Name!' );
+            // alert( 'First and Last name required!' );
             // Hide the loading graphic
             this.$('#loading-' + this.model.get('id') ).hide();
             return;

diff --git a/js/views/front/registrantForm.js b/js/views/front/registrantForm.js
index 9aa17e6..5f4d7e3 100644 (file)
--- a/js/views/front/registrantForm.js
+++ b/js/views/front/registrantForm.js
@@ -42,7 +42,9 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            // $('#attendeeEmailNotValid').dialog('open');
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
+            // alert( 'Email must be valid' );
             this.$('.add_reg_email').val('');
             return;
         }
@@ -56,7 +58,7 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
         }
         var isValidEmail = app.isValidEmail( email );
         if ( !isValidEmail ) {
-            alert( 'Email must be valid' );
+            glmRegNotice( 'Email Validation', 'Email must be valid!' );
             this.$('.lookup_email').val('');
             return;
         } else {
@@ -85,7 +87,8 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
                     this.$('.account-lookup').hide();
                 } else {
                     // Notify them nothing found
-                    alert( 'Could not find account' );
+                    glmRegNotice( 'Account Search', 'Could not find account' );
+                    // alert( 'Could not find account' );
                     this.$('.add_reg_email').val(email);
                 }
             })

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 89cfd39..d4fc578 100755 (executable)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -478,6 +478,10 @@
         </p>
     </div>
   {/if}
+  <div id="glmRegNoticeDialog" title="Glm Notice">
+      <p class="glm-reg-warning" style="width: 100%;margin: 0;padding: 15px;">
+      </p>
+  </div>
     <div class="row">
         <div id="regApp" class="columns small-12">
         </div>
@@ -746,6 +750,22 @@ jQuery(function($){
 
     });
 
+    glmRegNotice = function( title, message ){
+        return $('<div class="glm-reg-dialog" title="' + title + '"><p class="glm-reg-warning">' + message + '</p></div>').dialog({
+            autoOpen: true,
+            modal: true,
+            width: 500,
+            height: 200,
+            buttons: [{
+                text: "Got it!",
+                click: function(){
+                    // $(this).dialog('destroy');
+                    $(this).dialog('close').dialog('destroy').remove();
+                }
+            }]
+        });
+    }
+
 
     // Registration not submitted Dialog actions
     {if $settings.reg_not_submitted_dialog}