jQuery onChange: and onKeyPress:

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

jQuery onChange: and onKeyPress:

Bob Nemec
Hello,
I would like to combine the use of onChange: and onKeyPress: to display 'Save' & 'Cancel' buttons.

onChange: is useful when a value is pasted in to the text field, and onKeyPress: shows the buttons without having to click elsewhere. So far this is working well, except when the first component selected after entering text is the 'Save' or 'Cancel' button. When that happens, the onChange: action is triggered, which re-renders the button. From the user's perspective, the button press was ignored and needs to be done again.

I would like to have the onKeyPress: action remove the onChange: behaviour.  How can that be done?
Or is there a better way to detect that text was pasted in? (i.e. cases where onKeyPress: is not triggered).

Here is some sample code... 
If you enter a value into the text input field and then press the button, you'll notice the ignored button press.

renderContentOn: html

html form: [
html text: 'Message text:'.
html textInput
value: self messageText; 
onChange: (html jQuery ajax callback: [:inputValue | self messageText: inputValue] value: html jQuery this value);
onChange: ((html jQuery id: 'showThis') load html: [:renderer | self renderMessageTextAndButtonOn: renderer]);
onKeyPress: (html jQuery ajax callback: [:inputValue | self messageText: inputValue] value: html jQuery this value);
onKeyPress: ((html jQuery id: 'showThis') load html: [:renderer | self renderMessageTextAndButtonOn: renderer]);
yourself.
html horizontalRule.
html div id: 'showThis'; with: [
self renderMessageTextAndButtonOn: html]]


renderMessageTextAndButtonOn: html

html button callback: [Transcript cr; show: 'Button pressed']; with: 'Press'.
html break.
html text: self messageText asString


Thanks, 
Bob Nemec
HTS Engineering

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Bob Nemec
Reply | Threaded
Open this post in threaded view
|

Re: jQuery onChange: and onKeyPress:

Paul DeBruicker
Depending on what browsers you have to support you could just use the
HTML5 onInput event rather than both onKeyPress and onChange. See the
following for a list of browsers that support it:
https://developer.mozilla.org/en-US/docs/DOM/window.oninput

Its part of the Seaside-HTML5 package



On 01/09/2013 06:58 AM, [hidden email] wrote:

> Hello,
> I would like to combine the use of onChange: and onKeyPress: to display
> 'Save' & 'Cancel' buttons.
>
> onChange: is useful when a value is pasted in to the text field, and
> onKeyPress: shows the buttons without having to click elsewhere. So far
> this is working well, except when the first component selected after
> entering text is the 'Save' or 'Cancel' button. When that happens, the
> onChange: action is triggered, which re-renders the button. From the
> user's perspective, the button press was ignored and needs to be done again.
>
> I would like to have the onKeyPress: action remove the onChange:
> behaviour.  How can that be done?
> Or is there a better way to detect that text was pasted in? (i.e. cases
> where onKeyPress: is not triggered).
>
> Here is some sample code...
> If you enter a value into the text input field and then press the
> button, you'll notice the ignored button press.
>
> renderContentOn: html
>
> html form: [
> html text: 'Message text:'.
> html textInput
> value: self messageText;
> onChange: (html jQuery ajax callback: [:inputValue | self messageText:
> inputValue] value: html jQuery this value);
> onChange: ((html jQuery id: 'showThis') load html: [:renderer | self
> renderMessageTextAndButtonOn: renderer]);
> onKeyPress: (html jQuery ajax callback: [:inputValue | self messageText:
> inputValue] value: html jQuery this value);
> onKeyPress: ((html jQuery id: 'showThis') load html: [:renderer | self
> renderMessageTextAndButtonOn: renderer]);
> yourself.
> html horizontalRule.
> html div id: 'showThis'; with: [
> self renderMessageTextAndButtonOn: html]]
>
>
> renderMessageTextAndButtonOn: html
>
> html button callback: [Transcript cr; show: 'Button pressed']; with:
> 'Press'.
> html break.
> html text: self messageText asString
>
>
> Thanks,
> Bob Nemec
> HTS Engineering
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery onChange: and onKeyPress:

Bob Nemec
Paul,
onInput: works great; exactly what I needed. 

Thank you.
Bob


From: Paul DeBruicker <[hidden email]>
To: [hidden email]; Seaside - general discussion <[hidden email]>
Sent: Wednesday, January 9, 2013 11:47:09 AM
Subject: Re: [Seaside] jQuery onChange: and onKeyPress:

Depending on what browsers you have to support you could just use the
HTML5 onInput event rather than both onKeyPress and onChange. See the
following for a list of browsers that support it:
https://developer.mozilla.org/en-US/docs/DOM/window.oninput

Its part of the Seaside-HTML5 package



On 01/09/2013 06:58 AM, [hidden email] wrote:

> Hello,
> I would like to combine the use of onChange: and onKeyPress: to display
> 'Save' & 'Cancel' buttons.
>
> onChange: is useful when a value is pasted in to the text field, and
> onKeyPress: shows the buttons without having to click elsewhere. So far
> this is working well, except when the first component selected after
> entering text is the 'Save' or 'Cancel' button. When that happens, the
> onChange: action is triggered, which re-renders the button. From the
> user's perspective, the button press was ignored and needs to be done again.
>
> I would like to have the onKeyPress: action remove the onChange:
> behaviour.  How can that be done?
> Or is there a better way to detect that text was pasted in? (i.e. cases
> where onKeyPress: is not triggered).
>
> Here is some sample code...
> If you enter a value into the text input field and then press the
> button, you'll notice the ignored button press.
>
> renderContentOn: html
>
> html form: [
> html text: 'Message text:'.
> html textInput
> value: self messageText;
> onChange: (html jQuery ajax callback: [:inputValue | self messageText:
> inputValue] value: html jQuery this value);
> onChange: ((html jQuery id: 'showThis') load html: [:renderer | self
> renderMessageTextAndButtonOn: renderer]);
> onKeyPress: (html jQuery ajax callback: [:inputValue | self messageText:
> inputValue] value: html jQuery this value);
> onKeyPress: ((html jQuery id: 'showThis') load html: [:renderer | self
> renderMessageTextAndButtonOn: renderer]);
> yourself.
> html horizontalRule.
> html div id: 'showThis'; with: [
> self renderMessageTextAndButtonOn: html]]
>
>
> renderMessageTextAndButtonOn: html
>
> html button callback: [Transcript cr; show: 'Button pressed']; with:
> 'Press'.
> html break.
> html text: self messageText asString
>
>
> Thanks,
> Bob Nemec
> HTS Engineering
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Bob Nemec