Seam <s:link> and Ajax
Trying to ajaxify the messages example from Seam:
Using jboss-4.0.5.GA, jboss-seam-1.2.1.GA.
I have converted the messages example under seam to facelets
Changed the datatable to rich:dataTable and added a panel for displaying the selected row in the datatable. Selection is based on <s:link /> tag
The row selection works fine, however the whole page seems to refresh.
The changes are:
<s:link value="#{msg.title}" action="#{messageManager.select}" reRender="messagePanel" />
and for displaying the selection with ajax:
<rich:panel id="messagePanel">
<h3><h:outputText value="#{message.title}"/></h3>
<div><h:outputText value="#{message.text}"/></div>
<div><h:outputText value="#{message.datetime}"/></div>
</rich:panel>
Here is the full listing:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:a="https://ajax4jsf.dev.java.net/ajax"
template="layout/template.xhtml">
<ui:define name="body">
<h2>My Message List</h2>
<h:outputText value="No messages to display" rendered="#{messageList.rowCount==0}"/>
<rich:dataTable var="msg" value="#{messageList}" rendered="#{messageList.rowCount>0}">
<h:column>
<f:facet name="header">
<h:outputText value="Read"/>
</f:facet>
<h:selectBooleanCheckbox value="#{msg.red}" disabled="true"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Title"/>
</f:facet>
<s:link value="#{msg.title}" action="#{messageManager.select}" reRender="messagePanel" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Date/Time"/>
</f:facet>
<h:outputText value="#{msg.datetime}">
<s:convertDateTime type="both" dateStyle="medium" timeStyle="short"/>
</h:outputText>
</h:column>
<h:column>
<s:button value="Delete" action="#{messageManager.delete}"/>
</h:column>
</rich:dataTable>
<rich:panel id="messagePanel">
<h3><h:outputText value="#{message.title}"/></h3>
<div><h:outputText value="#{message.text}"/></div>
<div><h:outputText value="#{message.datetime}"/></div>
</rich:panel>
</ui:define>
</ui:composition>
Kept the remaing parts of the messages source code the same.
Is anything I am not doing correctly?
Appreciate your help.
Many thanks;