Merge pull request #13 from bu-ist/add-modals

Add modals

assets/js/main.js

@@ -14,6 +14,24 @@ function main() {
 		//$('.twipsy').tooltip({
 		//	'placement':'top'
 		//});
+
+		$(".modal").dialog({
+			autoOpen: false,
+			show: {
+				effect: "fade",
+				duration: 300
+			},
+			buttons: {
+				Close: function() {
+					$(this).dialog('close');
+				}
+			}
+		});
+
+		$("#opt-in-trigger").on("click", function(e) {
+			e.preventDefault();
+			$("#text-message-opt-in-modal").dialog("open");
+		});
 
 		$('.iqs-form-phone-number').mask("(999) 999-9999", {
 			placeholder: "_"
@@ -40,7 +58,7 @@ function main() {
 						var message = r.response;
 						$('.form-submit-success').hide();
 						if (message.toLowerCase().indexOf('already exist') >= 0) {
-							message = 'Oops, we already have you in EMP, and don\'t want to add you again (creating a duplicate record...another great feature). Either use a different email address or contact us and we will resend you a link to your personal page.';
+							message = 'We already have a profile associated with this email address.  Please contact us and we will resend you a link to your personal page.';
 						} else if (message.toLowerCase().indexOf('incomplete or invalid') >= 0) {
 							$.each(r.data, function (i, item) {
 								message += '<br />' + item.displayName;

bu-liaison-inquiry.php

@@ -139,6 +139,7 @@ function liaison_inquiry_form( $atts ) {
 
 		// Enqueue form specific CSS
 		wp_enqueue_style( 'liason-form-style' );
+		wp_enqueue_style( 'jquery-ui-css' );
 
 		// Setup field ids if a restricted field set was specified in the shortcode.
 		$field_ids = array();
@@ -282,7 +283,7 @@ function handle_liaison_inquiry() {
 }
 
 // Register js form validation scripts so that they may be enqueued by the shortcode handler.
-wp_register_script( 'jquery-ui', plugin_dir_url( __FILE__ ) . 'assets/js/jquery/jquery-ui.js', array( 'jquery' ) );
+wp_register_script( 'jquery-ui', plugin_dir_url( __FILE__ ) . 'assets/js/jquery/jquery-ui.min.js', array( 'jquery' ) );
 wp_register_script( 'jquery-masked', plugin_dir_url( __FILE__ ) . 'assets/js/jquery/jquery-masked.js', array( 'jquery' ) );
 wp_register_script( 'jquery-pubsub', plugin_dir_url( __FILE__ ) . 'assets/js/jquery/jquery-pubsub.js', array( 'jquery' ) );
 wp_register_script( 'iqs-validate', plugin_dir_url( __FILE__ ) . 'assets/js/iqs/validate.js', array( 'jquery' ) );
@@ -295,6 +296,7 @@ function handle_liaison_inquiry() {
 wp_register_script( 'bu-liaison-main', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', array( 'jquery' ) );
 
 wp_register_style( 'liason-form-style',  plugin_dir_url( __FILE__ ) . 'assets/css/form-style.css' );
+wp_register_style( 'jquery-ui-css',  plugin_dir_url( __FILE__ ) . 'assets/js/jquery/jquery-ui.min.css' );
 
 
 

templates/form-template.php

@@ -9,7 +9,11 @@
 
 <form id="form_example" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
 
-
+<?php
+	// Initialize modal and phone fields. 
+	$modals = array();
+	$phone_fields = array();
+?>
 <?php foreach ( $inquiry_form->sections as $section_index => $section ) : ?>
 
 	<div class="section">
@@ -64,25 +68,14 @@ class="form-control<?php echo (($field->required) ? ' required' : '') . $class;
 					//begin iqs-form-phone-number
 					$element_id = $section->fields[$field_index + 1]->id;
 					$label_text = trim($section->fields[$field_index + 1]->displayName);
-					$opt_in_text = '<a href="#text-message-opt-in-modal" class="blue" data-toggle="modal">opt-in policy</a>';
+					$opt_in_text = '<a href="#text-message-opt-in-modal" id="opt-in-trigger">opt-in policy</a>';
 					$label_text = str_ireplace('opt-in policy', $opt_in_text, $label_text);
 
 					$modals[] = '
-						<div id="text-message-opt-in-modal" class="modal fade">
-					    	<div class="modal-dialog">
-						    	<div class="modal-content">
-									<div class="modal-header">
-										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-										<h4 class="modal-title">Text Message Opt-in Policy</h4>
-									</div>
-									<div class="modal-body">
+						<div id="text-message-opt-in-modal" title="Text Message Opt-in Policy" class="modal">
+							<div class="modal-body">
 										 ' . $section->fields[$field_index + 1]->helpText . '
-									</div>
-									<div class="modal-footer">
-										<button type="button" class="btn" data-dismiss="modal">Close</button>
-									</div>
-						    	</div>
-					    	</div>
+							</div>
 						</div>
 					';
 			?>
@@ -177,4 +170,4 @@ class="input-sm form-control<?php echo (($field->required) ? ' required' : '') .
 
 </form>
 
-
+<?php echo implode( '', $modals ); ?>