Currently there is a MOOC on Oracle JET (https://blogs.oracle.com/geertjan/entry/sign_up_free_today_oracle), which I am attending. I am not a JS developer for my daily living, so there was no need for me to use the JS editor of NetBeans until now. So I was surprised by some cool features in NetBeans 8.1:
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.
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.
/**
* 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);
}
See Primefaces forum.
When there is enough time, i will provide a more detailed example.
I wanted to present a button with an onclick-handler which invokes the browser printing dialog.
With simple code like this
<button onclick="window.print();return false;">Print me</button>
It works in Mozilla Firefox 3.x and MS Internet Explorer 6, when the page is called directly. You can click the button, the dialog appears and everything is fine.
Issue 1: But when the page is the result of a JSF-navigation-rule-based <redirect/> the IE6 behaves in a strange way: You click on the button and nothing happens – no js-code is invoked. It works after a manual reload using the F5-key.
Issue 2: I figured out, that not even the following code works in IE6. After such a redirect.
<script type="text/javascript">
jQuery(document).ready(function(){
//your js-code here
});
</script>
Does anybody can reproduce the issues? And knows solutions for them?
Workaround for Issue 1:
Use self.print() instead of window.print(). This works in my usecase in FF3.x and IE6.
<button onclick="self.print();return false;">Print me</button>
