[Proto-Scripty] Re: Event Observers and Question on Copying Form Values Using Prototype
Walter Lee Davis wrote:
On Apr 24, 2009, at 1:38 AM, katz wrote:
On Event observers, I just realized it wasn't working because the html
was only inserted upon calling Add new item variation.
So it would definitely fail regardless of whether
document.observe('dom:loaded',function() or
Event.observe(window,'load',function() is used.
That's something I didn't see earlier.
Adding the script below the button works fine anyway.
Read up on event delegation, that can save you a lot of specific code
(and duplication). Basically, you take advantage of the fact that
events usually bubble up until something catches them. So observe a
click on the document, or on some other element that's higher up the
DOM tree than your inserted element, and even when the click hits the
child of that element, the parent will hear it.
div id=form_container
//buncha dynamic form elements in here
input type=button class=copy value=Copy id=button_3 /
(that button could be there in source, might be added later by JS,
doesn't matter for the following to work)
/div
//script
$('form_container').observe('click',function(evt){
var elm = evt.element();
if(elm.hasClassName('copy')){
//do your copy stuff here, using DOM traversal to work out What
to
copy Where
}
if(elm.hasClassName('somethingElse')){
//another behavior here
}
...
});
Walter
Thanks. Yeah right now there's duplication.
I simply used Ruby code to set a unique for each field.
Something like:
script type=text/javascript
$('same_%= variation.id %').observe('click', function(e) {
if ($('same_%= variation.id %').checked){
$('variation_price_%= variation.id
%').setValue($F('product_price'));
}
else {
$('variation_price_%= variation.id %').setValue('');
}
});
/script
And this repeats every time the insert_html RJS code is called.
It works however.
I'll read on event delegation as well later.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Event Observers and Question on Copying Form Values Using Prototype
On Apr 23, 2009, at 2:05 PM, katz wrote:
Greetings.
I need to learn how to achieve to dynamically copy form field values
using Prototype or possibly Ruby.
I want to achieve something like this:
http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to-another-input-field-with-jquery/
http://websitebuildersresource.com/demos/jquery-copy-form-data/
Sorry for posting a jQuery example.
I'm fairly new to Prototype, Scriptaculous and RJS. My goal is to
achieve similar result using the default libraries of Rails.
Although I am aware of jQuery noConflict() and and all those
techniques
to make jquery work well with other libraries, I just don't want to
use
it for now.
There aren't too many decent examples on how to copy form values for
prototype.
My question is:
How do you use that $F function and form.serialize to copy form field
values to other fields?
Also event observers seem to fail to work if defined on head tag. Am I
right?
If you define the observer before the element it's observing is loaded
into the DOM, then it will fail.
Try wrapping your element observer in a general the page has loaded
observer, either one of these will do:
document.observe('dom:loaded',function(){
//your code here
});
or (more IE-friendly ATM)
Event.observe(window,'load',function(){
//your code here
});
http://www.prototypejs.org/api/event/observe
Examples aren't working for me.
So I already have something like this:
input id=item_weight
type=text value=0 size=10 name=item[weight]/
input id=item__copy_weight
type=text value=0 size=10 name=item[copy_weight]/
input type=button id=button3 value=Same as above /
script type=text/javascript
$('button3').observe('click', function(e) {
var form = Event.findElement(e, 'form');
var input = form.down('input[name=item[weight]]');
alert($F(input));
});
/script
What's missing is the code to make the value of item[weight] same as
[copy_weight] when the button is clicked.
Help would be greatly appreciated.
The easiest way to do this would be to give your form elements IDs to
match their names. Then, you can simply do this:
$('button_3').observe('click',function(){
$('item_copy_weight').setValue($F('item_weight'));
});
If you still need to do the crawl up then down thing to get the non-
identified elements, you can use previous() and next() to walk between
neighbors, as long as they are in the same parent container.
Walter
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Event Observers and Question on Copying Form Values Using Prototype
On Apr 24, 4:05 am, katz bridgeuto...@gmail.com wrote:
Greetings.
I need to learn how to achieve to dynamically copy form field values
using Prototype or possibly Ruby.
I want to achieve something like
this:http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to...
http://websitebuildersresource.com/demos/jquery-copy-form-data/
Sorry for posting a jQuery example.
I'm fairly new to Prototype, Scriptaculous and RJS. My goal is to
achieve similar result using the default libraries of Rails.
Although I am aware of jQuery noConflict() and and all those techniques
to make jquery work well with other libraries, I just don't want to use
it for now.
There aren't too many decent examples on how to copy form values for
prototype.
My question is:
How do you use that $F function and form.serialize to copy form field
values to other fields?
Also event observers seem to fail to work if defined on head tag. Am I
right?
http://www.prototypejs.org/api/event/observe
Examples aren't working for me.
So I already have something like this:
input id=item_weight
type=text value=0 size=10 name=item[weight]/
input id=item__copy_weight
type=text value=0 size=10 name=item[copy_weight]/
input type=button id=button3 value=Same as above /
script type=text/javascript
$('button3').observe('click', function(e) {
var form = Event.findElement(e, 'form');
All form controls have a reference to the form they are in, so:
var form = this.form;
var input = form.down('input[name=item[weight]]');
Since you now have a reference to the form, the controls are easy:
form.elements['item[copy_weight]'].value = form.elements['item
[weight]'].value;
--
Rob
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Event Observers and Question on Copying Form Values Using Prototype
RobG wrote:
On Apr 24, 4:05 am, katz bridgeuto...@gmail.com wrote:
Greetings.
I need to learn how to achieve to dynamically copy form field values
using Prototype or possibly Ruby.
I want to achieve something like
this:http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to...
http://websitebuildersresource.com/demos/jquery-copy-form-data/
Sorry for posting a jQuery example.
I'm fairly new to Prototype, Scriptaculous and RJS. My goal is to
achieve similar result using the default libraries of Rails.
Although I am aware of jQuery noConflict() and and all those techniques
to make jquery work well with other libraries, I just don't want to use
it for now.
There aren't too many decent examples on how to copy form values for
prototype.
My question is:
How do you use that $F function and form.serialize to copy form field
values to other fields?
Also event observers seem to fail to work if defined on head tag. Am I
right?
http://www.prototypejs.org/api/event/observe
Examples aren't working for me.
So I already have something like this:
input id=item_weight
type=text value=0 size=10 name=item[weight]/
input id=item__copy_weight
type=text value=0 size=10 name=item[copy_weight]/
input type=button id=button3 value=Same as above /
script type=text/javascript
$('button3').observe('click', function(e) {
var form = Event.findElement(e, 'form');
All form controls have a reference to the form they are in, so:
var form = this.form;
var input = form.down('input[name=item[weight]]');
Since you now have a reference to the form, the controls are easy:
form.elements['item[copy_weight]'].value = form.elements['item
[weight]'].value;
Thanks, Rob. That could be helpful someday.
For now, using the html id instead of name is more convenient as I am
adding several items with the same name.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Event Observers and Question on Copying Form Values Using Prototype
On Apr 24, 2009, at 1:38 AM, katz wrote:
On Event observers, I just realized it wasn't working because the html
was only inserted upon calling Add new item variation.
So it would definitely fail regardless of whether
document.observe('dom:loaded',function() or
Event.observe(window,'load',function() is used.
That's something I didn't see earlier.
Adding the script below the button works fine anyway.
Read up on event delegation, that can save you a lot of specific code
(and duplication). Basically, you take advantage of the fact that
events usually bubble up until something catches them. So observe a
click on the document, or on some other element that's higher up the
DOM tree than your inserted element, and even when the click hits the
child of that element, the parent will hear it.
div id=form_container
//buncha dynamic form elements in here
input type=button class=copy value=Copy id=button_3 /
(that button could be there in source, might be added later by JS,
doesn't matter for the following to work)
/div
//script
$('form_container').observe('click',function(evt){
var elm = evt.element();
if(elm.hasClassName('copy')){
//do your copy stuff here, using DOM traversal to work out What
to
copy Where
}
if(elm.hasClassName('somethingElse')){
//another behavior here
}
...
});
Walter
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
