RichContextMenu - Javascript error

[adesai]

Hi there, I have following code which should help me zoom-in / zoom-out a image. I can see "Zoom-in" and "Zoom-out" menu when I right-click. However, when I click on the menu, get a havascript error: "document.getElementById(...) is null or not an object".

Please help.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">


 <script type="text/javascript">
 function enlarge(){
 alert('enlarge');

 document.getElementById('pic').width=document.getElementById('pic').width*1.1;
 document.getElementById('pic').height=document.getElementById('pic').height*1.1;
 }
 function decrease(){
 alert('decrease');
 document.getElementById('pic').width=document.getElementById('pic').width*0.9;
 document.getElementById('pic').height=document.getElementById('pic').height*0.9;
 }
 </script>



 <h:form id="form1" name="form1">
 <h:panelGrid columns="1" columnClasses="cent">
 <h:panelGroup id="picture">
 <h:graphicImage value="/images/projects.jpg" id="pic"/>
 <rich:contextMenu event="oncontextmenu" attached="true" submitMode="none">
 <rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"></rich:menuItem>
 <rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"></rich:menuItem>
 </rich:contextMenu>
 </h:panelGroup>
 </h:panelGrid>
 </h:form>



</ui:composition>

thanks for your help.
-Amol

[sergeysmirnov]

What JSF implementation you use?

[adesai]

Sorry, I did not understand your question. Do i need to use SunRI or MyFaces along with RichFaces?

[sergeysmirnov]

Any of them, but it was not the point. The question: Which one you use now?

[adesai]

I do not see any JSF related jars in my lib. I just have RichFaces related jars. And this is my first ever app in RichFaces (and JSF for that matter). So I guess, no, I'm not using any JSF implementation.

[sergeysmirnov]

Hmm. I am lost with your strange answer.
Let's start from another side.
Post the list of jar files in the WEB-INF/lib folder.

[adesai]

Ok, I've following JARs in my lib:

commons-beanutils-1.7.0
commons-collections-3.2
commons-digester-1.8
commons-logging-1.0.4
explode
jsf-facelets-1.1.14
jstl-1.0
portletbridge-api-1.0.0-20080212.175852-5
portletbridge-impl-1.0.0-20080212.175852-5
richfaces-api-3.1.4.SR1
richfaces-impl-3.1.4.SR1
richfaces-ui-3.1.4.SR1

jaxb-api
jaxb-impl
jaxb-xjc
jboss-jaxrpc
jboss-jaxws

[sergeysmirnov]

Ok. You have an implementation that comes with jboss portal.

Returning back to your example.
In JSF, some components are naming containers. It means that any components inside it have a client id different from the one you have inside id="".
For example, in you case, the client id for h:graphicImage is not a "pic", but "form1:pic". This is why document.getElementById('pic') does not work for you.
At least, it should be document.getElementById('form1:pic')

However, this might work if you have no any other outer naming container. If so, the client id will be more complicated.

Just for helping to resolve this difficulty, RichFaces 3.2.0 comes with three helper EL expressions: (see http://labs.jboss.com/auth/wiki/RichFacesWhatIsNewIn3_2_0)

In you case, #{rich:element(Id)} is more suitable.

Try to replace document.getElementById('pic') with #{rich:element('pic')} everywhere in the code snippet.

I.e. instead of
document.getElementById('pic').width=document.getElementById('pic').width*1.1;

have
#{rich:element('pic')}.width=#{rich:element('pic')}.width*1.1;