No AJAX functionality in menubar

Hello,

I set up a new web-application in myeclipse to see how the ajax takes effect with the menubar component but ajax ist rendering.
Here's the jsp file:

 <%@ page language="java" pageEncoding="ISO-8859-1"%>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://www.simplica.com/jsf/ecruiser" prefix="e" %>
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <body>
     This is my JSP page. <br>
     <f:view>
 <f:subview id="menubar-basic-jsp">
   <link id="menubar-basic-css" rel="stylesheet" href="menubar/menu.css"/>
   
   <e:div id="menubar-basic-control-panel" align="center" styleClass="controlPanel">
     <h:outputText value="MenuBar Basic"/>
   </e:div>
 	  <h:form>
 			<h:outputText value="MenuBar with SelectionListener Example"
 			styleClass="title"/>
 			<div class="display-panel">
 			<b>Selected Value:</b>
 			<h:outputText binding="#{selectionListenerBean.selectionOutputText}"/>
 			</div>
 			<e:menubar ajax="true"
 			horizontal="true" selectionListener="#{selectionListenerBean.processSelectionChange}">
 			<e:menucell value="File">
 			<e:menucell value="New" icon="images/folder.gif"/>
 			<e:menucell value="Window"/>
 			
 			<e:menucell value="Close"/>
 			</e:menucell>
 			
 			
 			</e:menubar>
 			<e:div ajax="true">
 			<h:outputText value="Hier auf traditionelle Weise: #{selectionListenerBean.inhalt}"></h:outputText>
 			</e:div>
 		</h:form>
 
 </f:subview>
 </f:view>
   </body>
 </html>

I modyfied the backing bean to print out som informations on the console:

 package de.reitermayer.ohf.listener;
 
 import ecruiser.advanced.menu.MenuCell; 
 import ecruiser.control.SelectionEvent; 
 import ecruiser.util.ECUtils; 
 import javax.faces.component.UIComponent;
 import javax.faces.component.UIOutput; 
  
 public class SelectionListenerBean {
 	
 	private UIOutput selectionOutputText;
 	private String inhalt;
 	
 	
 	
 	public UIOutput getSelectionOutputText() {
 	return selectionOutputText;
 	}
 	
 	
 	public String getInhalt() {
 		return inhalt;
 	}
 
 	public void setInhalt(String inhalt) {
 		this.inhalt = inhalt;
 	}
 
 
 
 	public void setSelectionOutputText(UIOutput selectionOutputText) {
 	this.selectionOutputText = selectionOutputText;
 	}
 	
 	
 	
 	public void processSelectionChange(SelectionEvent event) {
 		
 		UIComponent tmpComponent = event.getComponent();
 		String wer_hat_geklickt = tmpComponent.getId();
 		
 		System.out.println("######### EVENT ########## wer hat geklickt: "+wer_hat_geklickt);
 		
 	MenuCell selection = (MenuCell)event.getSelection();
 	if (selection == null) {
 	selectionOutputText.setValue(null);
 	}
 	else {
 	selectionOutputText.setValue(selection.getValue());
 	System.out.println("######### EVENT ########## welcher Wert: "+selection.getValue().toString());
 	this.inhalt = selection.getValue().toString();
 	
 	}
 	ECUtils.addDirtyComponent(selectionOutputText);
 	}
 	
 	}

When a menucell is clicked, you can see something like that on the console:

######### EVENT ########## wer hat geklickt: _id4
######### EVENT ########## welcher Wert: Window

So it fires an event but furthermore nothing happened on the page. If I change the ajax value from the menubar component form ajax="true" to ajax="false" the page is fully rendered, of course with the correct output.

The application is running on tomcat 5.5.17 and I'm using sun's RI 1.1.01

The web.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns<img src="http://www.simplica.com//images/smilies/1069449046bcd664c21db15b1dfedaee.gif"  />si="http://www.w3.org/2001/XMLSchema-instance" version="2.4" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   <a href="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" target="_blank" rel="nofollow">http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd</a>">
   <context-param>
     <param-name>javax.faces.CONFIG_FILES</param-name>
     <param-value>/WEB-INF/faces-config.xml</param-value>
   </context-param>
   
     <context-param>
     <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
     <param-value>server</param-value>
   </context-param>
   
     <context-param>
     <param-name>com.sun.faces.verifyObjects</param-name>
     <param-value>true</param-value>
   </context-param>
   
   <!-- Ensure listener loads on older application servers -->
   <listener>
     <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
   </listener>
   
   <servlet>
     <servlet-name>Faces Servlet</servlet-name>
     <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
     <load-on-startup>1</load-on-startup>
   </servlet>
   <servlet-mapping>
     <servlet-name>Faces Servlet</servlet-name>
     <url-pattern>/faces/*</url-pattern>
   </servlet-mapping>
   
   <welcome-file-list>
     <welcome-file>index.html</welcome-file>
   </welcome-file-list>
   
 </web-app>

The faces-config.xml:

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
 
 <faces-config>
   <managed-bean>
   	<managed-bean-name>selectionListenerBean</managed-bean-name>
   	<managed-bean-class>de.reitermayer.ohf.listener.SelectionListenerBean</managed-bean-class>
   	<managed-bean-scope>session</managed-bean-scope>
   </managed-bean>
   
 
   	<lifecycle>
 		<phase-listener>de.reitermayer.ohf.listener.MyPhaseListener</phase-listener>
 	</lifecycle>
   
 </faces-config>

I'm just discovering the ecuiser library at this time, so I have just a trial license key and I can't imagine that this has something to do with this problem. So the question here is:

What am I doing wrong?

Greetings, Axel

So it fires an event but furthermore nothing happened on the page. If I change the ajax value from the menubar component form ajax="true" to ajax="false" the page is fully rendered, of course with the correct output.

What did you expect to happen on the page? AJAX property makes the difference between full page request and component-based request. That's the purpose of ajax.

I expected the same effect as on your demo. If you click a menucell there the whole page is not reloading.

You forgot to set id's on the <h:outputText>. In this way, the outputText can be found in the view, and can be updated by AJAX with the right value.

Selected Value:
<h:outputText id="output" binding="#{selectionListenerBean.selectionOutputText}"/>

Hello adina_mihai,
you are right. That's it! Now it works

Thank you.

Axel


	Home \| News \| Contact \| About \| License \| Privacy \| Documentation
	Copyright © 2009 Simplica Corporation. All rights reserved.