Ported the contact form to the new naming conventions for ajax, added some stuff to the ribbon config, tweaked the contoller and added some new validation to the ajax class.

git-svn-id: http://svn.cleancode.org/svn/pickles@42 4d10bc64-7434-11dc-a737-d2d0f8310089

classes/Controller.php

@@ -67,7 +67,6 @@ class Controller extends Object {
 				$this->model = new Model();
 			}
 
-
 			if ($this->model->get('auth') == false) {
 				$this->model->set('auth', $this->config->get('behavior', 'auth'));
 			}

config/ribbonnutrition.com.xml

@@ -14,8 +14,8 @@
 	<admin>
 		<menu>false</menu>
 		<sections>
-			<news>News</news>
-			<faqs>FAQs</faqs>
+			<news_edit>News</news_edit>
+			<faqs_edit>FAQs</faqs_edit>
 			<logout>Logout</logout>
 		</sections>
 	</admin>

smarty/functions/function.contact_form.php

@@ -10,7 +10,7 @@ function smarty_function_contact_form($params, &$smarty) {
 			Message:<br />
 			<textarea name="message" title="required" class="contact_textarea"></textarea><br /><br />
 			<div class="contact_button">
-				<input type="button" value="Send Message" onclick="ajaxSubmit(this.parentNode.parentNode); return false;" />
+				<input type="button" value="Send Message" onclick="ajaxRequest(this.parentNode.parentNode); return false;" />
 			</div>
 		</form>
 	';

static/js/ajax.js

@@ -13,11 +13,19 @@ function getForm(form) {
 			case 'text':
 			case 'textarea':
 				// Check if it's required
-				if (element.title == 'required' && element.value == '') {
+				if (element.title == 'required' && trim(element.value) == '') {
 					alert('Error: The ' + element.name.replace('_', ' ') + ' field is required.');
 					element.focus();
 					return false;
 				}
+				// If the field is named email, check it's validity
+				else if (element.name == 'email') {
+					if (element.value.match(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i) == null) {
+						alert('Error: The email address entered is not valid.');
+						element.focus();
+						return false;
+					}
+				}
 
 				params += '&' + element.name + '=' + encodeURI(element.value);
 				break;
@@ -58,14 +66,29 @@ function createRequest() {
     }
 }
 
-function ajaxSubmit(form, customHandler, beforeOrAfter) {
+function ajaxRequest(htmlElement, customHandler, beforeOrAfter, url) {
 	var params = '';
 	var customHandler = (customHandler == null) ? null     : customHandler;
 	var beforeOrAfter = (beforeOrAfter == null) ? 'before' : beforeOrAfter;
+	var url           = (url           == null) ? null     : url;
 
-	if (params = getForm(form)) {
+	if (typeof htmlElement.value == 'undefined') {
+		params = getForm(htmlElement);
+		method = htmlElement.method;
+		action = htmlElement.action;
+	}
+	else {
+		params = 'id=' + htmlElement.value;
+		method = 'POST';
+		action = url;
+
+		// @todo this may eventually need to be a loop that keeps going up until it's at a form tag?
+		htmlElement = htmlElement.parentNode;
+	}
+
+	if (params) {
 		createRequest();
-		request.open(form.method, form.action, true);
+		request.open(method, action, true);
 		
 		request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 		request.setRequestHeader("Content-length", params.length);
@@ -73,8 +96,15 @@ function ajaxSubmit(form, customHandler, beforeOrAfter) {
 
 		request.onreadystatechange = function() {
 			if (request.readyState == 4 && request.status == 200) {
-				var responseObject  = eval( "(" + request.responseText + ")" );
 				var responseElement = document.createElement('div');
+				responseElement.id  = 'ajaxResponse';
+
+				if (request.responseText.substring(0, 1) == '{' && request.responseText.substring(request.responseText.length - 1) == '}') {
+					var responseObject  = eval( "(" + request.responseText + ")" );
+					
+					if (document.getElementById(responseElement.id) != null) {
+						htmlElement.removeChild(document.getElementById(responseElement.id));
+					}
 
 					if (customHandler) {
 						responseElement = window[customHandler](responseObject, responseElement);
@@ -84,17 +114,31 @@ function ajaxSubmit(form, customHandler, beforeOrAfter) {
 						responseElement.className = responseObject.type;
 						responseElement.appendChild(responseMessage);
 					}
-				
-				if (document.getElementById('ajaxResponse') != null) {
-					form.removeChild(document.getElementById('ajaxResponse'));
+				}
+				else {
+					responseElement.innerHTML = request.responseText;
 				}
 			
-				responseElement.id = 'ajaxResponse';
-				form.insertBefore(responseElement, (beforeOrAfter == 'before') ? form.firstChild : form.lastChild);
+				if (document.getElementById(responseElement.id) != null) {
+					htmlElement.removeChild(document.getElementById(responseElement.id));
+				}
 
+				htmlElement.insertBefore(responseElement, (beforeOrAfter == 'before') ? htmlElement.firstChild : htmlElement.lastChild);
 			}
 		}
 
 		request.send(params);
 	}
 }
+
+function trim(str) {
+	str = str.replace(/^\s+/, '');
+	for (var i = str.length - 1; i >= 0; i--) {
+		if (/\S/.test(str.charAt(i))) {
+			str = str.substr(0, i + 1);
+			break;
+		}
+	}
+
+	return str;
+}