You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Balaji Saranathan <ba...@wipro.com> on 2007/05/25 17:50:31 UTC
Javascript and JSF
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
I forgot one more point, make sure you store the area in a input hidden
element so you know which one was clicked on the server.
<h:form id="myForm">
<a4j:jsFunction name="onImageAreaClicked" ... />
<h:inputHidden id="x" value="#{myBean.myArea}" />
...
<area ... onclick="document.getElementById("myForm:x").value='area1';onImageAreaClicked();"
/>
</h:form>
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm going to try these ideas this weekend. Hope to get it done by the end
> of this week.
>
>
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 12:21 PM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Oops forgot the "()" in the onclick, hopefully you picked that up.
>
> On 5/25/07, *Andrew Robinson* < andrew.rw.robinson@gmail.com> wrote:
>
> Okay, your best bet is a custom component for the "area" tag.
>
> In the renderer for this new component, use the AjaxRendererUtils:
>
> public class HtmlArea
> extends UIComponentBase
> {
> // all the standard component stuff ...
> }
>
> public class HtmlAreaRenderer
> extends RendererBase
> {
> protected Class getComponentClass()
> {
> return HtmlArea.class;
> }
>
> protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
> UIComponent component) throws IOException
> {
> writer.startElement("area", component);
> // write your non-onclick attributes here ...
> writer.writeAttribute("onclick",
> AjaxRendererUtils.buildOnClick(component, context), null);
> writer.endElement("area");
> }
> }
>
>
> Then just put an a4j:region around the area if you only want a subset of
> values to be submitted & updated.
>
> The other alternative is to not use the buildOnClick, but instead just put
> an a4j:support under your custom component:
>
> <my:area ...>
> <a4j:support event="onclick" ... />
> </my:area>
>
> Or if you don't want to create a custom component:
>
> <a4j:jsFunction name="onImageAreaClicked" ... />
>
> <area ... onclick="onImageAreaClicked" />
>
> This last one is the least effort obviously
>
> -Andrew
>
>
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application
> to enable Ajax capabilities.
>
> I'm trying to prototype a device UI where the "Onclick" JS events of a
> image Map opens up a different set of configuration parameters for the
> device. This keeps changing as per the Map Area clicked. I'm not sure how to
> achieve this.
>
>
>
> My code is something like this.
>
>
>
> <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> usemap="#2004"/>
>
> <map name='Device1'>
>
> <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> nohref='True' onClick="alert('test');" />
>
> <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> nohref='True' onClick="alert('test');" />
>
>
>
> This onclick should be mapped to updating a couple of JSF components on
> the page.
>
>
>
> Regards
>
> Balaji
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 11:54 AM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Yes
>
> There is a submit on event control in the sandbox that will submit the
> form.
>
> If you want to submit one control, I would suggest the a4j:support from
> JBoss Ajax4Jsf that allows you to submit only one control and update the
> page using AJAX.
>
> There are many more answers to your question, so the question really is
> what is you specific use case?
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
RE: Javascript and JSF
Posted by Balaji Saranathan <ba...@wipro.com>.
Thanks Andrew.
I'm going to try these ideas this weekend. Hope to get it done by the end of
this week.
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 12:21 PM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Oops forgot the "()" in the onclick, hopefully you picked that up.
On 5/25/07, Andrew Robinson < andrew.rw.robinson@gmail.com
<ma...@gmail.com> > wrote:
Okay, your best bet is a custom component for the "area" tag.
In the renderer for this new component, use the AjaxRendererUtils:
public class HtmlArea
extends UIComponentBase
{
// all the standard component stuff ...
}
public class HtmlAreaRenderer
extends RendererBase
{
protected Class getComponentClass()
{
return HtmlArea.class;
}
protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
UIComponent component) throws IOException
{
writer.startElement("area", component);
// write your non-onclick attributes here ...
writer.writeAttribute("onclick",
AjaxRendererUtils.buildOnClick(component, context), null);
writer.endElement("area");
}
}
Then just put an a4j:region around the area if you only want a subset of
values to be submitted & updated.
The other alternative is to not use the buildOnClick, but instead just put
an a4j:support under your custom component:
<my:area ...>
<a4j:support event="onclick" ... />
</my:area>
Or if you don't want to create a custom component:
<a4j:jsFunction name="onImageAreaClicked" ... />
<area ... onclick="onImageAreaClicked" />
This last one is the least effort obviously
-Andrew
On 5/25/07, Balaji Saranathan < <ma...@wipro.com>
balaji.saranathan@wipro.com> wrote:
Thanks Andrew.
I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application to
enable Ajax capabilities.
I'm trying to prototype a device UI where the "Onclick" JS events of a image
Map opens up a different set of configuration parameters for the device.
This keeps changing as per the Map Area clicked. I'm not sure how to achieve
this.
My code is something like this.
<h:graphicImage id="mapImage" url="/images/ device_big.gif" usemap="#2004"/>
<map name='Device1'>
<area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
nohref='True' onClick="alert('test');" />
<area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
nohref='True' onClick="alert('test');" />
This onclick should be mapped to updating a couple of JSF components on the
page.
Regards
Balaji
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 11:54 AM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan < <ma...@wipro.com>
balaji.saranathan@wipro.com> wrote:
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
Oops forgot the "()" in the onclick, hopefully you picked that up.
On 5/25/07, Andrew Robinson <an...@gmail.com> wrote:
>
> Okay, your best bet is a custom component for the "area" tag.
>
> In the renderer for this new component, use the AjaxRendererUtils:
>
> public class HtmlArea
> extends UIComponentBase
> {
> // all the standard component stuff ...
> }
>
> public class HtmlAreaRenderer
> extends RendererBase
> {
> protected Class getComponentClass()
> {
> return HtmlArea.class;
> }
>
> protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
> UIComponent component) throws IOException
> {
> writer.startElement("area", component);
> // write your non-onclick attributes here ...
> writer.writeAttribute("onclick",
> AjaxRendererUtils.buildOnClick(component, context), null);
> writer.endElement("area");
> }
> }
>
>
> Then just put an a4j:region around the area if you only want a subset of
> values to be submitted & updated.
>
> The other alternative is to not use the buildOnClick, but instead just put
> an a4j:support under your custom component:
>
> <my:area ...>
> <a4j:support event="onclick" ... />
> </my:area>
>
> Or if you don't want to create a custom component:
>
> <a4j:jsFunction name="onImageAreaClicked" ... />
>
> <area ... onclick="onImageAreaClicked" />
>
> This last one is the least effort obviously
>
> -Andrew
>
>
> On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
> >
> > Thanks Andrew.
> >
> > I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF
> > application to enable Ajax capabilities.
> >
> > I'm trying to prototype a device UI where the "Onclick" JS events of a
> > image Map opens up a different set of configuration parameters for the
> > device. This keeps changing as per the Map Area clicked. I'm not sure how to
> > achieve this.
> >
> >
> >
> > My code is something like this.
> >
> >
> >
> > <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> > usemap="#2004"/>
> >
> > <map name='Device1'>
> >
> > <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> > nohref='True' onClick="alert('test');" />
> >
> > <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> > nohref='True' onClick="alert('test');" />
> >
> >
> >
> > This onclick should be mapped to updating a couple of JSF components on
> > the page.
> >
> >
> >
> > Regards
> >
> > Balaji
> >
> > -----Original Message-----
> > *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> > *Sent:* Friday, May 25, 2007 11:54 AM
> > *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> > *Subject:* Re: Javascript and JSF
> >
> >
> >
> > Yes
> >
> > There is a submit on event control in the sandbox that will submit the
> > form.
> >
> > If you want to submit one control, I would suggest the a4j:support from
> > JBoss Ajax4Jsf that allows you to submit only one control and update the
> > page using AJAX.
> >
> > There are many more answers to your question, so the question really is
> > what is you specific use case?
> >
> > On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
> >
> > Hi,
> >
> >
> >
> > Is it possible to capture a JavaScript event and update a selected JSF
> > component on the page?
> >
> >
> >
> > Regards
> >
> > Balaji
> >
> >
> >
> >
> >
> >
> > The information contained in this electronic message and any attachments
> > to this message are intended for the exclusive use of the addressee(s) and
> > may contain proprietary, confidential or privileged information. If you are
> > not the intended recipient, you should not disseminate, distribute or copy
> > this e-mail. Please notify the sender immediately and destroy all copies of
> > this message and any attachments.
> >
> > WARNING: Computer viruses can be transmitted via email. The recipient
> > should check this email and any attachments for the presence of viruses. The
> > company accepts no liability for any damage caused by any virus transmitted
> > by this email.
> >
> > www.wipro.com
> >
> >
> >
> > The information contained in this electronic message and any attachments
> > to this message are intended for the exclusive use of the addressee(s) and
> > may contain proprietary, confidential or privileged information. If you are
> > not the intended recipient, you should not disseminate, distribute or copy
> > this e-mail. Please notify the sender immediately and destroy all copies of
> > this message and any attachments.
> >
> > WARNING: Computer viruses can be transmitted via email. The recipient
> > should check this email and any attachments for the presence of viruses. The
> > company accepts no liability for any damage caused by any virus transmitted
> > by this email.
> >
> > www.wipro.com
> >
>
>
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
Okay, your best bet is a custom component for the "area" tag.
In the renderer for this new component, use the AjaxRendererUtils:
public class HtmlArea
extends UIComponentBase
{
// all the standard component stuff ...
}
public class HtmlAreaRenderer
extends RendererBase
{
protected Class getComponentClass()
{
return HtmlArea.class;
}
protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
UIComponent component) throws IOException
{
writer.startElement("area", component);
// write your non-onclick attributes here ...
writer.writeAttribute("onclick",
AjaxRendererUtils.buildOnClick(component, context), null);
writer.endElement("area");
}
}
Then just put an a4j:region around the area if you only want a subset of
values to be submitted & updated.
The other alternative is to not use the buildOnClick, but instead just put
an a4j:support under your custom component:
<my:area ...>
<a4j:support event="onclick" ... />
</my:area>
Or if you don't want to create a custom component:
<a4j:jsFunction name="onImageAreaClicked" ... />
<area ... onclick="onImageAreaClicked" />
This last one is the least effort obviously
-Andrew
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application
> to enable Ajax capabilities.
>
> I'm trying to prototype a device UI where the "Onclick" JS events of a
> image Map opens up a different set of configuration parameters for the
> device. This keeps changing as per the Map Area clicked. I'm not sure how to
> achieve this.
>
>
>
> My code is something like this.
>
>
>
> <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> usemap="#2004"/>
>
> <map name='Device1'>
>
> <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> nohref='True' onClick="alert('test');" />
>
> <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> nohref='True' onClick="alert('test');" />
>
>
>
> This onclick should be mapped to updating a couple of JSF components on
> the page.
>
>
>
> Regards
>
> Balaji
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 11:54 AM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Yes
>
> There is a submit on event control in the sandbox that will submit the
> form.
>
> If you want to submit one control, I would suggest the a4j:support from
> JBoss Ajax4Jsf that allows you to submit only one control and update the
> page using AJAX.
>
> There are many more answers to your question, so the question really is
> what is you specific use case?
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
RE: Javascript and JSF
Posted by Balaji Saranathan <ba...@wipro.com>.
Thanks Andrew.
I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application to
enable Ajax capabilities.
I'm trying to prototype a device UI where the "Onclick" JS events of a image
Map opens up a different set of configuration parameters for the device.
This keeps changing as per the Map Area clicked. I'm not sure how to achieve
this.
My code is something like this.
<h:graphicImage id="mapImage" url="/images/ device_big.gif" usemap="#2004"/>
<map name='Device1'>
<area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
nohref='True' onClick="alert('test');" />
<area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
nohref='True' onClick="alert('test');" />
This onclick should be mapped to updating a couple of JSF components on the
page.
Regards
Balaji
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 11:54 AM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan < balaji.saranathan@wipro.com
<ma...@wipro.com> > wrote:
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
Re: Javascript and JSF
Posted by Bryan Basham <bb...@stillsecure.com>.
Quite right. I was assuming that you needed help with the
client-side JS code. To make server calls, you should use
AJAX.
Cheers,
Bryan
Balaji Saranathan wrote:
>
> Thanks Bryan for a very detailed mail.
>
>
>
> However, in the UI I'm trying to simulate, the area of the Image
> determines what I need to load as configurational parameters. And
> these may be quite a lot . So, I would rather look upto the server to
> determine what I should load as I click on the region. Manipulating
> everything on the client side assumes I have loaded everything already
> and this can be costly in this case.
>
>
>
> Regards
>
> Balaji
>
>
>
> -----Original Message-----
> *From:* Bryan Basham [mailto:bbasham@stillsecure.com]
> *Sent:* Friday, May 25, 2007 12:33 PM
> *To:* MyFaces Discussion
> *Subject:* Re: Javascript and JSF
>
>
>
> Hello Balaji,
>
> Yes, I do this all the time. Remember in XHTML you have access to the
> complete DOM of the screen including form fields created by JSF components
> (which render as HTML form components, ultimately).
>
> Suppose that you have a form that has a drop-down list that (when
> selected)
> adds some boiler-plate text to a text field:
>
> <h:form id='x'>
> <select name='type' onselect='javascript:selectType(this);'>
> <option name='BUG'>Bug report</option>
> <option name='RFE'>Request for enhancement</option>
> </select>
> <h:inputText id='title' value='#{bean.entryTitle}' />
> </h:form>
>
> NOTE: this code I am making up on the fly and is not be completely
> accurate.
> This is just an abstraction of what could happen in "real life". Note
> also that
> in this example, I am mixing non-JSF HTML components (the <select> tag)
> with JSF components (the <h:inputText> tag). I did this on purpose to
> demonstrate
> that there is nothing magically about JSF components after they are
> rendered to
> the browser.
>
> So, the JS function 'selectType' is invoked whenever the user selects
> a new option.
> Let's see how this function can change the value of the text field:
>
> <script ...>
> function selectType(selectField)
> {
> var type = selectField.currentOption.value; // OK, this JS code is
> way off, but you get the idea
> var textField = document.getElementById('x:title');
> textField.value = type + ": Enter title here";
> }
> </script>
>
> OK, so what the hell am I talking about? Well, the critical element
> in this
> JS fuction is the use of "document.getElementById()" function which is
> built
> in to client-side JavaScript language. This function as you might
> guess finds
> the HTML component by its ID anywhere within the DOM for the screen.
> Note that the ID for the text field is 'x:title' which is the form ID
> 'x' prepended
> to the inner text field ID 'title'. So, that is how you can access
> (as an object)
> any form field (really *any* HTML element) and then manipulate that
> element
> object in real-time.
>
> Now the trick is: *What* do you want to do with the form element
> after you
> have retrieved it from the getElementById function? There are lots of
> ways
> to manipulate form elements: hide/show, disable/enable, change the value,
> change the style or class, and so on. You will need to learn
> JavaScript in
> more detail to answer these types of questions. Good luck!
>
> I see that others are focusing on AJAX. Please note that you do *not*
> have to
> use AJAX to use the technique I described above. However, AJAX
> extends these
> techniques by allowing your client-side JS code to make calls to the
> server.
>
> HTH,
> Bryan
>
> Balaji Saranathan wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
>
> The information contained in this electronic message and any
> attachments to this message are intended for the exclusive use of the
> addressee(s) and may contain proprietary, confidential or privileged
> information. If you are not the intended recipient, you should not
> disseminate, distribute or copy this e-mail. Please notify the sender
> immediately and destroy all copies of this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of
> viruses. The company accepts no liability for any damage caused by any
> virus transmitted by this email.
>
> www.wipro.com
>
RE: Javascript and JSF
Posted by Balaji Saranathan <ba...@wipro.com>.
Thanks Bryan for a very detailed mail.
However, in the UI I'm trying to simulate, the area of the Image determines
what I need to load as configurational parameters. And these may be quite a
lot . So, I would rather look upto the server to determine what I should
load as I click on the region. Manipulating everything on the client side
assumes I have loaded everything already and this can be costly in this
case.
Regards
Balaji
-----Original Message-----
From: Bryan Basham [mailto:bbasham@stillsecure.com]
Sent: Friday, May 25, 2007 12:33 PM
To: MyFaces Discussion
Subject: Re: Javascript and JSF
Hello Balaji,
Yes, I do this all the time. Remember in XHTML you have access to the
complete DOM of the screen including form fields created by JSF components
(which render as HTML form components, ultimately).
Suppose that you have a form that has a drop-down list that (when selected)
adds some boiler-plate text to a text field:
<h:form id='x'>
<select name='type' onselect='javascript:selectType(this);'>
<option name='BUG'>Bug report</option>
<option name='RFE'>Request for enhancement</option>
</select>
<h:inputText id='title' value='#{bean.entryTitle}' />
</h:form>
NOTE: this code I am making up on the fly and is not be completely accurate.
This is just an abstraction of what could happen in "real life". Note also
that
in this example, I am mixing non-JSF HTML components (the <select> tag)
with JSF components (the <h:inputText> tag). I did this on purpose to
demonstrate
that there is nothing magically about JSF components after they are rendered
to
the browser.
So, the JS function 'selectType' is invoked whenever the user selects a new
option.
Let's see how this function can change the value of the text field:
<script ...>
function selectType(selectField)
{
var type = selectField.currentOption.value; // OK, this JS code is way
off, but you get the idea
var textField = document.getElementById('x:title');
textField.value = type + ": Enter title here";
}
</script>
OK, so what the hell am I talking about? Well, the critical element in this
JS fuction is the use of "document.getElementById()" function which is built
in to client-side JavaScript language. This function as you might guess
finds
the HTML component by its ID anywhere within the DOM for the screen.
Note that the ID for the text field is 'x:title' which is the form ID 'x'
prepended
to the inner text field ID 'title'. So, that is how you can access (as an
object)
any form field (really *any* HTML element) and then manipulate that element
object in real-time.
Now the trick is: *What* do you want to do with the form element after you
have retrieved it from the getElementById function? There are lots of ways
to manipulate form elements: hide/show, disable/enable, change the value,
change the style or class, and so on. You will need to learn JavaScript in
more detail to answer these types of questions. Good luck!
I see that others are focusing on AJAX. Please note that you do *not* have
to
use AJAX to use the technique I described above. However, AJAX extends
these
techniques by allowing your client-side JS code to make calls to the server.
HTH,
Bryan
Balaji Saranathan wrote:
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com
Re: Javascript and JSF
Posted by Bryan Basham <bb...@stillsecure.com>.
Hello Balaji,
Yes, I do this all the time. Remember in XHTML you have access to the
complete DOM of the screen including form fields created by JSF components
(which render as HTML form components, ultimately).
Suppose that you have a form that has a drop-down list that (when selected)
adds some boiler-plate text to a text field:
<h:form id='x'>
<select name='type' onselect='javascript:selectType(this);'>
<option name='BUG'>Bug report</option>
<option name='RFE'>Request for enhancement</option>
</select>
<h:inputText id='title' value='#{bean.entryTitle}' />
</h:form>
NOTE: this code I am making up on the fly and is not be completely accurate.
This is just an abstraction of what could happen in "real life". Note
also that
in this example, I am mixing non-JSF HTML components (the <select> tag)
with JSF components (the <h:inputText> tag). I did this on purpose to
demonstrate
that there is nothing magically about JSF components after they are
rendered to
the browser.
So, the JS function 'selectType' is invoked whenever the user selects a
new option.
Let's see how this function can change the value of the text field:
<script ...>
function selectType(selectField)
{
var type = selectField.currentOption.value; // OK, this JS code is
way off, but you get the idea
var textField = document.getElementById('x:title');
textField.value = type + ": Enter title here";
}
</script>
OK, so what the hell am I talking about? Well, the critical element in this
JS fuction is the use of "document.getElementById()" function which is built
in to client-side JavaScript language. This function as you might guess
finds
the HTML component by its ID anywhere within the DOM for the screen.
Note that the ID for the text field is 'x:title' which is the form ID
'x' prepended
to the inner text field ID 'title'. So, that is how you can access (as
an object)
any form field (really *any* HTML element) and then manipulate that element
object in real-time.
Now the trick is: *What* do you want to do with the form element after you
have retrieved it from the getElementById function? There are lots of ways
to manipulate form elements: hide/show, disable/enable, change the value,
change the style or class, and so on. You will need to learn JavaScript in
more detail to answer these types of questions. Good luck!
I see that others are focusing on AJAX. Please note that you do *not*
have to
use AJAX to use the technique I described above. However, AJAX extends
these
techniques by allowing your client-side JS code to make calls to the server.
HTH,
Bryan
Balaji Saranathan wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>