You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Bytecode <by...@me.com> on 2010/06/25 18:06:25 UTC
Updating a component outside the context of the f:ajax element
Is there a way to make the following code work, apart from placing the "#out" component inside the h:form element?
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h:form id="form1">
<p><h:outputText id="out" value="#{user.greeting}" /></p>
<h:inputText value="#{user.name}" id="user-name" />
<p><h:inputSecret value="#{user.password}" id="password" /></p>
<p>
<h:commandButton value="Login" id="login-button">
<f:ajax execute="user-name password" render="out" />
</h:commandButton>
</p>
</h:form>
</h:body>
</html>
At the moment the following exception is thrown by JSF when rendering the page:
<f:ajax> contains an unknown id 'out' - cannot locate it in the context of the component login-button
AW: update values on checkbox click
Posted by Martin Monshausen <Ma...@prodyna.de>.
Thanks Cédric,
I'll try it.
Thanks alot,
Martin
________________________________
Von: Cédric Durmont [mailto:cdurmont@gmail.com]
Gesendet: Di 29.06.2010 09:15
An: MyFaces Discussion
Betreff: Re: update values on checkbox click
Hi Martin,
This seems to be the normal JSF behavior. Let me explain :
- first, your boolean ra.kmt is false, inputText is present and
inputTextArea is not.
- after a click on your checkbox, ra.kmt is changed and becomes true.
So in the component tree, the inputText component is NOT present
(rendered=false). That's why it doesn't get the new value. I think it
might work if the checkbox was after the inputText, but I wouldn't
recommend you to expect this to always work in all cases.
However, the inputText should get a ValueChangeEvent, so if you add a
valueChangeListener, you should get the new value. You may want to
copy it yourself in ra.debitnote.
If it's possible for your project, another solution would be to work
with a jsf library such as Apache Trinidad. In Trinidad you have a
tr:inputText component that does inputText AND inputTextarea,
all-in-one, depending on the number of rows you set. Thus it would be
the very same component whether the checkbox is checked or not.
Your code with Trinidad would look like :
<tr:selectBooleanCheckBox value="#{ra.kmt}" autoSubmit="true" id="chooseSize"/>
<tr:inputText value="#{ra.debitnote}" rows="#{ra.kmt ? 4 : 1}"
partialTriggers="chooseSize"/>
Hope this helps,
Regards,
Cedric Durmont
2010/6/28 Martin Monshausen <Ma...@prodyna.de>:
> Hi community,
> would you mind taking a short look to the following problem, please?
>
> Depending on the value of a checkbox I want to show either an inputText-element or an inputTextarea-element - as shown below. The default is, that the checkbox is disabled and therefore the inputText will be shown. If the user enters some text to the textbox, I want to transfer it to the inputTextArea.
> If I trigger some actions located on the page after text was entered and before checkbox is clicked (communication with server took place) everything is working fine.
> If I click the checkbox right after entering the text only the changed value of the checkbox is considered as changed (setter-method for DebitNote will not be called) and nothing is transferred (assuming nothing was enter to the inputText before).
> What's wrong? Did I missed something? Is there any other solution you would suggest?
>
> //checkbox clicking on button in order to transfer state to server
> <h:selectBooleanCheckbox value="#{ra.kmt}" onclick="document.getElementById('updateButton').click();" />
>
> //shown on startup; value should be transferred
> <h:inputText value="#{ra.debitnote}" rendered="#{!ra.kmt}" size="53" maxlength="50" tabindex="1" />
>
> //shown if checkbox is checked; value of inputText should be displayed
> <h:inputTextarea value="#{ra.debitnote}" rendered="#{ra.kmt}" rows="4" cols="42" tabindex="1" />
>
> //just repaint site (only transfer state to server)
> <t:commandButton action="repaint" style="visibility:hidden;" forceId="true" id="updateButton" />
>
> Thanks alot,
>
> Martin
>
Re: update values on checkbox click
Posted by Cédric Durmont <cd...@gmail.com>.
Hi Martin,
This seems to be the normal JSF behavior. Let me explain :
- first, your boolean ra.kmt is false, inputText is present and
inputTextArea is not.
- after a click on your checkbox, ra.kmt is changed and becomes true.
So in the component tree, the inputText component is NOT present
(rendered=false). That's why it doesn't get the new value. I think it
might work if the checkbox was after the inputText, but I wouldn't
recommend you to expect this to always work in all cases.
However, the inputText should get a ValueChangeEvent, so if you add a
valueChangeListener, you should get the new value. You may want to
copy it yourself in ra.debitnote.
If it's possible for your project, another solution would be to work
with a jsf library such as Apache Trinidad. In Trinidad you have a
tr:inputText component that does inputText AND inputTextarea,
all-in-one, depending on the number of rows you set. Thus it would be
the very same component whether the checkbox is checked or not.
Your code with Trinidad would look like :
<tr:selectBooleanCheckBox value="#{ra.kmt}" autoSubmit="true" id="chooseSize"/>
<tr:inputText value="#{ra.debitnote}" rows="#{ra.kmt ? 4 : 1}"
partialTriggers="chooseSize"/>
Hope this helps,
Regards,
Cedric Durmont
2010/6/28 Martin Monshausen <Ma...@prodyna.de>:
> Hi community,
> would you mind taking a short look to the following problem, please?
>
> Depending on the value of a checkbox I want to show either an inputText-element or an inputTextarea-element - as shown below. The default is, that the checkbox is disabled and therefore the inputText will be shown. If the user enters some text to the textbox, I want to transfer it to the inputTextArea.
> If I trigger some actions located on the page after text was entered and before checkbox is clicked (communication with server took place) everything is working fine.
> If I click the checkbox right after entering the text only the changed value of the checkbox is considered as changed (setter-method for DebitNote will not be called) and nothing is transferred (assuming nothing was enter to the inputText before).
> What's wrong? Did I missed something? Is there any other solution you would suggest?
>
> //checkbox clicking on button in order to transfer state to server
> <h:selectBooleanCheckbox value="#{ra.kmt}" onclick="document.getElementById('updateButton').click();" />
>
> //shown on startup; value should be transferred
> <h:inputText value="#{ra.debitnote}" rendered="#{!ra.kmt}" size="53" maxlength="50" tabindex="1" />
>
> //shown if checkbox is checked; value of inputText should be displayed
> <h:inputTextarea value="#{ra.debitnote}" rendered="#{ra.kmt}" rows="4" cols="42" tabindex="1" />
>
> //just repaint site (only transfer state to server)
> <t:commandButton action="repaint" style="visibility:hidden;" forceId="true" id="updateButton" />
>
> Thanks alot,
>
> Martin
>
update values on checkbox click
Posted by Martin Monshausen <Ma...@prodyna.de>.
Hi community,
would you mind taking a short look to the following problem, please?
Depending on the value of a checkbox I want to show either an inputText-element or an inputTextarea-element - as shown below. The default is, that the checkbox is disabled and therefore the inputText will be shown. If the user enters some text to the textbox, I want to transfer it to the inputTextArea.
If I trigger some actions located on the page after text was entered and before checkbox is clicked (communication with server took place) everything is working fine.
If I click the checkbox right after entering the text only the changed value of the checkbox is considered as changed (setter-method for DebitNote will not be called) and nothing is transferred (assuming nothing was enter to the inputText before).
What's wrong? Did I missed something? Is there any other solution you would suggest?
//checkbox clicking on button in order to transfer state to server
<h:selectBooleanCheckbox value="#{ra.kmt}" onclick="document.getElementById('updateButton').click();" />
//shown on startup; value should be transferred
<h:inputText value="#{ra.debitnote}" rendered="#{!ra.kmt}" size="53" maxlength="50" tabindex="1" />
//shown if checkbox is checked; value of inputText should be displayed
<h:inputTextarea value="#{ra.debitnote}" rendered="#{ra.kmt}" rows="4" cols="42" tabindex="1" />
//just repaint site (only transfer state to server)
<t:commandButton action="repaint" style="visibility:hidden;" forceId="true" id="updateButton" />
Thanks alot,
Martin
Re: Updating a component outside the context of the f:ajax element
Posted by Mike Kienenberger <mk...@gmail.com>.
Yes, I was just going to suggest this...
At least in RichFaces a4j (which seems to be the baseline for JSF
2.0), prefixing your identifier with ":" makes it an absolute path to
the component rather than a relative path.
On Mon, Jun 28, 2010 at 11:57 AM, Bytecode <by...@me.com> wrote:
> Werner,
>
> Thanks for the reply. I was able to solve the problem by replacing
>
> <f:ajax execute="user-name password" render="out" />
>
> with
>
> <f:ajax execute="user-name password" render=":out" />
>
> In other words, I changed "out" with ":out" and JSF was able to render the out component
> that was placed outside the h:form.
>
> Regards
>
> On 27/06/2010, at 8:08 AM, Werner Punz wrote:
>
>> You need to write following code:
>>
>> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>> <h:form id="form1">
>> <h:inputText value="#{user.name}" id="user-name" />
>> <p><h:inputSecret value="#{user.password}" id="password" /></p>
>> <p>
>> <h:commandButton value="Login" id="login-button"
>> onclick="jsf.ajax.request(this,event,{execute:'form1', render:'out'}); return false;"">
>>
>> </h:commandButton>
>> </p>
>> </h:form>
>> Thats it, but as I said this definitely works for the latest trunk,
>> I cannot gurantee that it works on the 2.0.0 code.
>>
>> Btw. there is theoretically another way you could use render @all in f:ajax that would replace the entire body, not really very ajaxy.
>>
>> Werner
>>
>>
>> Am 26.06.10 03:27, schrieb Bytecode:
>>> In other words, I want to make the following code work:
>>>
>>> |<?xml version="1.0" encoding="ISO-8859-1" ?>
>>> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
>>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>> <html xmlns="http://www.w3.org/1999/xhtml"
>>> xmlns:h="http://java.sun.com/jsf/html"
>>> xmlns:f="http://java.sun.com/jsf/core">
>>> <h:head>
>>> <title>Welcome</title>
>>> </h:head>
>>>
>>> <h:body>
>>> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>>> <h:form id="form1">
>>> <h:inputText value="#{user.name}" id="user-name" />
>>> <p><h:inputSecret value="#{user.password}" id="password" /></p>
>>> <p>
>>> <h:commandButton value="Login" id="login-button">
>>> <f:ajax execute="user-name password" render="out" />
>>> </h:commandButton>
>>> </p>
>>> </h:form>
>>> </h:body>
>>>
>>> </html>|
>>>
>>>
>>> On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
>>>
>>>> Yes you can use the direct javascript api jsf.ajax.request instead of
>>>> ajax then you can use full identifiers.
>>>>
>>>> <h:commandButton value="Login" id="login-button">
>>>> > <f:ajax execute="user-name password" render="out" />
>>>> > </h:commandButton>
>>>> would become
>>>>
>>>> <h:commandButton value="Login" id="login-button"
>>>> onclick="jsf.ajax.request(this,event,{execute:'@this',
>>>> render:'form1:out'});return false;">
>>>> </h:commandButton>
>>>>
>>>> As you can see the render now is mapped to the full client identifier
>>>> form1:out
>>>>
>>>> That way you can make render submits outside of your form.
>>>>
>>>> However, I have to recommend to update to the latest trunk or the soon
>>>> hopefully to be released myfaces 2.0.1 if you want to do cross form
>>>> submits or submits with renders outside of your current form.
>>>>
>>>> I did a load of improvement especially in this area for the scripts so
>>>> that cases like updating a cross form element does not cause problems
>>>> anymore with other forms where the element might be embedded or which
>>>> has another form embedded :-)
>>>>
>>>> Here is a code snippet from one of my testing cases dealing exactly with
>>>> what you want to achieve:
>>>>
>>>> http://www.pastebin.org/358867
>>>>
>>>> Have in mind that all this works in the current trunk (and soon in
>>>> 2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
>>>> (mostly if you update elements which embed forms, or in case of MyFaces
>>>> 2.0.0 also if you update elements within another form than the issuing
>>>> one)
>>>>
>>>>
>>>>
>>>> Werner
>>>>
>>>>
>>>> Am 25.06.10 18:06, schrieb Bytecode:
>>>> > Is there a way to make the following code work, apart from placing the
>>>> > "#out" component inside the h:form element?
>>>> >
>>>> > |<?xml version="1.0" encoding="ISO-8859-1" ?>
>>>> > <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 10 Transitional//EN"
>>>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>>> <http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>;
>>>> > <html xmlns="http://www.w3.org/1999/xhtml"
>>>> > xmlns:h="http://java.sun.com/jsf/html"
>>>> > xmlns:f="http://java.sun.com/jsf/core">
>>>> <http://java.sun.com/jsf/core">>;
>>>> > <h:head>
>>>> > <title>Welcome</title>
>>>> > </h:head>
>>>> >
>>>> > <h:body>
>>>> >
>>>> > <h:form id="form1">
>>>> >
>>>> > <p><h:outputText id="out" value="#{user.greeting}" /></p>
>>>> >
>>>> > <h:inputText value="#{user.name}" id="user-name" />
>>>> > <p><h:inputSecret value="#{user.password}" id="password" /></p>
>>>> > <p>
>>>> > <h:commandButton value="Login" id="login-button">
>>>> > <f:ajax execute="user-name password" render="out" />
>>>> > </h:commandButton>
>>>> > </p>
>>>> > </h:form>
>>>> > </h:body>
>>>> >
>>>> > </html>
>>>> > |
>>>> >
>>>> >
>>>> >
>>>> > At the moment the following exception is thrown by JSF when rendering
>>>> > the page:
>>>> >
>>>> > |<f:ajax> contains an unknown id'out' - cannot locate it in the
>>>> context of the component login-button|
>>>>
>>>>
>>
>>
>
>
Re: Updating a component outside the context of the f:ajax element
Posted by Bytecode <by...@me.com>.
Werner,
Thanks for the reply. I was able to solve the problem by replacing
<f:ajax execute="user-name password" render="out" />
with
<f:ajax execute="user-name password" render=":out" />
In other words, I changed "out" with ":out" and JSF was able to render the out component
that was placed outside the h:form.
Regards
On 27/06/2010, at 8:08 AM, Werner Punz wrote:
> You need to write following code:
>
> <p><h:outputText id="out" value="#{user.greeting}" /></p>
> <h:form id="form1">
> <h:inputText value="#{user.name}" id="user-name" />
> <p><h:inputSecret value="#{user.password}" id="password" /></p>
> <p>
> <h:commandButton value="Login" id="login-button"
> onclick="jsf.ajax.request(this,event,{execute:'form1', render:'out'}); return false;"">
>
> </h:commandButton>
> </p>
> </h:form>
> Thats it, but as I said this definitely works for the latest trunk,
> I cannot gurantee that it works on the 2.0.0 code.
>
> Btw. there is theoretically another way you could use render @all in f:ajax that would replace the entire body, not really very ajaxy.
>
> Werner
>
>
> Am 26.06.10 03:27, schrieb Bytecode:
>> In other words, I want to make the following code work:
>>
>> |<?xml version="1.0" encoding="ISO-8859-1" ?>
>> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>> <html xmlns="http://www.w3.org/1999/xhtml"
>> xmlns:h="http://java.sun.com/jsf/html"
>> xmlns:f="http://java.sun.com/jsf/core">
>> <h:head>
>> <title>Welcome</title>
>> </h:head>
>>
>> <h:body>
>> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>> <h:form id="form1">
>> <h:inputText value="#{user.name}" id="user-name" />
>> <p><h:inputSecret value="#{user.password}" id="password" /></p>
>> <p>
>> <h:commandButton value="Login" id="login-button">
>> <f:ajax execute="user-name password" render="out" />
>> </h:commandButton>
>> </p>
>> </h:form>
>> </h:body>
>>
>> </html>|
>>
>>
>> On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
>>
>>> Yes you can use the direct javascript api jsf.ajax.request instead of
>>> ajax then you can use full identifiers.
>>>
>>> <h:commandButton value="Login" id="login-button">
>>> > <f:ajax execute="user-name password" render="out" />
>>> > </h:commandButton>
>>> would become
>>>
>>> <h:commandButton value="Login" id="login-button"
>>> onclick="jsf.ajax.request(this,event,{execute:'@this',
>>> render:'form1:out'});return false;">
>>> </h:commandButton>
>>>
>>> As you can see the render now is mapped to the full client identifier
>>> form1:out
>>>
>>> That way you can make render submits outside of your form.
>>>
>>> However, I have to recommend to update to the latest trunk or the soon
>>> hopefully to be released myfaces 2.0.1 if you want to do cross form
>>> submits or submits with renders outside of your current form.
>>>
>>> I did a load of improvement especially in this area for the scripts so
>>> that cases like updating a cross form element does not cause problems
>>> anymore with other forms where the element might be embedded or which
>>> has another form embedded :-)
>>>
>>> Here is a code snippet from one of my testing cases dealing exactly with
>>> what you want to achieve:
>>>
>>> http://www.pastebin.org/358867
>>>
>>> Have in mind that all this works in the current trunk (and soon in
>>> 2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
>>> (mostly if you update elements which embed forms, or in case of MyFaces
>>> 2.0.0 also if you update elements within another form than the issuing
>>> one)
>>>
>>>
>>>
>>> Werner
>>>
>>>
>>> Am 25.06.10 18:06, schrieb Bytecode:
>>> > Is there a way to make the following code work, apart from placing the
>>> > "#out" component inside the h:form element?
>>> >
>>> > |<?xml version="1.0" encoding="ISO-8859-1" ?>
>>> > <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 10 Transitional//EN"
>>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>> <http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>;
>>> > <html xmlns="http://www.w3.org/1999/xhtml"
>>> > xmlns:h="http://java.sun.com/jsf/html"
>>> > xmlns:f="http://java.sun.com/jsf/core">
>>> <http://java.sun.com/jsf/core">>;
>>> > <h:head>
>>> > <title>Welcome</title>
>>> > </h:head>
>>> >
>>> > <h:body>
>>> >
>>> > <h:form id="form1">
>>> >
>>> > <p><h:outputText id="out" value="#{user.greeting}" /></p>
>>> >
>>> > <h:inputText value="#{user.name}" id="user-name" />
>>> > <p><h:inputSecret value="#{user.password}" id="password" /></p>
>>> > <p>
>>> > <h:commandButton value="Login" id="login-button">
>>> > <f:ajax execute="user-name password" render="out" />
>>> > </h:commandButton>
>>> > </p>
>>> > </h:form>
>>> > </h:body>
>>> >
>>> > </html>
>>> > |
>>> >
>>> >
>>> >
>>> > At the moment the following exception is thrown by JSF when rendering
>>> > the page:
>>> >
>>> > |<f:ajax> contains an unknown id'out' - cannot locate it in the
>>> context of the component login-button|
>>>
>>>
>
>
Re: Updating a component outside the context of the f:ajax element
Posted by Werner Punz <we...@gmail.com>.
You need to write following code:
<p><h:outputText id="out" value="#{user.greeting}" /></p>
<h:form id="form1">
<h:inputText value="#{user.name}" id="user-name" />
<p><h:inputSecret value="#{user.password}" id="password" /></p>
<p>
<h:commandButton value="Login" id="login-button"
onclick="jsf.ajax.request(this,event,{execute:'form1',
render:'out'}); return false;"">
</h:commandButton>
</p>
</h:form>
Thats it, but as I said this definitely works for the latest trunk,
I cannot gurantee that it works on the 2.0.0 code.
Btw. there is theoretically another way you could use render @all in
f:ajax that would replace the entire body, not really very ajaxy.
Werner
Am 26.06.10 03:27, schrieb Bytecode:
> In other words, I want to make the following code work:
>
> |<?xml version="1.0" encoding="ISO-8859-1" ?>
> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:f="http://java.sun.com/jsf/core">
> <h:head>
> <title>Welcome</title>
> </h:head>
>
> <h:body>
> <p><h:outputText id="out" value="#{user.greeting}" /></p>
> <h:form id="form1">
> <h:inputText value="#{user.name}" id="user-name" />
> <p><h:inputSecret value="#{user.password}" id="password" /></p>
> <p>
> <h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
> </p>
> </h:form>
> </h:body>
>
> </html>|
>
>
> On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
>
>> Yes you can use the direct javascript api jsf.ajax.request instead of
>> ajax then you can use full identifiers.
>>
>> <h:commandButton value="Login" id="login-button">
>> > <f:ajax execute="user-name password" render="out" />
>> > </h:commandButton>
>> would become
>>
>> <h:commandButton value="Login" id="login-button"
>> onclick="jsf.ajax.request(this,event,{execute:'@this',
>> render:'form1:out'});return false;">
>> </h:commandButton>
>>
>> As you can see the render now is mapped to the full client identifier
>> form1:out
>>
>> That way you can make render submits outside of your form.
>>
>> However, I have to recommend to update to the latest trunk or the soon
>> hopefully to be released myfaces 2.0.1 if you want to do cross form
>> submits or submits with renders outside of your current form.
>>
>> I did a load of improvement especially in this area for the scripts so
>> that cases like updating a cross form element does not cause problems
>> anymore with other forms where the element might be embedded or which
>> has another form embedded :-)
>>
>> Here is a code snippet from one of my testing cases dealing exactly with
>> what you want to achieve:
>>
>> http://www.pastebin.org/358867
>>
>> Have in mind that all this works in the current trunk (and soon in
>> 2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
>> (mostly if you update elements which embed forms, or in case of MyFaces
>> 2.0.0 also if you update elements within another form than the issuing
>> one)
>>
>>
>>
>> Werner
>>
>>
>> Am 25.06.10 18:06, schrieb Bytecode:
>> > Is there a way to make the following code work, apart from placing the
>> > "#out" component inside the h:form element?
>> >
>> > |<?xml version="1.0" encoding="ISO-8859-1" ?>
>> > <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 10 Transitional//EN"
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>> <http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>;
>> > <html xmlns="http://www.w3.org/1999/xhtml"
>> > xmlns:h="http://java.sun.com/jsf/html"
>> > xmlns:f="http://java.sun.com/jsf/core">
>> <http://java.sun.com/jsf/core">>;
>> > <h:head>
>> > <title>Welcome</title>
>> > </h:head>
>> >
>> > <h:body>
>> >
>> > <h:form id="form1">
>> >
>> > <p><h:outputText id="out" value="#{user.greeting}" /></p>
>> >
>> > <h:inputText value="#{user.name}" id="user-name" />
>> > <p><h:inputSecret value="#{user.password}" id="password" /></p>
>> > <p>
>> > <h:commandButton value="Login" id="login-button">
>> > <f:ajax execute="user-name password" render="out" />
>> > </h:commandButton>
>> > </p>
>> > </h:form>
>> > </h:body>
>> >
>> > </html>
>> > |
>> >
>> >
>> >
>> > At the moment the following exception is thrown by JSF when rendering
>> > the page:
>> >
>> > |<f:ajax> contains an unknown id'out' - cannot locate it in the
>> context of the component login-button|
>>
>>
Re: Updating a component outside the context of the f:ajax element
Posted by Werner Punz <we...@gmail.com>.
Hi,
as I said things should start to work if you
use the javascripts, the javascripts rely on full identifiers.
If not with the latest code then please file a bugreport
I have to fix it then :-)
Werner
Am 26.06.10 03:21, schrieb Bytecode:
> Werner,
>
> Thanks for the reply.
>
>> <h:commandButton value="Login" id="login-button"
>> onclick="jsf.ajax.request(this,event,{execute:'@this',
>> render:'form1:out'});return false;">
>> </h:commandButton>
>>
>> As you can see the render now is mapped to the full client identifier
>> form1:out
>
> But the out component is outside form1. So its full identifier is out.
> But right now using render="out"
> makes JSF search for a component with the "out" component inside form1.
> I've yet to try the direct
> JavaScript though.
>
> I guess if the JSF team had added another annotation (are they called
> annotations in JSF?)
> named @root:bar that forced the JSF engine to search for the bar
> component from the UIViewRoot
> this could have been solved very easily. :-)
>
> Cheers,
> Bytecode
>
> On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
>
>> Yes you can use the direct javascript api jsf.ajax.request instead of
>> ajax then you can use full identifiers.
>>
>> <h:commandButton value="Login" id="login-button">
>> > <f:ajax execute="user-name password" render="out" />
>> > </h:commandButton>
>> would become
>>
>> <h:commandButton value="Login" id="login-button"
>> onclick="jsf.ajax.request(this,event,{execute:'@this',
>> render:'form1:out'});return false;">
>> </h:commandButton>
>>
>> As you can see the render now is mapped to the full client identifier
>> form1:out
>>
>> That way you can make render submits outside of your form.
>>
>> However, I have to recommend to update to the latest trunk or the soon
>> hopefully to be released myfaces 2.0.1 if you want to do cross form
>> submits or submits with renders outside of your current form.
>>
>> I did a load of improvement especially in this area for the scripts so
>> that cases like updating a cross form element does not cause problems
>> anymore with other forms where the element might be embedded or which
>> has another form embedded :-)
>>
>> Here is a code snippet from one of my testing cases dealing exactly with
>> what you want to achieve:
>>
>> http://www.pastebin.org/358867
>>
>> Have in mind that all this works in the current trunk (and soon in
>> 2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
>> (mostly if you update elements which embed forms, or in case of MyFaces
>> 2.0.0 also if you update elements within another form than the issuing
>> one)
>>
>>
>>
>> Werner
>>
>>
>> Am 25.06.10 18:06, schrieb Bytecode:
>> > Is there a way to make the following code work, apart from placing the
>> > "#out" component inside the h:form element?
>> >
>> > |<?xml version="1.0" encoding="ISO-8859-1" ?>
>> > <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>> <http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>;
>> > <html xmlns="http://www.w3.org/1999/xhtml"
>> > xmlns:h="http://java.sun.com/jsf/html"
>> > xmlns:f="http://java.sun.com/jsf/core">
>> <http://java.sun.com/jsf/core">>;
>> > <h:head>
>> > <title>Welcome</title>
>> > </h:head>
>> >
>> > <h:body>
>> >
>> > <h:form id="form1">
>> >
>> > <p><h:outputText id="out" value="#{user.greeting}" /></p>
>> >
>> > <h:inputText value="#{user.name}" id="user-name" />
>> > <p><h:inputSecret value="#{user.password}" id="password" /></p>
>> > <p>
>> > <h:commandButton value="Login" id="login-button">
>> > <f:ajax execute="user-name password" render="out" />
>> > </h:commandButton>
>> > </p>
>> > </h:form>
>> > </h:body>
>> >
>> > </html>
>> > |
>> >
>> >
>> >
>> > At the moment the following exception is thrown by JSF when rendering
>> > the page:
>> >
>> > |<f:ajax> contains an unknown id'out' - cannot locate it in the
>> context of the component login-button|
>>
>>
Re: Updating a component outside the context of the f:ajax element
Posted by Bytecode <by...@me.com>.
In other words, I want to make the following code work:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<p><h:outputText id="out" value="#{user.greeting}" /></p>
<h:form id="form1">
<h:inputText value="#{username}" id="user-name" />
<p><h:inputSecret value="#{user.password}" id="password" /></p>
<p>
<h:commandButton value="Login" id="login-button">
<f:ajax execute="user-name password" render="out" />
</h:commandButton>
</p>
</h:form>
</h:body>
</html>
On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
Yes you can use the direct javascript api jsf.ajax.request instead of
ajax then you can use full identifiers.
<h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
would become
<h:commandButton value="Login" id="login-button"
onclick="jsf.ajax.request(this,event,{execute:'@this',
render:'form1:out'});return false;">
</h:commandButton>
As you can see the render now is mapped to the full client identifier
form1:out
That way you can make render submits outside of your form.
However, I have to recommend to update to the latest trunk or the soon
hopefully to be released myfaces 2.0.1 if you want to do cross form
submits or submits with renders outside of your current form.
I did a load of improvement especially in this area for the scripts so
that cases like updating a cross form element does not cause problems
anymore with other forms where the element might be embedded or which
has another form embedded :-)
Here is a code snippet from one of my testing cases dealing exactly with
what you want to achieve:
http://www.pastebin.org/358867
Have in mind that all this works in the current trunk (and soon in
2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
(mostly if you update elements which embed forms, or in case of MyFaces
2.0.0 also if you update elements within another form than the issuing one)
Werner
Am 2506.10 18:06, schrieb Bytecode:
> Is there a way to make the following code work, apart from placing the
> "#out" component inside the h:form element?
>
> |<?xml version="1.0" encoding="ISO-8859-1" ?>
> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:f="http://java.sun.com/jsf/core">
> <h:head>
> <title>Welcome</title>
> </h:head>
>
> <h:body>
>
> <h:form id="form1">
>
> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>
> <h:inputText value="#{user.name}" id="user-name" />
> <p><h:inputSecret value="#{user.password}" id="password" /></p>
> <p>
> <h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
> </p>
> </h:form>
> </h:body>
>
> </html>
> |
>
>
>
> At the moment the following exception is thrown by JSF when rendering
> the page:
>
> |<f:ajax> contains an unknown id'out' - cannot locate it in the context of the component login-button|
Re: Updating a component outside the context of the f:ajax element
Posted by Bytecode <by...@me.com>.
Werner,
Thanks for the reply.
<h:commandButton value="Login" id="login-button"
onclick="jsf.ajax.request(this,event,{execute:'@this',
render:'form1:out'});return false;">
</h:commandButton>
As you can see the render now is mapped to the full client identifier
form1:out
But the out component is outside form1. So its full identifier is out. But right now using render="out"
makes JSF search for a component with the "out" component inside form1. I've yet to try the direct
JavaScript though.
I guess if the JSF team had added another annotation (are they called annotations in JSF?)
named @root:bar that forced the JSF engine to search for the bar component from the UIViewRoot
this could have been solved very easily. :-)
Cheers,
Bytecode
On 26 Jun, 2010,at 05:13 AM, Werner Punz <we...@gmail.com> wrote:
Yes you can use the direct javascript api jsf.ajax.request instead of
ajax then you can use full identifiers.
<h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
would become
<h:commandButton value="Login" id="login-button"
onclick="jsf.ajax.request(this,event,{execute:'@this',
render:'form1:out'});return false;">
</h:commandButton>
As you can see the render now is mapped to the full client identifier
form1:out
That way you can make render submits outside of your form.
However, I have to recommend to update to the latest trunk or the soon
hopefully to be released myfaces 2.0.1 if you want to do cross form
submits or submits with renders outside of your current form.
I did a load of improvement especially in this area for the scripts so
that cases like updating a cross form element does not cause problems
anymore with other forms where the element might be embedded or which
has another form embedded :-)
Here is a code snippet from one of my testing cases dealing exactly with
what you want to achieve:
http://www.pastebin.org/358867
Have in mind that all this works in the current trunk (and soon in
2.0.1), but the 20.0 codebase and also Mojarra has some limitations.
(mostly if you update elements which embed forms, or in case of MyFaces
2.0.0 also if you update elements within another form than the issuing one)
Werner
Am 25.06.10 18:06, schrieb Bytecode:
> Is there a way to make the following code work, apart from placing the
> "#out" component inside the h:form element?
>
> |<?xml version="1.0" encoding="ISO-8859-1" ?>
> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:f="http://java.sun.com/jsf/core">
> <h:head>
> <title>Welcome</title>
> </h:head>
>
> <h:body>
>
> <h:form id="form1">
>
> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>
> <h:inputText value="#{user.name}" id="user-name" />
> <p><h:inputSecret value="#{user.password}" id="password" /></p>
> <p>
> <h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
> </p>
> </h:form>
> </h:body>
>
> </html>
> |
>
>
>
> At the moment the following exception is thrown by JSF when rendering
> the page:
>
> |<f:ajax> contains an unknown id'out' - cannot locate it in the context of the component login-button|
Re: Updating a component outside the context of the f:ajax element
Posted by Werner Punz <we...@gmail.com>.
Yes you can use the direct javascript api jsf.ajax.request instead of
ajax then you can use full identifiers.
<h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
would become
<h:commandButton value="Login" id="login-button"
onclick="jsf.ajax.request(this,event,{execute:'@this',
render:'form1:out'});return false;">
</h:commandButton>
As you can see the render now is mapped to the full client identifier
form1:out
That way you can make render submits outside of your form.
However, I have to recommend to update to the latest trunk or the soon
hopefully to be released myfaces 2.0.1 if you want to do cross form
submits or submits with renders outside of your current form.
I did a load of improvement especially in this area for the scripts so
that cases like updating a cross form element does not cause problems
anymore with other forms where the element might be embedded or which
has another form embedded :-)
Here is a code snippet from one of my testing cases dealing exactly with
what you want to achieve:
http://www.pastebin.org/358867
Have in mind that all this works in the current trunk (and soon in
2.0.1), but the 2.0.0 codebase and also Mojarra has some limitations.
(mostly if you update elements which embed forms, or in case of MyFaces
2.0.0 also if you update elements within another form than the issuing one)
Werner
Am 25.06.10 18:06, schrieb Bytecode:
> Is there a way to make the following code work, apart from placing the
> "#out" component inside the h:form element?
>
> |<?xml version="1.0" encoding="ISO-8859-1" ?>
> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:f="http://java.sun.com/jsf/core">
> <h:head>
> <title>Welcome</title>
> </h:head>
>
> <h:body>
>
> <h:form id="form1">
>
> <p><h:outputText id="out" value="#{user.greeting}" /></p>
>
> <h:inputText value="#{user.name}" id="user-name" />
> <p><h:inputSecret value="#{user.password}" id="password" /></p>
> <p>
> <h:commandButton value="Login" id="login-button">
> <f:ajax execute="user-name password" render="out" />
> </h:commandButton>
> </p>
> </h:form>
> </h:body>
>
> </html>
> |
>
>
>
> At the moment the following exception is thrown by JSF when rendering
> the page:
>
> |<f:ajax> contains an unknown id'out' - cannot locate it in the context of the component login-button|