You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Lester Chua <ci...@gmail.com> on 2009/12/02 06:36:59 UTC
How to do Simple non-Ajax Javascript Behaviour?
Hi,
Hmmm, I have a simple thing which should be easy but I just cant figure
out on Wicket.
1. I have an input box.
2. I need to "attach" a javascript to this box to monitor key presses.
Basically I need to fire a js on the keyup event.
I've googled but have not found the answer to a basically simple thing.
I've tried the following which I realise wont work since the rendering
should not be into the header (or should it?)
public class KeyPressTagBehavior extends AbstractBehavior
{
private static final long serialVersionUID = 262920170424255562L;
private Component component;
public void bind(Component component)
{
this.component = component;
component.setOutputMarkupId(true);
}
public void renderHead(IHeaderResponse iHeaderResponse)
{
super.renderHead(iHeaderResponse);
iHeaderResponse.renderOnEventJavascript(
component.getMarkupId(),
"keyup",
"alert('Key Up!')");
}
}
Then done a simple
TextField field = new TextField("somefield");
field.add(new KeyPressTagBehavior());
I realised that the renderHead will render into the head. But cant find
a reference in the API to let me add it into the TextField. What is the
correct way to do this?
Regards,
Lester
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: How to do Simple non-Ajax Javascript Behaviour?
Posted by Lester Chua <ci...@gmail.com>.
Hi,
Yes, it's a direct paste.
I've regenerated the page and this is the output at HTML.
<script type="text/javascript" src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js <view-source:http://localhost:8888/mirage/resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js>"></script>
<script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/
Wicket.Event.add(tagNo5a, "keyup", function(event) { alert('Test.');});
/*-->]]>*/</script>
I added the both types of quotes but still don't get the event firing.
<script type="text/javascript" src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js <view-source:http://localhost:8888/mirage/resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js>"></script>
<script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/
Wicket.Event.add('tagNo5e', "keyup", function(event) { alert('Test.');});
/*-->]]>*/</script>
<script type="text/javascript" src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js <view-source:http://localhost:8888/mirage/resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js>"></script>
<script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/
Wicket.Event.add("tagNo63", "keyup", function(event) { alert('Test.');});
/*-->]]>*/</script>
So it seems that the event monitor in not working for keyup in my code.
I've followed Martin's hint and managed to get the event firing by adding an attribute modified to onkeyup to the textfield so I guess that's a solution. Thanks for that one.
Lester
Igor Vaynberg wrote:
> does your page have a <script> referencing wicket-event.js? also
> tagNo2f should probably be in quotes...was this a direct paste?
>
> -igor
>
> On Tue, Dec 1, 2009 at 10:18 PM, Lester Chua <ci...@gmail.com> wrote:
>
>> Hi Martin,
>>
>> Thanks for the hint, I'll look that up.
>>
>> In fact, I could do onkeyup onto the markup on the html directly but wanted
>> to do it the wicket way =) as well as reliably obtain my markupid without
>> cluttering the my markups with JS all over the place.
>>
>> On further investigation, using the approach described below I get
>>
>> Wicket.Event.add(tagNo2f, "keyup", function(event) { alert('Key Up!');;});
>>
>> Added in my page. This is done automatically. So it seems to be adding the
>> event to the event monitoring code. It's just not firing.
>>
>> Did I miss out something obvious?
>>
>> Lester
>>
>>
>>
>>
>>
>> Martin Makundi wrote:
>>
>>> YOu need to make AttributeModifier if you want it to look like this:
>>>
>>> <input onkeyup="javascript"/>
>>>
>>> **
>>> Martin
>>>
>>> 2009/12/2 Lester Chua <ci...@gmail.com>:
>>>
>>>
>>>> Hi,
>>>>
>>>> Hmmm, I have a simple thing which should be easy but I just cant figure
>>>> out
>>>> on Wicket.
>>>>
>>>> 1. I have an input box.
>>>> 2. I need to "attach" a javascript to this box to monitor key presses.
>>>> Basically I need to fire a js on the keyup event.
>>>>
>>>> I've googled but have not found the answer to a basically simple thing.
>>>> I've tried the following which I realise wont work since the rendering
>>>> should not be into the header (or should it?)
>>>>
>>>> public class KeyPressTagBehavior extends AbstractBehavior
>>>> {
>>>> private static final long serialVersionUID = 262920170424255562L;
>>>> private Component component;
>>>>
>>>> public void bind(Component component)
>>>> {
>>>> this.component = component;
>>>> component.setOutputMarkupId(true);
>>>> }
>>>>
>>>> public void renderHead(IHeaderResponse iHeaderResponse)
>>>> {
>>>> super.renderHead(iHeaderResponse);
>>>> iHeaderResponse.renderOnEventJavascript(
>>>> component.getMarkupId(),
>>>> "keyup",
>>>> "alert('Key Up!')"); }
>>>> }
>>>>
>>>>
>>>> Then done a simple
>>>>
>>>> TextField field = new TextField("somefield");
>>>> field.add(new KeyPressTagBehavior());
>>>>
>>>> I realised that the renderHead will render into the head. But cant find a
>>>> reference in the API to let me add it into the TextField. What is the
>>>> correct way to do this?
>>>>
>>>> Regards,
>>>>
>>>> Lester
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>>>
>>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: How to do Simple non-Ajax Javascript Behaviour?
Posted by Igor Vaynberg <ig...@gmail.com>.
does your page have a <script> referencing wicket-event.js? also
tagNo2f should probably be in quotes...was this a direct paste?
-igor
On Tue, Dec 1, 2009 at 10:18 PM, Lester Chua <ci...@gmail.com> wrote:
> Hi Martin,
>
> Thanks for the hint, I'll look that up.
>
> In fact, I could do onkeyup onto the markup on the html directly but wanted
> to do it the wicket way =) as well as reliably obtain my markupid without
> cluttering the my markups with JS all over the place.
>
> On further investigation, using the approach described below I get
>
> Wicket.Event.add(tagNo2f, "keyup", function(event) { alert('Key Up!');;});
>
> Added in my page. This is done automatically. So it seems to be adding the
> event to the event monitoring code. It's just not firing.
>
> Did I miss out something obvious?
>
> Lester
>
>
>
>
>
> Martin Makundi wrote:
>>
>> YOu need to make AttributeModifier if you want it to look like this:
>>
>> <input onkeyup="javascript"/>
>>
>> **
>> Martin
>>
>> 2009/12/2 Lester Chua <ci...@gmail.com>:
>>
>>>
>>> Hi,
>>>
>>> Hmmm, I have a simple thing which should be easy but I just cant figure
>>> out
>>> on Wicket.
>>>
>>> 1. I have an input box.
>>> 2. I need to "attach" a javascript to this box to monitor key presses.
>>> Basically I need to fire a js on the keyup event.
>>>
>>> I've googled but have not found the answer to a basically simple thing.
>>> I've tried the following which I realise wont work since the rendering
>>> should not be into the header (or should it?)
>>>
>>> public class KeyPressTagBehavior extends AbstractBehavior
>>> {
>>> private static final long serialVersionUID = 262920170424255562L;
>>> private Component component;
>>>
>>> public void bind(Component component)
>>> {
>>> this.component = component;
>>> component.setOutputMarkupId(true);
>>> }
>>>
>>> public void renderHead(IHeaderResponse iHeaderResponse)
>>> {
>>> super.renderHead(iHeaderResponse);
>>> iHeaderResponse.renderOnEventJavascript(
>>> component.getMarkupId(),
>>> "keyup",
>>> "alert('Key Up!')"); }
>>> }
>>>
>>>
>>> Then done a simple
>>>
>>> TextField field = new TextField("somefield");
>>> field.add(new KeyPressTagBehavior());
>>>
>>> I realised that the renderHead will render into the head. But cant find a
>>> reference in the API to let me add it into the TextField. What is the
>>> correct way to do this?
>>>
>>> Regards,
>>>
>>> Lester
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: How to do Simple non-Ajax Javascript Behaviour?
Posted by Lester Chua <ci...@gmail.com>.
Hi Martin,
Thanks for the hint, I'll look that up.
In fact, I could do onkeyup onto the markup on the html directly but
wanted to do it the wicket way =) as well as reliably obtain my markupid
without cluttering the my markups with JS all over the place.
On further investigation, using the approach described below I get
Wicket.Event.add(tagNo2f, "keyup", function(event) { alert('Key Up!');;});
Added in my page. This is done automatically. So it seems to be adding the event to the event monitoring code. It's just not firing.
Did I miss out something obvious?
Lester
Martin Makundi wrote:
> YOu need to make AttributeModifier if you want it to look like this:
>
> <input onkeyup="javascript"/>
>
> **
> Martin
>
> 2009/12/2 Lester Chua <ci...@gmail.com>:
>
>> Hi,
>>
>> Hmmm, I have a simple thing which should be easy but I just cant figure out
>> on Wicket.
>>
>> 1. I have an input box.
>> 2. I need to "attach" a javascript to this box to monitor key presses.
>> Basically I need to fire a js on the keyup event.
>>
>> I've googled but have not found the answer to a basically simple thing.
>> I've tried the following which I realise wont work since the rendering
>> should not be into the header (or should it?)
>>
>> public class KeyPressTagBehavior extends AbstractBehavior
>> {
>> private static final long serialVersionUID = 262920170424255562L;
>> private Component component;
>>
>> public void bind(Component component)
>> {
>> this.component = component;
>> component.setOutputMarkupId(true);
>> }
>>
>> public void renderHead(IHeaderResponse iHeaderResponse)
>> {
>> super.renderHead(iHeaderResponse);
>> iHeaderResponse.renderOnEventJavascript(
>> component.getMarkupId(),
>> "keyup",
>> "alert('Key Up!')"); }
>> }
>>
>>
>> Then done a simple
>>
>> TextField field = new TextField("somefield");
>> field.add(new KeyPressTagBehavior());
>>
>> I realised that the renderHead will render into the head. But cant find a
>> reference in the API to let me add it into the TextField. What is the
>> correct way to do this?
>>
>> Regards,
>>
>> Lester
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: How to do Simple non-Ajax Javascript Behaviour?
Posted by Martin Makundi <ma...@koodaripalvelut.com>.
YOu need to make AttributeModifier if you want it to look like this:
<input onkeyup="javascript"/>
**
Martin
2009/12/2 Lester Chua <ci...@gmail.com>:
> Hi,
>
> Hmmm, I have a simple thing which should be easy but I just cant figure out
> on Wicket.
>
> 1. I have an input box.
> 2. I need to "attach" a javascript to this box to monitor key presses.
> Basically I need to fire a js on the keyup event.
>
> I've googled but have not found the answer to a basically simple thing.
> I've tried the following which I realise wont work since the rendering
> should not be into the header (or should it?)
>
> public class KeyPressTagBehavior extends AbstractBehavior
> {
> private static final long serialVersionUID = 262920170424255562L;
> private Component component;
>
> public void bind(Component component)
> {
> this.component = component;
> component.setOutputMarkupId(true);
> }
>
> public void renderHead(IHeaderResponse iHeaderResponse)
> {
> super.renderHead(iHeaderResponse);
> iHeaderResponse.renderOnEventJavascript(
> component.getMarkupId(),
> "keyup",
> "alert('Key Up!')"); }
> }
>
>
> Then done a simple
>
> TextField field = new TextField("somefield");
> field.add(new KeyPressTagBehavior());
>
> I realised that the renderHead will render into the head. But cant find a
> reference in the API to let me add it into the TextField. What is the
> correct way to do this?
>
> Regards,
>
> Lester
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org