3 Replies Latest reply on Jun 11, 2008 10:06 AM by Ilya Shaikovsky

    How to emulated onclick Ajax request from Javascript?

    Immo Benjes Apprentice

      Hi,

      I hope someone of you can help me with this.
      I have a rich:dataTable which can have multiple pages. The user can navigate between the elements (links) in the table with the keyboard (I am using keypressed for that). In fact the user won't have a mouse so everything has to be controlled by the keyboard. When you press down the focus is moved to the next element, when you press up it is moved to the previous element.

      I want to things:


      When a link in a table gets the focus it should execute the link (as in onclick)

      When the user gets to the last element in a page and presses down the next table page should be shown (as if you would use a rich:datascroller).


      So far I simply used the same Javascript calls Ajax4J was creating on the fly for the action event (onclick)

      e.g. for starting an AJAX request when getting the focus
      <a4j:commandLink ...
       onkeypress="#{stationEntry.keyHandleCommand}"
       onfocus="
       A4J.AJAX.Submit('_viewRoot','#{StationListManager.formID}',this,{'parameters':{'#{stationEntry.componentId}' : '#{stationEntry.componentId}'},'eventsQueue':'foo', 'actionUrl':'/EPG/pages/epg.seam?javax.portlet.faces.DirectLink=true'});
       }"
      id="#{StationListManager.entryID}"
      action="#{stationsHome.selectStation(stationEntry.station)}"
      reRender="NowNext,VideoID">
      </a4j:commandLink>


      The A4J.AJAX.Submit is the same Ajax4J creates at runtime for the 'action' parameter .

      For emulating a rich:datascroller I use
      A4J.AJAX.Submit('_viewRoot','SLM_Form0',e,{'ignoreDupResponses':true,'oncomplete':function(request,event,data){setNextFocus()}, 'parameters':{'SLM_Form0:SLMscrollerID':'next'} ,'eventsQueue':'SLM_Form0:SLMscrollerID','actionUrl':'/EPG/pages/epg.seam?javax.portlet.faces.DirectLink=true'} );
      
      in my keypress handler.
      This used to work fine with RichFaces 3.1 but now I moved to RichFaces 3.2 and it changed.
      Now the datascroller creates Javascript code like:
      Event.fire(this, 'rich:datascroller:onscroll', {'page': 'next'});


      Does anyone know how I can solve this problem without having to hardcode the javascript code Ajax4J would generate on the fly?
      I am fairly new to RichFaces/Seam so every help is welcome.

      Thank you

      Immo

        • 1. Re: How to emulated onclick Ajax request from Javascript?
          Ilya Shaikovsky Master

          a4j:jsFunction designed for this purposes. Usage of our non-publick API isn't a way because its free for changes ;)

          • 2. Re: How to emulated onclick Ajax request from Javascript?
            Immo Benjes Apprentice

            Thanks.
            I had a look at a4j:jsFunction and it solves my problem to a certain extend.
            What I am not sure about is how to pass arguments to the server side function. I know I can use a4j:actionparam and then use the
            facesContext.getExternalContext().getRequestParameterMap()
            to get the parameters but how could I pass Objects?
            Seam makes it possible to call a server side function with an Object as the parameter.
            E.g. on the server you've got

            @Name("something")
            class MyManager {
            public void setSomething(MyClass obj){
            ...
            }
            }


            Now on the client you could have
            
            <rich:dataTable id="#{StationListManager.tableID}" var="entry"
             value="#{something.entryList}" >
             <rich:column id="ColID">
             <a4j:commandLink value="#{entry.name}"
             action="#{something.setSomething(entry)}"
             reRender="someID">
             </a4j:commandLink>
             </rich:column>
            </rich:dataTable>
            


            How could I call "#{something.setSomething(entry)} from a a4j:jsFunction?

            Thanks

            Immo

            • 3. Re: How to emulated onclick Ajax request from Javascript?
              Ilya Shaikovsky Master

              but how about f:param or a4j:param for example?

              <a4j:jsFunction name="updateStyle" reRender="showname">
               <a4j:actionparam name="param1" assignTo="#{jsFunctionBean.name}" />
               <a4j:actionparam name="param2" assignTo="#{jsFunctionBean.count}" />
               </a4j:jsFunction>
              <td onmouseover="updateStyle('#CDEB8B', '16')"
               onmouseout="updateStyle('',14)">Mint, 14px
              </td>
              
              

              for example