3 Replies Latest reply on Jan 22, 2008 4:08 AM by tjakopec

panelBar IE strange behavior

tjakopec Jan 16, 2008 7:38 AM

I have simple page whit some javascript functionality. In FireFox everything working like it suppose to, but in IE doesn't. It doesn't report any javascript error.

I write here because when I use just use inputText, IE sets focus, but when I use inputText in panelBar IE doesn't set focus

Example Page 1 (work on FF, not on IE)

<f:view>
 <html>
 <body>
 <h:form id="forma">
 <r:panelBar>
 <r:panelBarItem label="action">
 <t:inputText id="unos"></t:inputText>
 </r:panelBarItem>
 </r:panelBar>
 </h:form>
 <script type="text/javascript">
 <!--
 var element = document.getElementById("forma:unos");
 if(element!=null)
 element.focus();
 //-->
 </script>
 </body>
 </html>
</f:view>

Example Page 2 (working both on FF and IE)

<f:view>
 <html>
 <body>
 <h:form id="forma">
 <t:inputText id="unos"></t:inputText>
 </h:form>
 <script type="text/javascript">
 <!--
 var element = document.getElementById("forma:unos");
 if(element!=null)
 element.focus();
 //-->
 </script>
 </body>
 </html>
</f:view>

1. Re: panelBar IE strange behavior

sergeyhalipov Jan 18, 2008 12:15 PM (in response to tjakopec)

All panels bar items (div elements) are first rendered as undisplayed and one of them became visible after page are fully loaded (<body onload=... is used). In IE your script runs before panel bar script so it tries to move focus to invisible element. Unfortunately we are not able to change this behavior.
However there is a workaround. Using onload="setTimeout(..)" solves the problem.

Example:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://labs.jboss.com/jbossrichfaces/ui/panelbar" prefix="r" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript">
 <!--
 setFocus = function() {
 var element = document.getElementById("forma:unos");
 if(element!=null)
 element.focus();
 }
 //-->
 </script>
</head>
<body onload="setTimeout(setFocus, 100);" >
 <f:view>
 <h:form id="forma">
 <r:panelBar>
 <r:panelBarItem label="action">
 <h:inputText id="unos" value="test" />
 </r:panelBarItem>
 </r:panelBar>
 </h:form>
 </f:view>
</body>
</html>

2. Re: panelBar IE strange behavior

todd.nash Jan 18, 2008 5:46 PM (in response to tjakopec)

Does this issue occur with any of the other components when rendering in IE?

I have a project that we are seeing very different behavior in IE than in Firefox. We develop using FF and test later in IE (we are developing on non-windows machines). The difference in IE is very significant.

This has become a big enough issue that we are about to scrap RichFaces and move to something else.

Any insight would be helpful.
Actions
3. Re: panelBar IE strange behavior

tjakopec Jan 22, 2008 4:08 AM (in response to tjakopec)

"todd.nash@gmail.com" wrote:
Does this issue occur with any of the other components when rendering in IE?

I have a project that we are seeing very different behavior in IE than in Firefox. We develop using FF and test later in IE (we are developing on non-windows machines). The difference in IE is very significant.

This has become a big enough issue that we are about to scrap RichFaces and move to something else.

Any insight would be helpful.

We have exactly the same problem. Project was develop in FF and now we must adjust everything for IE because user work with IE.

I also think that RF component should have exactly the same behavior in any browser!

I will also wanna hear other thoughts on this issue!
Actions

Go to original post