Richfaces, IE-“runtime error” and nested forms

When developing a webapp with Richfaces, you will sometimes encounter a javascript “runtime error”. This error will only occur in MS Internet Explorer (seen at version 6/7).

I struggled and but then i found the reason and the solution. In Richfaces 3.3.2 CR1 there is some JS code in form.js, which tries to get all elements from the surrounding form. Like this

//..
var field = form.elements[fields[i]]
//..

This seems to fail only in Internet Explorer.
But why? I don’t know for sure, but it only occurs when you nest forms. Nesting of forms is invalid HTML, so it is not a bug in Richfaces. Check your UI structure instead.

<!--Not valid / never do this-->
<h:form>
  <h:form>
   <!--stuff-->
  </h:form>
</h:form>

Remember: NEVER ever nest forms into form.

Advertisements

min-width/max-width with JS/jQuery

Sometimes there are special requirements for the width restrictions of a website. For example the width of the panel has to be at least 100px, but should not exceed 800px.

The first approach is to use the CSS attributes min-width/max-width. But these will not work in MS Internet Explorer. There are several IE6-workarounds like using Javascript-based CSS-expression, but i think those are ugly.

The following approach uses easy Javascript scripting: Calculate the width using jQuery, compare it to the reference width and set it to the min-/max-value if needed.

Simple usage:

setMinMaxWidth(100,800, 'myDivID');

This code also can easily be adapted for min-/max-height.

Note: You cannot get the width of an invisible element. So you have to make the element visible before invoking the methods.


Sources:

/**
 * Utility method to help jQuery work with JSF clientIds.
 * http://cagataycivici.wordpress.com/2009/05/14/jquery-and-jsf-ids/
 */
function escapeClientId(id) {
	return "#" + id.replace(/:/g,"\\:");
}

/**
 * Set the max-width of the element.
 * @param maxWidth max-width in pixels
 * @param element element
 */
function setMaxWidth(maxWidth, element){
   var item=jQuery(escapeClientId(element));
   if (null==item){
	   return;
   }
   var width=item.width();

   if (null==width || 0==width){
	 //element not found or not visible
	 return;   
   }
   
   //if content-width>max-width then resize to the max-width
   if (width>maxWidth){
     item.width(maxWidth);
   }
} 

/**
 * Set the min-width of the element.
 * @param minWidth min-width in pixels
 * @param element element
 */
function setMinWidth(minWidth, element){
   var item=jQuery(escapeClientId(element));
   if (null==item){
	   return;
   }
   var width=item.width();
   if (null==width || 0==width){
		 //element not found or not visible
		 return;   
   }

   //if content-width<min-width then resize to the min-width
   if (width<minWidth){
     item.width(minWidth);
   }
}

/**
 * Set the width within the range of min..max of the element.
 * @param minWidth min-width in pixels
 * @param maxWidth max-width in pixels
 * @param id id of the element to resize
 */
function setMinMaxWidth(minWidth, maxWidth, id){
	setMinWidth(minWidth, ''+id);
	setMaxWidth(maxWidth, ''+id);
}