use ajax4jsf in existing custom jsf components| JBoss.org Content Archive (Read Only)

1. Re: use ajax4jsf in existing custom jsf components

huangbo Jun 3, 2007 11:38 AM (in response to huangbo)

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

sergeysmirnov Jun 4, 2007 3:46 AM (in response to huangbo)

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

huangbo Jun 4, 2007 4:01 AM (in response to huangbo)

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

sergeysmirnov Jun 4, 2007 4:32 AM (in response to huangbo)

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

huangbo Jun 4, 2007 5:26 AM (in response to huangbo)

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

huangbo Jun 4, 2007 5:30 AM (in response to huangbo)

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

huangbo Jun 4, 2007 5:46 AM (in response to huangbo)

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

sergeysmirnov Jun 4, 2007 6:24 AM (in response to huangbo)

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

huangbo Jun 4, 2007 6:52 AM (in response to huangbo)

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

sergeysmirnov Jun 4, 2007 8:37 AM (in response to huangbo)

"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

grimholtz Jun 4, 2007 12:45 PM (in response to huangbo)

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

sergeysmirnov Jun 4, 2007 1:28 PM (in response to huangbo)

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

grimholtz Jun 4, 2007 1:43 PM (in response to huangbo)

"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

sergeysmirnov Jun 4, 2007 1:51 PM (in response to huangbo)

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)