6 Replies Latest reply on Apr 14, 2007 4:42 PM by mat

    Seam <s:link> and Ajax

    mat Newbie

      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;

        • 1. Re: Seam <s:link> and Ajax
          Sergey Smirnov Master

          Where did you find information that s:link has a reRender attribute?

          • 2. Re: Seam <s:link> and Ajax
            mat Newbie

            Hi Sergey,
            Thanks for the reply. My bad ;( I guess I wanted the feature so much, I assumed reRender is supported. I also tried <a:commandButton ... instead of <s:link with no luck - record not displayed.
            Is there any way to achieve this?

            Many thanks.

            • 3. Re: Seam <s:link> and Ajax
              Sergey Smirnov Master

              a:commandLink is more suitable here.

              Does the action #{messageManager.select} is invoked?

              Do you use FireFox with FireBug extention to test your developing application?

              • 4. Re: Seam <s:link> and Ajax
                mat Newbie

                Thanks for your suggestions.
                I found the followings:
                The action #{messageManager.select} is not invoked.

                I get 1 Error at line 62 of the FireBUG Script listing:
                I have included parts of the listing:

                this._form has no properties
                Query("_viewRoot", null)org.ajax4jsf.fram... (line 62)
                SubmiteventsQueue("_viewRoot", null, Object type=click target=a#_id13:0:select, Object parameters=Object)org.ajax4jsf.fram... (line 53)
                Submit("_viewRoot", null, click clientX=0, clientY=0, Object parameters=Object)org.ajax4jsf.fram... (line 53)
                onclick(click clientX=0, clientY=0)messages.seam (line 1)
                [Break on this error] elem=document.getElementById(targetID+".stop");if(elem){elem.style.display="";if...
                


                The corresponding HTML listing for the a:commandLink cell
                <td id="_id13:3:_id17" class="dr-table-cell rich-table-cell">
                <a id="_id13:3:select" onclick="A4J.AJAX.Submit('_viewRoot',null,event,{'parameters':{'_id13:3:select':'_id13:3:select'},'actionUrl':'/TestApplication/messages.seam'});return false;" name="_id13:3:select" href="#">Hello World</a>
                </td>
                


                Apperciate your help and any suggestions on how to fix the error.
                Many thanks.

                • 5. Re: Seam <s:link> and Ajax
                  Sergey Smirnov Master

                  This means you miss h:form to surround the form elements such as links

                  • 6. Re: Seam <s:link> and Ajax
                    mat Newbie

                    Thanks for your help Sergey. h:form fixed the problem ;)