[Proto-Scripty] question re: Element.addMethods
I'm trying to understand something about this example from the API
docs re: Element.addMethods:
Element.addMethods({
wrap: function(element, tagName) {
element = $(element);
var wrapper = document.createElement('tagName');
element.parentNode.replaceChild(wrapper, element);
wrapper.appendChild(element);
return Element.extend(wrapper);
}
});
Why does the wrap function include the line element = $(element);?
In general, this line adds extra flexibility to a function. But in
this case the function is defined in the context of
Element.addMethods, so wouldn't element always refer to a node in
the DOM already? Is there a case where the method could fail if that
first line is not included?
Thanks..
--~--~-~--~~~---~--~~
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] Drag and drop slow on IE (many droppables)
I try to make dnd for pieces on Shogi board. My approach is: when a user starts to drag a piece, I make these fields on the board that the piece can move to droppable. Shogi board is 9x9 DIVs structure so there could be about 81 droppables. Dragged element is an IMG. I made an example with 76 droppables (http://shogitools.appspot.com/ html/asb_example1.html - when you drag the piece beside the board). The code works well on FireFox, Safari, Opera and Chrome, but on Internet Explorer it works veeery slow. (when there are less dropables - when you drag the pieces that are on the board - the performance is quite decent) I don't know if its my code, scriptaculous' or evil IE. It's probably subject for another post. What I want now is some workaround. I thought I make one big DIV (covering the whole board) as a droppable and then when the piece is dropped I would get it's position relative to the DIV. This way I would know on which field the piece should be put. Could anyone please suggest me, how to get the 'drop-positon'? Is such an information stored in event? Thanks in advance, fat bold cyclop --~--~-~--~~~---~--~~ 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: question re: Element.addMethods
Hiya,
...wouldn't element always refer to a node in
the DOM already? Is there a case where the method could fail if that
first line is not included?
The functions in the Element class are available both as class methods
and as instance methods. What you're defining is the class method,
which automagically gets methodized and applied to either the
HTMLElement prototype (on most browsers) or specific elements when
they're extended (on IE). More here:
http://prototypejs.org/learn/extensions
So answering your second question above, if someone uses the class
version of the method and passes in an ID, the call to $() is
necessary. Silly example:
Element.addMethods({
showError: function(element, err) {
element = $(element);
element.update('span class=error' + err + '/span');
}
});
...which can be called like this:
Element.showError('target', 'Something failed.');
...in which case the $() call is required. You're quite right that
it's redundant if they use the methodized version:
$('target').showError('Something failed');
...since the element passed into it will already be both looked up and
extended before it gets called.
So I think it's the class method scenario that's the main reason you
need it.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jun 20, 2:00 am, barunio baru...@gmail.com wrote:
I'm trying to understand something about this example from the API
docs re: Element.addMethods:
Element.addMethods({
wrap: function(element, tagName) {
element = $(element);
var wrapper = document.createElement('tagName');
element.parentNode.replaceChild(wrapper, element);
wrapper.appendChild(element);
return Element.extend(wrapper);
}
});
Why does the wrap function include the line element = $(element);?
In general, this line adds extra flexibility to a function. But in
this case the function is defined in the context of
Element.addMethods, so wouldn't element always refer to a node in
the DOM already? Is there a case where the method could fail if that
first line is not included?
Thanks..
--~--~-~--~~~---~--~~
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] Being Dynamic
Hello, I love Prototype.js, it's sort of the miracle we have been
waiting for.
All hard coded examples I have tried work great, but for some reason
when I try to get dynamic (one sendRequest() for a group of controls
for example) I can not get something that works.
Maybe I am not allowed to do this, feel free to tell me I'm a plonker.
Something in these lines -
var currentTarget;
function sendRequest( controlID, controlData, target ) {
currentTarget = target;
new Ajax.Request(requests.php,
{
method: 'post',
postBody: controlID+'='+
$F(controlData),
onComplete: showResponse
});
}
function showResponse() {
$(currentTarget).innerHTML=
req.responseText;
}
I have narrowed it down trying to find what it doesn't like, then when
I get to the plain old static -
function sendRequest() {
new Ajax.Request(requests.php,
{
method: 'post',
postBody: 'name='+ $F('name'),
onComplete: showResponse
});
}
It all works again. Do I really have to have a 'sendRequest()' for
each control? I know that I don't, so why can't I get going with this?
--~--~-~--~~~---~--~~
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: Need help with getValue
Hi Stuart,
The id attribute _must_ be unique within the page, that's part of the
HTML standard. You can have multiple inputs with the same name
attribute, but not the same id. When adding the further inputs,
you'll need to give them unique ids like 'forename0', 'forename1',
'forename2', etc. Once they have unique IDs, then you can use $F to
retrieve them.
In terms of finding the values for all of them, the great thing is
that Prototype provides CSS3 attribute substring selectors[1] even if
the underlying browser doesn't. So you can do this:
var inputs = $$('input[id^=forename]');
...to get an array of the form elements whose ID _starts with_
'forename', although doing it only within the form element might be
faster:
var inputs = $('myForm').select('input[id^=forename]');
Quite easy to get their values at that point via Enumerable#invoke[2],
which is mixed in with arrays:
var forenames = inputs.invoke('getValue');
'vals' is now an array with the values of all of the forenameX inputs.
Naturally you can combine all of this:
var forenames = $('myform').select('input[id^=forename]').invoke
('getValue');
[1] http://www.w3.org/TR/css3-selectors/#attribute-substrings
[2] http://prototypejs.org/api/enumerable/invoke
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jun 21, 12:11 pm, Stuart stuart.ga...@googlemail.com wrote:
I have a form that has rows of input fields added using javascript by
pressing a button, which means that I have a single form with lots of
items with the same ID. eg.:
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
[button to add a new line of input fields] [button to call a
javascript to save the form]
When the user presses the [save] button, my Javascript works fine for
all my non-repeated fields, but I can't figure out how to get a list
of values for forename and surname
I guess it shoud be something like:
var my_forenames = $F( 'forname' );
var my_surnames = $F( 'surname' );
but this just returns the value of the first row.
What SHOULD I be doing?
TIA
Stuart
--~--~-~--~~~---~--~~
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: Need help with getValue
Hi,
Sorry, typo above. Where I said
var forenames = inputs.invoke('getValue');
'vals' is now an array with the values of all of the forenameX inputs.
I did of course mean 'forenames', not 'vals'.
-- T.J.
On Jun 21, 12:54 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi Stuart,
The id attribute _must_ be unique within the page, that's part of the
HTML standard. You can have multiple inputs with the same name
attribute, but not the same id. When adding the further inputs,
you'll need to give them unique ids like 'forename0', 'forename1',
'forename2', etc. Once they have unique IDs, then you can use $F to
retrieve them.
In terms of finding the values for all of them, the great thing is
that Prototype provides CSS3 attribute substring selectors[1] even if
the underlying browser doesn't. So you can do this:
var inputs = $$('input[id^=forename]');
...to get an array of the form elements whose ID _starts with_
'forename', although doing it only within the form element might be
faster:
var inputs = $('myForm').select('input[id^=forename]');
Quite easy to get their values at that point via Enumerable#invoke[2],
which is mixed in with arrays:
var forenames = inputs.invoke('getValue');
'vals' is now an array with the values of all of the forenameX inputs.
Naturally you can combine all of this:
var forenames = $('myform').select('input[id^=forename]').invoke
('getValue');
[1]http://www.w3.org/TR/css3-selectors/#attribute-substrings
[2]http://prototypejs.org/api/enumerable/invoke
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jun 21, 12:11 pm, Stuart stuart.ga...@googlemail.com wrote:
I have a form that has rows of input fields added using javascript by
pressing a button, which means that I have a single form with lots of
items with the same ID. eg.:
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
input id=forename/input input id=surname/input
[button to add a new line of input fields] [button to call a
javascript to save the form]
When the user presses the [save] button, my Javascript works fine for
all my non-repeated fields, but I can't figure out how to get a list
of values for forename and surname
I guess it shoud be something like:
var my_forenames = $F( 'forname' );
var my_surnames = $F( 'surname' );
but this just returns the value of the first row.
What SHOULD I be doing?
TIA
Stuart
--~--~-~--~~~---~--~~
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: Need help with getValue
sorry about the repeated response... apparently my phone's email client had not
updated new messages.
-Original Message-
Date: Sunday, June 21, 2009 1:46:13 pm
To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com
From: Stuart stuart.ga...@googlemail.com
Subject: [Proto-Scripty] Re: Need help with getValue
Stunning answer
Worked first time. Marvelous. I'm speechless.
Thanks a million.
On Jun 21, 12:54 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi Stuart,
The id attribute _must_ be unique within the page, that's part of the
HTML standard. You can have multiple inputs with the same name
attribute, but not the same id. When adding the further inputs,
you'll need to give them unique ids like 'forename0', 'forename1',
'forename2', etc. Once they have unique IDs, then you can use $F to
retrieve them.
In terms of finding the values for all of them, the great thing is
that Prototype provides CSS3 attribute substring selectors[1] even if
the underlying browser doesn't. So you can do this:
var inputs = $$('input[id^=forename]');
...to get an array of the form elements whose ID _starts with_
'forename', although doing it only within the form element might be
faster:
var inputs = $('myForm').select('input[id^=forename]');
Quite e
--~--~-~--~~~---~--~~
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: Drag and drop slow on IE (many droppables)
Hi fat bold cyclop, to retriev the X/Y position of an element, go and have a look at http://prototypejs.org/api/element/cumulativeoffset and http://prototypejs.org/api/element/cumulativescrolloffset depending if there is scroll or not. Both return coordonate of the element, Then you just need to verify with mouse position wich could be retirvr from event. -- david On 20 juin, 08:20, fat bold cyclop fat.bold.cyc...@gmail.com wrote: I try to make dnd for pieces on Shogi board. My approach is: when a user starts to drag a piece, I make these fields on the board that the piece can move to droppable. Shogi board is 9x9 DIVs structure so there could be about 81 droppables. Dragged element is an IMG. I made an example with 76 droppables (http://shogitools.appspot.com/ html/asb_example1.html - when you drag the piece beside the board). The code works well on FireFox, Safari, Opera and Chrome, but on Internet Explorer it works veeery slow. (when there are less dropables - when you drag the pieces that are on the board - the performance is quite decent) I don't know if its my code, scriptaculous' or evil IE. It's probably subject for another post. What I want now is some workaround. I thought I make one big DIV (covering the whole board) as a droppable and then when the piece is dropped I would get it's position relative to the DIV. This way I would know on which field the piece should be put. Could anyone please suggest me, how to get the 'drop-positon'? Is such an information stored in event? Thanks in advance, fat bold cyclop --~--~-~--~~~---~--~~ 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: Autocompleter shifts results to the right in IE8
Hi Dan,
the trouble is that you use the margin: 0px auto; in #centreWrapper
CSS properties. To understand, try to change width of the viewport.
By removing the attribute, it's well positionned.
perhaps another way to center the div ??
--
david
On 18 juin, 16:26, BillyRayPreachersSon
billyraypreachers...@gmail.com wrote:
I'm having difficulty in getting the drop-down portion of the
Autocompleter control to display in the correct place in IE8.
It doesn't seem to matter whether I use the Ajax or Local
autocompleter controls, so have posted the test harness here with a
Local one. This works fine under IE7 and Fx 3, but in IE8, the results
are way off to the right. If I turn IE8 into compatibility mode, all
is good, but IMHO, this is not something that I should have to do.
The amount they are off to the right depends on how wide your browser
window is, so it's something to do with the centring process. Also, if
we don't centre the site, and give the body a left-padding, the result
is also off in IE8 only.
I've tried this with the latest version of script.aculo.us (v1.8.2),
and 3 different versions of Prototype (v1.6.0.3, v1.6.1 RC2 and v1.6.1
RC3), and it's off using all of them.
Here's a test harness. It assumes you have Prototype in the same
folder as this code, called 'prototype.js', and that you have
script.aculo.us in a sub-folder called 'scriptaculous'.
!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; xml:lang=en lang=en
head
titleAutocompleter test in IE8/title
meta http-equiv=Content-Type content=text/html;charset=utf-8/
style type=text/css
html, body {
padding: 0px;
margin: 0px;
}
body {
text-align: center;
}
#centreWrapper {
width: 800px;
margin: 0px auto;
text-align: left;
background-color: #CC;
}
#itemSelectionWrapper {
position: relative;
padding: 20px;
}
#itemSelectorRow {
margin: 10px;
}
div.autocomplete {
position: absolute;
width: 250px;
background-color: #FF;
border: 1px solid #88;
margin: 0px;
padding: 0px;
}
div.autocomplete ul,
div.autocomplete li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
/style
script type=text/javascript src=prototype.js/script
script type=text/javascript src=scriptaculous/scriptaculous.js/
script
/head
body
div id=centreWrapper
div id=itemSelectionWrapper
form
fieldset
legendItem Selection/legend
div id=itemSelectorRow
labelItem/label
input type=text
name=locations id=locations value=
size=80 /
div id=locationSuggestions
class=autocomplete
style=display:none;/div
/div
/fieldset
/form
/div
/div
script type=text/javascript
new Autocompleter.Local('locations', 'locationSuggestions',
['Item
1', 'Item 2', 'Item 3'], { tokens:',', paramName:'tags' });
/script
/body
/html
The only other mention of this issue that I could find is in this
thread:http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
Any ideas on a fix or workaround that doesn't involve compatibility
mode or not centring the page?
Thanks,
Dan
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
