1 2 3 Previous Next 30 Replies Latest reply on Jun 6, 2007 2:38 PM by Sergey Smirnov

    use ajax4jsf in existing custom jsf components

    Huang Bo Newbie

      Is it possible to use ajax4jsf in existing custom JSF components? I don't want to recreate them using CDK which is too time-consuming.

        • 1. Re: use ajax4jsf in existing custom jsf components
          Huang Bo Newbie

          I tried to use <a4j:support id="s1" event="onclick" reRender="rep"/> in my custom jsf component, and the generated HTML is:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          <html>
          <head>
          <title>repeater</title>
          <script type='text/javascript' src='/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf'></script></head>
          <body>
          <form id="_id0" method="post" action="/ajax4jsf/index.jsf" enctype="application/x-www-form-urlencoded">
          <input type="radio" name="_id0:r1" value="radio3" onclick="A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'_id0:s1':'_id0:s1'},'actionUrl':'/ajax4jsf/index.jsf'})"> radio3</input>
          <input type="radio" name="_id0:r1" value="radio4" onclick="A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'_id0:s1':'_id0:s1'},'actionUrl':'/ajax4jsf/index.jsf'})"> radio4</input>
          <span id="_id0:rep"></span>
          <input type="hidden" name="_id0" value="_id0" /></form>
          </body>
          </html>
          


          But when I click the radio buttons, nothing happens, it's expected the value of the clicked radio will be shown in the span. If I use standard <h:selectOneRadio> tag, everything works fine, and the generated HTML is:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          <html>
          <head>
          <title>repeater</title>
          <script type='text/javascript' src='/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf'></script></head>
          <body>
          <form id="_id0" method="post" action="/ajax4jsf/index.jsf" enctype="application/x-www-form-urlencoded">
          <table id="_id0:r1">
          <tr>
          <td><label>
          <input type="radio" name="_id0:r1" value="radio3" onclick="A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'_id0:s1':'_id0:s1'},'actionUrl':'/ajax4jsf/index.jsf'})"> radio3</input></label></td>
          <td><label>
          <input type="radio" name="_id0:r1" value="radio4" onclick="A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'_id0:s1':'_id0:s1'},'actionUrl':'/ajax4jsf/index.jsf'})"> radio4</input></label></td>
          </tr>
          </table>
          <span id="_id0:rep"></span>
          <input type="hidden" name="_id0" value="_id0" /></form>
          </body>
          </html>
          


          Could any one tell me why this would happen? The generated HTML seem really similar. Does ajax4jsf not support custom jsf components?

          • 2. Re: use ajax4jsf in existing custom jsf components
            Sergey Smirnov Master

            post the original jsp (or xhtml) code, but not what it is generated into.

            In general, ajax4jsf is designed for working with custom components. Using CDK for creating components is not required to use along with a4j:support

            • 3. Re: use ajax4jsf in existing custom jsf components
              Huang Bo Newbie

              the jsp using custom tag:

              <%@ page language="java"%>
              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
              <%@ taglib uri="http://mydomain.com/jsf" prefix="my"%>
              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
              
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
               <head>
               <title>repeater</title>
               </head>
               <body>
               <f:view>
               <h:form>
               <my:selectOneRadio id="r1" value="#{bean.text}">
               <f:selectItem itemLabel="radio3" itemValue="radio3" />
               <f:selectItem itemLabel="radio4" itemValue="radio4" />
               <a4j:support id="s1" event="onclick" reRender="rep"/>
               </my:selectOneRadio>
               <h:outputText value="#{bean.text}" id="rep" />
               </h:form>
               </f:view>
               </body>
              </html>
              
              


              the jsp using standard tag:
              <%@ page language="java"%>
              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
              
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
               <head>
               <title>repeater</title>
               </head>
               <body>
               <f:view>
               <h:form>
               <h:selectOneRadio id="r1" value="#{bean.text}">
               <f:selectItem itemLabel="radio1" itemValue="radio1" />
               <f:selectItem itemLabel="radio2" itemValue="radio2" />
               <a4j:support id="s1" event="onclick" reRender="rep"/>
               </h:selectOneRadio>
               <h:outputText value="#{bean.text}" id="rep" />
               </h:form>
               </f:view>
               </body>
              </html>
              


              The standard one works but my custom one doesn't. It's really weird.

              • 4. Re: use ajax4jsf in existing custom jsf components
                Sergey Smirnov Master

                I have two guesses - conversion problem and event missing.

                Add somewhere on the page inside the f:view :

                <a4j:outputPanel ajaxRendered="true">
                 <h:messages>
                </a4j:outputPanel>
                


                and see does the message appear there then you click.

                If not, add:
                <a4j:log hotkey="M" />

                press ctrl-Shift-M for popup debug window. then click the radio. Does the debug window show something?




                • 5. Re: use ajax4jsf in existing custom jsf components
                  Huang Bo Newbie

                  yes, the debug window shows the following information:

                  debug[17:25:33,046]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: click
                  debug[17:25:33,046]: NEW AJAX REQUEST !!! with form :_id3
                  debug[17:25:33,062]: parameter _id3:s1 with value _id3:s1
                  debug[17:25:33,078]: Start XmlHttpRequest
                  debug[17:25:33,078]: Reqest state : 1
                  debug[17:25:33,093]: QueryString: AJAXREQUEST=_viewRoot&_id3%3Ar1=radio4&_id3=_id3&_id3%3As1=_id3%3As1&
                  debug[17:25:33,140]: Reqest state : 2
                  debug[17:25:33,140]: Reqest state : 3
                  debug[17:25:33,156]: Reqest state : 4
                  debug[17:25:33,171]: Reqest end with state 4
                  debug[17:25:33,171]: Response with content-type: text/xml;charset=UTF-8
                  debug[17:25:33,187]: Full response content: <?xml version="1.0"?>
                  repeater

                  debug[17:25:33,187]: Update page by list of rendered areas from response _id0,_id3:rep
                  debug[17:25:33,203]: search for elements by name 'script' in element #document
                  debug[17:25:33,203]: selectNodes found 1
                  debug[17:25:33,218]: in response with src=/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf
                  debug[17:25:33,218]: Such element exist in document
                  debug[17:25:33,234]: search for elements by name 'link' in element #document
                  debug[17:25:33,234]: selectNodes found 0
                  debug[17:25:33,250]: Attempt to update part of page for Id: _id0
                  debug[17:25:33,265]: call selectSingleNode for id= _id0
                  debug[17:25:33,265]: Replace content of node by outerHTML()
                  debug[17:25:33,281]: search for elements by name 'script' in element span
                  debug[17:25:33,281]: selectNodes found 0
                  debug[17:25:33,296]: Scripts in updated part count : 0
                  debug[17:25:33,296]: Update part of page for Id: _id0 successful
                  debug[17:25:33,296]: Attempt to update part of page for Id: _id3:rep
                  debug[17:25:33,296]: call selectSingleNode for id= _id3:rep
                  debug[17:25:33,312]: Replace content of node by outerHTML()
                  debug[17:25:33,312]: search for elements by name 'script' in element span
                  debug[17:25:33,312]: selectNodes found 0
                  debug[17:25:33,312]: Scripts in updated part count : 0
                  debug[17:25:33,312]: Update part of page for Id: _id3:rep successful
                  debug[17:25:33,312]: call selectSingleNode for id= ajax-update-ids
                  debug[17:25:33,328]: Hidden JSF state fields:
                  debug[17:25:33,328]: search for elements by name 'input' in element span
                  debug[17:25:33,328]: selectNodes found 1
                  debug[17:25:33,328]: Replace value for inputs: 3 by new values: 1
                  debug[17:25:33,328]: Input in response: jsf_sequence
                  debug[17:25:33,343]: search for elements by name 'INPUT' in element span
                  debug[17:25:33,343]: selectNodes found 0
                  debug[17:25:33,343]: Replace value for inputs: 3 by new values: 0

                  But I don't understand what's wrong.

                  • 6. Re: use ajax4jsf in existing custom jsf components
                    Huang Bo Newbie

                    yes, the debug window shows the following information:

                    debug[17:25:33,046]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: click
                    debug[17:25:33,046]: NEW AJAX REQUEST !!! with form :_id3
                    debug[17:25:33,062]: parameter _id3:s1 with value _id3:s1
                    debug[17:25:33,078]: Start XmlHttpRequest
                    debug[17:25:33,078]: Reqest state : 1
                    debug[17:25:33,093]: QueryString: AJAXREQUEST=_viewRoot&_id3%3Ar1=radio4&_id3=_id3&_id3%3As1=_id3%3As1&
                    debug[17:25:33,140]: Reqest state : 2
                    debug[17:25:33,140]: Reqest state : 3
                    debug[17:25:33,156]: Reqest state : 4
                    debug[17:25:33,171]: Reqest end with state 4
                    debug[17:25:33,171]: Response with content-type: text/xml;charset=UTF-8
                    debug[17:25:33,187]: Full response content: <?xml version="1.0"?>
                    <html xmlns="http://www.w3.org/1999/xhtml"><head><title>repeater</title><script type="text/javascript" src="/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf">
                    </script></head><body><span id="_id0"></span><span id="_id3:rep"></span><meta name="Ajax-Update-Ids" content="_id0,_id3:rep" /><span id="ajax-update-ids"><input type="hidden" name="jsf_sequence" value="1" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html>
                    debug[17:25:33,187]: Update page by list of rendered areas from response _id0,_id3:rep
                    debug[17:25:33,203]: search for elements by name 'script' in element #document
                    debug[17:25:33,203]: selectNodes found 1
                    debug[17:25:33,218]: <script> in response with src=/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf
                    debug[17:25:33,218]: Such element exist in document
                    debug[17:25:33,234]: search for elements by name 'link' in element #document
                    debug[17:25:33,234]: selectNodes found 0
                    debug[17:25:33,250]: Attempt to update part of page for Id: _id0
                    debug[17:25:33,265]: call selectSingleNode for id= _id0
                    debug[17:25:33,265]: Replace content of node by outerHTML()
                    debug[17:25:33,281]: search for elements by name 'script' in element span
                    debug[17:25:33,281]: selectNodes found 0
                    debug[17:25:33,296]: Scripts in updated part count : 0
                    debug[17:25:33,296]: Update part of page for Id: _id0 successful
                    debug[17:25:33,296]: Attempt to update part of page for Id: _id3:rep
                    debug[17:25:33,296]: call selectSingleNode for id= _id3:rep
                    debug[17:25:33,312]: Replace content of node by outerHTML()
                    debug[17:25:33,312]: search for elements by name 'script' in element span
                    debug[17:25:33,312]: selectNodes found 0
                    debug[17:25:33,312]: Scripts in updated part count : 0
                    debug[17:25:33,312]: Update part of page for Id: _id3:rep successful
                    debug[17:25:33,312]: call selectSingleNode for id= ajax-update-ids
                    debug[17:25:33,328]: Hidden JSF state fields:
                    debug[17:25:33,328]: search for elements by name 'input' in element span
                    debug[17:25:33,328]: selectNodes found 1
                    debug[17:25:33,328]: Replace value for inputs: 3 by new values: 1
                    debug[17:25:33,328]: Input in response: jsf_sequence
                    debug[17:25:33,343]: search for elements by name 'INPUT' in element span
                    debug[17:25:33,343]: selectNodes found 0
                    debug[17:25:33,343]: Replace value for inputs: 3 by new values: 0
                    

                    But I don't understand what's wrong.

                    • 7. Re: use ajax4jsf in existing custom jsf components
                      Huang Bo Newbie

                      and here is the debug information for the working jsp:

                      debug[17:34:44,953]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: click
                      debug[17:34:44,968]: NEW AJAX REQUEST !!! with form :_id3
                      debug[17:34:44,968]: parameter _id3:s1 with value _id3:s1
                      debug[17:34:44,984]: Start XmlHttpRequest
                      debug[17:34:44,984]: Reqest state : 1
                      debug[17:34:45,000]: QueryString: AJAXREQUEST=_viewRoot&_id3%3Ar1=radio1&_id3=_id3&_id3%3As1=_id3%3As1&
                      debug[17:34:45,062]: Reqest state : 2
                      debug[17:34:45,078]: Reqest state : 3
                      debug[17:34:45,093]: Reqest state : 4
                      debug[17:34:45,093]: Reqest end with state 4
                      debug[17:34:45,109]: Response with content-type: text/xml;charset=UTF-8
                      debug[17:34:45,109]: Full response content: <?xml version="1.0"?>
                      <html xmlns="http://www.w3.org/1999/xhtml"><head><title>repeater</title><script type="text/javascript" src="/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf">
                      </script></head><body><span id="_id0"></span><span id="_id3:rep">radio1</span><meta name="Ajax-Update-Ids" content="_id0,_id3:rep" /><span id="ajax-update-ids"><input type="hidden" name="jsf_sequence" value="1" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html>
                      debug[17:34:45,125]: Update page by list of rendered areas from response _id0,_id3:rep
                      debug[17:34:45,125]: search for elements by name 'script' in element #document
                      debug[17:34:45,140]: selectNodes found 1
                      debug[17:34:45,140]: <script> in response with src=/ajax4jsf/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf
                      debug[17:34:45,156]: Such element exist in document
                      debug[17:34:45,156]: search for elements by name 'link' in element #document
                      debug[17:34:45,171]: selectNodes found 0
                      debug[17:34:45,171]: Attempt to update part of page for Id: _id0
                      debug[17:34:45,187]: call selectSingleNode for id= _id0
                      debug[17:34:45,187]: Replace content of node by outerHTML()
                      debug[17:34:45,187]: search for elements by name 'script' in element span
                      debug[17:34:45,187]: selectNodes found 0
                      debug[17:34:45,203]: Scripts in updated part count : 0
                      debug[17:34:45,203]: Update part of page for Id: _id0 successful
                      debug[17:34:45,203]: Attempt to update part of page for Id: _id3:rep
                      debug[17:34:45,203]: call selectSingleNode for id= _id3:rep
                      debug[17:34:45,203]: Replace content of node by outerHTML()
                      debug[17:34:45,218]: search for elements by name 'script' in element span
                      debug[17:34:45,218]: selectNodes found 0
                      debug[17:34:45,218]: Scripts in updated part count : 0
                      debug[17:34:45,218]: Update part of page for Id: _id3:rep successful
                      debug[17:34:45,218]: call selectSingleNode for id= ajax-update-ids
                      debug[17:34:45,234]: Hidden JSF state fields:
                      debug[17:34:45,234]: search for elements by name 'input' in element span
                      debug[17:34:45,234]: selectNodes found 1
                      debug[17:34:45,234]: Replace value for inputs: 3 by new values: 1
                      debug[17:34:45,234]: Input in response: jsf_sequence
                      debug[17:34:45,250]: search for elements by name 'INPUT' in element span
                      debug[17:34:45,250]: selectNodes found 0
                      debug[17:34:45,250]: Replace value for inputs: 3 by new values: 0
                      


                      The different is: in the debug information of working jsp, the span in the response content contains the value "radio1":
                      <span id="_id3:rep">radio1</span>
                      


                      but the one in the jsp with custom tag has no value:
                      <span id="_id3:rep"></span>
                      


                      Is this why it doesn't work? And if yes, what might be the reason that causes this problem?

                      • 8. Re: use ajax4jsf in existing custom jsf components
                        Sergey Smirnov Master

                        yes, it looks like ajax itself works fine, but your custom component does
                        not update the #{bean.text}

                        try

                        <%@ page language="java"%>
                        <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                        <%@ taglib uri="http://mydomain.com/jsf" prefix="my"%>
                        <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                        
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                        <html>
                         <head>
                         <title>repeater</title>
                         </head>
                         <body>
                         <f:view>
                         <h:form>
                         <my:selectOneRadio id="r1" value="#{bean.text}">
                         <f:selectItem itemLabel="radio3" itemValue="radio3" />
                         <f:selectItem itemLabel="radio4" itemValue="radio4" />
                         </my:selectOneRadio>
                         <h:commandButton value="Manual Refresh" />
                         <h:messages />
                         <h:outputText value="#{bean.text}" id="rep" />
                         </h:form>
                         </f:view>
                         </body>
                        </html>


                        I.e. I temporary removed ajax from the scene. Click the radio, then click the button. Does the "rep" updated well?

                        • 9. Re: use ajax4jsf in existing custom jsf components
                          Huang Bo Newbie

                          No, the "rep" isn't updated...Seems I need to fix this first before I try a4j again. Thanks for your help.

                          BTW, must the custom component be able to update #{bean.text} so a4j could get the value? I thought a4j got value from the DOM using javascript...

                          • 10. Re: use ajax4jsf in existing custom jsf components
                            Sergey Smirnov Master

                             

                            "huangbo" wrote:

                            BTW, must the custom component be able to update #{bean.text}...


                            No. It should not be a difference between ajax and non-ajax

                            • 11. Re: use ajax4jsf in existing custom jsf components
                              Eric Jung Newbie

                              I've got a very similar problem. Here is my custom component:

                              <ppp:selectManyPicklist id="r1" ... >
                               <a4j:support id="s1" event="onclick" reRender="pg1"/>
                               <f:selectItems value="#{fooBean.collection}"/>
                              </ppp:selectManyPicklist>

                              This component renders two < select/> boxes with 4 < input/> buttons to move < option/>s between them:
                              [url=http://img107.imageshack.us/my.php?image=capture642007123737pmce0.png][img=http://img107.imageshack.us/img107/8707/capture642007123737pmce0.th.png][/url]
                              The <a4j:support/> tag adds onclick handlers to the < select/> boxes but not the < input/> buttons. How can I get the onclick handlers to render for the < input/> buttons instead?

                              Many thanks,
                              grimholtz

                              • 12. Re: use ajax4jsf in existing custom jsf components
                                Sergey Smirnov Master

                                a4j:support attached event on the server side. So, it does add handler to what attribute of the component you have.
                                If I were you I add one more custom event like 'onswitch" and invoke it each time user clicks on any of those four buttons.

                                • 13. Re: use ajax4jsf in existing custom jsf components
                                  Eric Jung Newbie

                                   

                                  "SergeySmirnov" wrote:
                                  a4j:support attached event on the server side. So, it does add handler to what attribute of the component you have.
                                  If I were you I add one more custom event like 'onswitch" and invoke it each time user clicks on any of those four buttons.

                                  Thank you, Sergey. Do you mean add custom event "onswitch" on the server-side to the UIComponents or on the client-side in the JS?

                                  • 14. Re: use ajax4jsf in existing custom jsf components
                                    Sergey Smirnov Master

                                    It should be an attribute 'onswitch' of the component ppp:selectManyPicklist . a4j:support cannot be attached to the event created dynamically on the client side (as soon as it is attached on the server side)

                                    1 2 3 Previous Next