[pLog-svn] r6046 - in plog/trunk: js/ui js/ui/pages templates/admin

mark at devel.lifetype.net mark at devel.lifetype.net
Fri Nov 16 01:30:28 EST 2007


Author: mark
Date: 2007-11-16 01:30:28 -0500 (Fri, 16 Nov 2007)
New Revision: 6046

Modified:
   plog/trunk/js/ui/forms.js
   plog/trunk/js/ui/pages/posts.js
   plog/trunk/templates/admin/formvalidateajax.template
   plog/trunk/templates/admin/sendtrackbacks_form.template
Log:
The sendtrackbacks_form.template has the same formInfo/formError as newpost_form.template and updatepost_form.template, it will confuse the javscript document object in IE, but works well under Firefox :(

Therefore, I have to change the formInfo/formError id in sendtrackbacks_form.template. when I include the formvalidateajax.template. Here comes the solution:

I add 4 new options to AjaxFormProcesser, and allow user to change the return formInfo/formError id.

formInfo:string = dom id, place to show the form validate info
formInfoMessage:string = dom id, place to show the form validate info message
formError:string = dom id, place to show the form validate error
formErrorMessage:string = dom id, place to show the form validate error message

After you change the return formInfo/formError id in your form ajax call, you can include the formvalidateaxaj use the following skill to assign your own formInfo/formError id.

{include file="$admintemplatepath/formvalidateajax.template" formInfo="DialogInfo" formInfoMessage="DialogInfoMessage" formError="DialogError" formErrorMessage="DialogErrorMessage"}

It works well, and won't break anything in current implementation.

I think the same skill can apply to performRequest ajax call, too.

Modified: plog/trunk/js/ui/forms.js
===================================================================
--- plog/trunk/js/ui/forms.js	2007-11-16 02:50:30 UTC (rev 6045)
+++ plog/trunk/js/ui/forms.js	2007-11-16 06:30:28 UTC (rev 6046)
@@ -1,5 +1,5 @@
 /********
- * Lifetype.Forms namespace 
+ * Lifetype.Forms namespace
  *
  * Includes all functions related to forms, form validation, lists, etc.
  ***************/
@@ -20,7 +20,7 @@
 Lifetype.Forms.List.removeSelected = function( elem )
 {
 	list = document.getElementById( elem );
-	
+
 	for( i = 0; i < list.options.length; i++ ) {
 		if( list.options[i].selected ) {
 			// the element is selected, remove it
@@ -68,7 +68,7 @@
 {
 	if( selectOpt == undefined )
 		selectOpt = false;
-		
+
 	return( Lifetype.Forms.List.appendToExternalList( document, fieldName, value, item, selectOpt ));
 }
 
@@ -85,7 +85,7 @@
 {
 	if( selectOpt == undefined )
 		selectOpt = false;
-	
+
 	dstList = dest.getElementById( fieldName );
 
 	// check if the element is already there
@@ -137,13 +137,13 @@
  * @return nothing
  */
 Lifetype.Forms.List.emptyList = function( listId )
-{	
+{
 	box = Lifetype.Dom.$( listId );
 	while ( box.options.length ) box.options[0] = null;
 }
 
 /**
- * Checks that there is at least one element selected 
+ * Checks that there is at least one element selected
  * in a list
  *
  * @param box The drop-down list
@@ -217,15 +217,24 @@
  *   resetAfterSuccess:boolean = reset the form after success
  *   formSuccessCallback:function = callback, function to call if the form is successful
  *   formErrorCallback:function = callback, function to call if the form is not successful
+ *   formInfo:string = dom id, place to show the form validate info
+ *   formInfoMessage:string = dom id, place to show the form validate info message
+ *   formError:string = dom id, place to show the form validate error
+ *   formErrorMessage:string = dom id, place to show the form validate error message
  */
 Lifetype.Forms.AjaxFormProcessor = function( formId, postUrl, options )
 {
-	var formObject = document.getElementById( formId ); 
-	YAHOO.util.Connect.setForm(formObject); 
-	
+	var formObject = document.getElementById( formId );
+	YAHOO.util.Connect.setForm(formObject);
+
 	if( options )
 		options.formElement = formObject;
-		
+
+    if ( options.formInfo ) formInfoId = options.formInfo; else formInfoId = 'FormInfo';
+    if ( options.formInfoMessage ) formInfoMessageId = options.formInfoMessage; else formInfoMessageId = 'FormInfoMessage';
+    if ( options.formError ) formErrorId = options.formError; else formErrorId = 'FormError';
+    if ( options.formErrorMessage ) formErrorMessageId = options.formErrorMessage; else formErrorMessageId = 'FormErrorMessage';
+
 	var cObj = YAHOO.util.Connect.asyncRequest('POST', postUrl,
 		callback = {
 			argument: options,
@@ -233,29 +242,29 @@
 				// decode the JSon response from the server
 				response = Lifetype.JSon.decode( o.responseText );
 				o.response = response;
-				
+
 				// shorter way to access the form object
-				form = response.form;						
+				form = response.form;
 
 				// 'deactivate' all field messages
 				elements = YAHOO.util.Dom.getElementsByClassName('fieldValidationError','div');
 				for( i = 0; i < elements.length; i++ ) {
 					elements[i].style.display = 'none';
 				}
-				
+
 				// and all other messages
-				document.getElementById( "FormInfo" ).style.display = 'none';
-				document.getElementById( "FormError" ).style.display = 'none';
-				
+				document.getElementById( formInfoId ).style.display = 'none';
+				document.getElementById( formErrorId ).style.display = 'none';
+
 				// was it successful?
-				if( response.success == false ) {							
+				if( response.success == false ) {
 					// process the information from the 'form' object
 					if( form != undefined ) {
 						for( i = 0; i < form.fields.length; i++ ) {
 							fObject = form.fields[i];
 							// is the field valid?
 							if( fObject.valid == false ) {
-								// We've also got the name of the field that caused the error and 
+								// We've also got the name of the field that caused the error and
 								// the error message that should be displayed, so we can do it right away
 								if(( elem = YAHOO.util.Dom.get( "field_" + fObject.field ))) {
 									elem.style.display = 'block';
@@ -270,43 +279,43 @@
 							}
 						}
 					}
-				
+
 					// display the general error message by setting it into its container
-					if(( elem = YAHOO.util.Dom.get( "FormErrorMessage" ))) {
+					if(( elem = YAHOO.util.Dom.get( formErrorMessageId ))) {
 						elem.innerHTML = response.message;
 					}
-					if(( elem = YAHOO.util.Dom.get( "FormError" ))) {					
+					if(( elem = YAHOO.util.Dom.get( formErrorId ))) {
 						elem.style.display = 'block';
 					}
 
 					// fire the error event
-					Lifetype.Forms.Events.formProcessorFailureEvent.fire( o );					
-					
+					Lifetype.Forms.Events.formProcessorFailureEvent.fire( o );
+
 					return( true );
 				}
 				else {
 					// display the general success message by setting it into its container
 					// and making the block visible
-					if(( elem = YAHOO.util.Dom.get( "FormInfoMessage" )))
+					if(( elem = YAHOO.util.Dom.get( formInfoMessageId )))
 						elem.innerHTML = response.message;
-					if(( elem = YAHOO.util.Dom.get( "FormInfo" )))
+					if(( elem = YAHOO.util.Dom.get( formInfoId )))
 						elem.style.display = 'block';
-						
+
 					// check if there's any argument
 					if( o.argument ) {
 						// do we reset the form after success
 						if( o.argument.resetAfterSuccess == true ) {
 							o.argument.formElement.reset();
-						}					
+						}
 					}
 
-					// fire the success					
-					Lifetype.Forms.Events.formProcessorSuccessEvent.fire( o );					
-				}									
+					// fire the success
+					Lifetype.Forms.Events.formProcessorSuccessEvent.fire( o );
+				}
 			},
 			failure: function() {
 				// fire the error event
-				Lifetype.Forms.Events.formProcessorFailureEvent.fire( o );				
+				Lifetype.Forms.Events.formProcessorFailureEvent.fire( o );
 			}
 		}
 	);
@@ -342,27 +351,27 @@
  * In case of successful request, the event performRequestSuccessEvent will be generated, while in case
  * of error requests, performRequestFailureEvent will be generated.
  */
-Lifetype.Forms.performRequest = function( o ) 
+Lifetype.Forms.performRequest = function( o )
 {
 	if( o.tagName.toLowerCase() == "form" ) {
 		// it's a form
 		YAHOO.util.Connect.setForm( o );
-		url = '?output=json';		
+		url = '?output=json';
 	}
 	else {
 		// it's an anchor tag
 		var url = o.href + "&output=json";
-	}	
-	
+	}
+
 	YAHOO.util.Connect.asyncRequest('GET', url,
 		callback = {
 			success: function( o ) {
-								
+
 				Lifetype.Dom.$( 'ViewError' ).style.display = 'none';
 				Lifetype.Dom.$( 'ViewInfo' ).style.display = 'none';
-				
+
 				var response = Lifetype.JSon.decode( o.responseText );
-				
+
 				/**
 				 * Here is when easy things get annoyingly awkward...
 				 * Some ajax views return their succes status in the 'success'
@@ -384,23 +393,23 @@
 					// the validation error string
 					Lifetype.Dom.$( 'ViewErrorMessage' ).innerHTML = response.message;
 					Lifetype.Dom.$( 'ViewError' ).style.display = 'block';
-				
+
 					// fire the error event
-					Lifetype.Forms.Events.performRequestFailureEvent.fire( o );					
+					Lifetype.Forms.Events.performRequestFailureEvent.fire( o );
 				}
 				else {
 					if( response.message["successMessage"] || response.message["errorMessage"] ) {
 						if( response.message.successMessage ) {
 							Lifetype.Dom.$( 'ViewInfoMessage' ).innerHTML = response.message.successMessage;
 							Lifetype.Dom.$( 'ViewInfo' ).style.display = 'block';
-					
+
 							// fire the success event
 							Lifetype.Forms.Events.performRequestSuccessEvent.fire( o );
 						}
 						if( response.message.errorMessage ) {
 							Lifetype.Dom.$( 'ViewErrorMessage' ).innerHTML = response.message.errorMessage;
 							Lifetype.Dom.$( 'ViewError' ).style.display = 'block';
-					
+
 							// fire the error event
 							Lifetype.Forms.Events.performRequestFailureEvent.fire( o );
 						}
@@ -408,16 +417,16 @@
 					else {
 						Lifetype.Dom.$( 'ViewInfoMessage' ).innerHTML = response.message;
 						Lifetype.Dom.$( 'ViewInfo' ).style.display = 'block';
-				
+
 						// fire the success event
-						Lifetype.Forms.Events.performRequestSuccessEvent.fire( o );						
+						Lifetype.Forms.Events.performRequestSuccessEvent.fire( o );
 					}
 				}
 			},
 			failure: function( o ) {
 				Lifetype.Dom.$( 'ViewErrorMessage' ).innerHTML = 'Error performing request';
 				Lifetype.Dom.$( 'ViewError' ).style.display = 'block';
-				
+
 				// fire the error event
 				Lifetype.Forms.Events.performRequestFailureEvent.fire( o );
 			}
@@ -450,7 +459,7 @@
  if( elem.type == 'hidden')
    showElement(elem);
  else
-   hideElement(elem); 
+   hideElement(elem);
 }
 
 function addElementToForm (containerName, fieldType, fieldName, fieldValue)
@@ -459,7 +468,7 @@
 var container = document.getElementById(containerName);
 if (navigator.userAgent.indexOf("MSIE") != -1){//isie
 var fileTag ="<input type='"+fieldType+"' value='' name='"+fieldName+"_"+numFields+"'>";
-var fileObj = document.createElement(fileTag); 
+var fileObj = document.createElement(fileTag);
 var newLine = document.createElement('BR');
 container.insertBefore(fileObj,separator);
 container.insertBefore(newLine,separator);
@@ -472,17 +481,17 @@
     var newLine = document.createElement('BR');
     var newFieldName = fieldName + '_' + numFields;
     if( debug) window.alert('adding field ' + newFieldName);
-      if (document.all) { 
+      if (document.all) {
         input.type = fieldType;
         input.name = newFieldName;
         input.value = fieldValue;
       }
-      else if (document.getElementById) { 
+      else if (document.getElementById) {
         input.setAttribute('type', fieldType);
         input.setAttribute('name', newFieldName);
         input.setAttribute('value', fieldValue);
       }
-      
+
     container.insertBefore(input,separator);
     container.insertBefore(newLine,separator);
     numFields++;
@@ -493,8 +502,8 @@
 function getField (form, fieldName) {
   if (!document.all)
     return form[fieldName];
-  else  // IE has a bug not adding dynamically created field 
-        // as named properties so we loop through the elements array 
+  else  // IE has a bug not adding dynamically created field
+        // as named properties so we loop through the elements array
     for (var e = 0; e < form.elements.length; e++)
       if (form.elements[e].name == fieldName)
         return form.elements[e];

Modified: plog/trunk/js/ui/pages/posts.js
===================================================================
--- plog/trunk/js/ui/pages/posts.js	2007-11-16 02:50:30 UTC (rev 6045)
+++ plog/trunk/js/ui/pages/posts.js	2007-11-16 06:30:28 UTC (rev 6046)
@@ -260,7 +260,12 @@
 Lifetype.UI.Pages.Posts.sendTrackbackSubmitHook = function( form )
 {
 	Lifetype.Config.setValue( 'form_handler', 'sendTrackbacks' );
-	Lifetype.Forms.AjaxFormProcessor( form.id,'?output=json', {resetAfterSuccess:true} );
+	Lifetype.Forms.AjaxFormProcessor( form.id,'?output=json', { resetAfterSuccess: true,
+	                                                            formInfo: 'DialogInfo',
+	                                                            formInfoMessage: 'DialogInfoMessage',
+	                                                            formError: 'DialogError',
+	                                                            formErrorMessage: 'DialogErrorMessage'
+	                                                          } );
 }
 
 YAHOO.util.Event.addListener( window, "load", function() {

Modified: plog/trunk/templates/admin/formvalidateajax.template
===================================================================
--- plog/trunk/templates/admin/formvalidateajax.template	2007-11-16 02:50:30 UTC (rev 6045)
+++ plog/trunk/templates/admin/formvalidateajax.template	2007-11-16 06:30:28 UTC (rev 6046)
@@ -1,11 +1,15 @@
 {**
   Please use this smarty code to carry our form validations
 **}
-<div id="FormError" {if $viewErrorMessage == ""}style="display:none"{/if}>
+{if empty($formInfo)}{assign var=formInfo value="FormInfo"}{/if}
+{if empty($formInfoMessage)}{assign var=formInfoMessage value="FormInfoMessage"}{/if}
+{if empty($formError)}{assign var=formError value="FormError"}{/if}
+{if empty($formErrorMessage)}{assign var=formErrorMessage value="FormErrorMessage"}{/if}
+<div id="{$formError}" {if $viewErrorMessage == ""}style="display:none"{/if}>
   <img src="imgs/admin/icon_warning-16.png" alt="Info" class="InfoIcon" />
-  <p class="ErrorText" id="FormErrorMessage">{$viewErrorMessage}</p>
-</div>  
-<div id="FormInfo" {if $viewSuccessMessage == ""}style="display:none"{/if}>
+  <p class="ErrorText" id="{$formErrorMessage}">{$viewErrorMessage}</p>
+</div>
+<div id="{$formInfo}" {if $viewSuccessMessage == ""}style="display:none"{/if}>
   <img src="imgs/admin/icon_info-16.png" alt="Info" class="InfoIcon" />
-  <p class="InfoText" id="FormInfoMessage">{$viewSuccessMessage}</p>
+  <p class="InfoText" id="{$formInfoMessage}">{$viewSuccessMessage}</p>
 </div>
\ No newline at end of file

Modified: plog/trunk/templates/admin/sendtrackbacks_form.template
===================================================================
--- plog/trunk/templates/admin/sendtrackbacks_form.template	2007-11-16 02:50:30 UTC (rev 6045)
+++ plog/trunk/templates/admin/sendtrackbacks_form.template	2007-11-16 06:30:28 UTC (rev 6046)
@@ -1,7 +1,7 @@
 <form id="pingThese" name="pingThese" method="post" action="admin.php" onSubmit="Lifetype.UI.Pages.Posts.sendTrackbackSubmitHook(this);return(false);">
  <fieldset class="inputField">
   <legend>{$locale->tr("send_trackbacks")}</legend>
-  {include file="$admintemplatepath/formvalidateajax.template"}
+  {include file="$admintemplatepath/formvalidateajax.template" formInfo="DialogInfo" formInfoMessage="DialogInfoMessage" formError="DialogError" formErrorMessage="DialogErrorMessage"}
 
   {if count($postLinks) != 0}
   <div class="field">



More information about the pLog-svn mailing list