Rails spinoffs - Feb 2007 - Upgrade from prototype 1.4 to 1.5 breaks my code using Ajax.Updater

I am a newbie to the prototype library, so please go easy ...

I''m not sure all the following detail is relevant, but just in case

The code in question is:
  function showDetail(evt, tagNameToSelect, parentTag, id) {
    var target = evt.target;
    if (target.className == "selected") return;
    if (target.tagName.toLowerCase() != tagNameToSelect) {
        target = target.parentNode; // try the parent
      if (target.tagName.toLowerCase() != tagNameToSelect) {
          return;
      }
    }
    var pourList = document.getElementById(parentTag);
    deselectExisting(pourList);
    selectNew(target);
    new Ajax.Updater(''detailArea'',
''/pour/main_detail/'' + id,
{asynchronous:true, evalScripts:true});
}

This is from a pretty typical master/detail type display. This
function showDetail is bound to the onclick property on each row (tr)
in the table. The idea is that when a row in the table is clicked,
then the appropriate detail is displayed by going back to the server
for the contents and then display it in the ''detailArea''.

Using Firebug, I can see that the request is not being sent to the
server at all.

If I switch back to 1.4 ot works fine.

Any help would be greatly appreciated.

Thanks,
Martin


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hi Raf,

There are things to be debated about your code, but I don''t see, on
first examination, stuff that would break from 1.4 to 1.5.  There''s
obviously a lot going on besides this...  I''m intrigued by your
argument
list, and your use of event makes me assume that you''re strictly on IE.

We''d need to see a reproduceable case online, to see the whole picture,
as in: what calls this method?  How is it bound, if it''s an event
handler?  How far along its code does the JS interpreter go?  etc.

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hi Christophe,

Thanks for your response. I am new to the group and to this level of
JavaScript development and am happy to post a reproducible case, but I
don''t know the protocol: I could post more of the application of
course, but how far should I go? Or would it be better to devise a
simple example that also breaks when moving from 1.4 to 1.5? I''ll see
about getting a reproducible case online, but at the moment I don''t
have access to an externally visible site.

In any case, to move things along, here are the answers to the
specific questions:
> what calls this method?
The function showDetail is bound to the onclick property on each row
(tr) in a table displaying records from a database.
> How is it bound, if it''s an event handler?
<tr onclick="my_toggle(event, ''tr'',
''pourList'', <%= pour.id %>)">
which becomes:
<tr onclick="my_toggle(event, ''tr'',
''pourList'', 1)" class="">
depending on the id (1, in this case) of the row being clicked.
> How far along its code does the JS interpreter go?
In each case (1.4 and 1.5) I can single step the JS interpreter
through the entire function including the Ajax.Updater() call. I don''t
fully understand the the Ajax.Updater() code, so I don''t know what it
is doing differently. (Of course, I shouldn''t need to read the source
to make this work).
> I''m intrigued by your argument
> list, and your use of event makes me assume that you''re strictly
on IE.
As for the event argument, I am not running on IE, I am using Firefox
2 on OSX. I read somewhere that this is the most portable way to pass
the event object to an event handler.I believe I need the other
arguments to make the selection (highlighting) code work. Suggestions
are most welcome.

The rest of the argument list (evt, tagNameToSelect, parentTag, id) is
used as follows;
 - evt is the event object, used to get the target of the the click -
in this case the specific <tr>
 - tagNameToSelect is the id of the tag that should be considered.
Otherwise simply return
 - parentTag is the id of the parent that should be considered if
tagNameToSelect does not match
 - id is the rowid of the database record so the appropriate url can
be constructed to send to the server to retrieve the detail info.
Now that I look at the code, I can see a bug in it with respect to the
selection and deselection stuff. The basic reason for the tag
arguments is because I thought it better not to hard-code specific id
names in the JavaScript. I need the parent id in order to deselect the
previously selected row.

Since I am trying to learn more about JavaScript coding practices, I
would very much appreciate hearing comments about the code in general.
I have no pride of authorship here, in fact most of the this is
cobbled together from code I found in various examples. I am simply
trying to devise a master/detail type screen with a single click on a
row in a table bringing up the detail about that record in another
area (<div>) of the screen.

Thanks very much for your help.

Martin


On Feb 13, 2:46 am, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:
> Hi Raf,
>
> There are things to be debated about your code, but I don''t see,
on
> first examination, stuff that would break from 1.4 to 1.5. 
There''s
> obviously a lot going on besides this...  I''m intrigued by your
argument
> list, and your use of event makes me assume that you''re strictly
on IE.
>
> We''d need to see a reproduceable case online, to see the whole
picture,
> as in: what calls this method?  How is it bound, if it''s an event
> handler?  How far along its code does the JS interpreter go?  etc.
>
> --
> Christophe Porteneuve a.k.a. TDD
> "[They] did not know it was impossible, so they did it." --Mark
Twain
> Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Raf,

raf a écrit :
> about getting a reproducible case online, but at the moment I
don''t
> have access to an externally visible site.
That *would* be the most convenient way for us to dip inside this.
> <tr onclick="my_toggle(event, ''tr'',
''pourList'', <%= pour.id %>)">
> which becomes:
> <tr onclick="my_toggle(event, ''tr'',
''pourList'', 1)" class="">
> depending on the id (1, in this case) of the row being clicked.
I wish this were unobstrusive, but that''s besides the issue here...
> As for the event argument, I am not running on IE, I am using Firefox
> 2 on OSX. I read somewhere that this is the most portable way to pass
My bad, it *is* W3C-based.  I must have been dozing...
> the event object to an event handler.I believe I need the other
The thing is, using onclick attributes in your HTML will not pass it on 
IE.  Using any sort of dynamic handler registration (IE''s attachEvent, 
W3C''s addEventListener, or Prototype''s smoothing
Event.observe)
guarantees the event object will get passed.
> arguments to make the selection (highlighting) code work. Suggestions
> are most welcome.
If you use this function only on this specific table, since arguments 2 
and 3 are fixed, you don''t need to pass them.  Also, your numerical 
index might be part of your row''s ID, so using event.target.id would do
the trick, and get rid of another argument.
>  - evt is the event object, used to get the target of the the click -
> in this case the specific <tr>
Since you invoke the function in the context of the specific row here 
(you have on onclick attribute for each row), you could as well pass 
*this* as first argument...
>  - tagNameToSelect is the id of the tag that should be considered.
> Otherwise simply return
Not "the ID".  ID is a specific notion in DOM documents. 
It''s the
TAGNAME that should be considered.  Since you guarantee your function is 
called on a row (as you define the onclick attribute on a row), you 
don''t need to check for it.
>  - parentTag is the id of the parent that should be considered if
> tagNameToSelect does not match
I''m not too sure what you do with this.
> names in the JavaScript. I need the parent id in order to deselect the
> previously selected row.
Why don''t you just navigate the DOM to the closest parent table, then 
search down its rows?  Prototype makes this trivial with new methods in 
the Element.Methods namespace (up, down, siblings...).
> row in a table bringing up the detail about that record in another
> area (<div>) of the screen.
My advice is on the following guidelines:

1. Use only one event registration for the whole container <table>.  If 
you define it inline, use "event" as the first argument.

2. Generate id= attributes for your <tr> elements, that include your 
numerical indices.  e.g. <tr id="row_<%= pour.id %>">

3. Make your handler take only the event as argument.  Go something like 
this:

function handleClick(event) {
   var elt = Event.element(event);
   if (''TR'' != elt.tagName) // tagName is canonical!
      return;
   var id = row.id.split(''_'')[1]; // Get the numerical part of
the ID...
   elt = $(elt);
   var otherLit = elt.siblings().find(function(row) {
     return row.hasClassName(''selected'');
   });
   if (otherLit)
     otherLit.removeClassName(''selected'');
   elt.addClassName(''selected'');
   // Notify through Ajax.Updater?
   Event.stop(event);
}

''HTH

-- 
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Wow! This helps a lot. Your advice makes a lot of sense.

I think I am beginning to understand the preferred idioms for making
use of the Prototype library. It has more powerful mechanisms than I
understood.  I''ll be refactoring the code shortly. Thanks very much.

As for the 1.4 vs. 1.5 issue, I verified (again) that the code works
as is in 1.4 and not in 1.5. So, I''ve been single stepping through the
relevant portions of the prototype.js code and have found out the
following:

<line 825:> Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
  ...
  request: function(url) {
  ...
 <line 852:>
   try {
      Ajax.Responders.dispatch(''onCreate'', this,
this.transport);

      this.transport.open(this.method.toUpperCase(), this.url,
        this.options.asynchronous);

      if (this.options.asynchronous)
        setTimeout(function()
{ this.respondToReadyState(1) }.bind(this), 10);

      this.transport.onreadystatechange this.onStateChange.bind(this);
      this.setRequestHeaders();

      var body = this.method == ''post'' ?
(this.options.postBody ||
params) : null;

      this.transport.send(body);

      /* Force Firefox to handle ready state 4 for synchronous
requests */
      if (!this.options.asynchronous &&
this.transport.overrideMimeType)
        this.onStateChange();

    }
    catch (e) {
      this.dispatchException(e);
    }


What happens is that the code is executed normally up until
    this.setRequestHeaders();
After that Firebug shows if jumping directly to the
    this.onStateChange();
line, bypassing the if statement! It then executes the
    catch (e) {
      this.dispatchException(e);
Where the exception is:
    [Exception... "Component returned failure code: 0x80070057
(NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.setRequestHeader]"
nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS
frame ::
http://localhost:3000/javascripts/prototype.js?1171386989 ::
anonymous :: line 916" data: no]

This means that the line
      this.transport.send(body);
is never executed and therefore no update occurs.

Any idea what the problem could be?

Martin



On Feb 13, 11:28 am, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:
> Hey Raf,
>
> raf a écrit :
>
> > about getting a reproducible case online, but at the moment I
don''t
> > have access to an externally visible site.
>
> That *would* be the most convenient way for us to dip inside this.
>
> > <tr onclick="my_toggle(event, ''tr'',
''pourList'', <%= pour.id %>)">
> > which becomes:
> > <tr onclick="my_toggle(event, ''tr'',
''pourList'', 1)" class="">
> > depending on the id (1, in this case) of the row being clicked.
>
> I wish this were unobstrusive, but that''s besides the issue
here...
>
> > As for the event argument, I am not running on IE, I am using Firefox
> > 2 on OSX. I read somewhere that this is the most portable way to pass
>
> My bad, it *is* W3C-based.  I must have been dozing...
>
> > the event object to an event handler.I believe I need the other
>
> The thing is, using onclick attributes in your HTML will not pass it on
> IE.  Using any sort of dynamic handler registration (IE''s
attachEvent,
> W3C''s addEventListener, or Prototype''s smoothing
Event.observe)
> guarantees the event object will get passed.
>
> > arguments to make the selection (highlighting) code work. Suggestions
> > are most welcome.
>
> If you use this function only on this specific table, since arguments 2
> and 3 are fixed, you don''t need to pass them.  Also, your
numerical
> index might be part of your row''s ID, so using event.target.id
would do
> the trick, and get rid of another argument.
>
> >  - evt is the event object, used to get the target of the the click -
> > in this case the specific <tr>
>
> Since you invoke the function in the context of the specific row here
> (you have on onclick attribute for each row), you could as well pass
> *this* as first argument...
>
> >  - tagNameToSelect is the id of the tag that should be considered.
> > Otherwise simply return
>
> Not "the ID".  ID is a specific notion in DOM documents. 
It''s the
> TAGNAME that should be considered.  Since you guarantee your function is
> called on a row (as you define the onclick attribute on a row), you
> don''t need to check for it.
>
> >  - parentTag is the id of the parent that should be considered if
> > tagNameToSelect does not match
>
> I''m not too sure what you do with this.
>
> > names in the JavaScript. I need the parent id in order to deselect the
> > previously selected row.
>
> Why don''t you just navigate the DOM to the closest parent table,
then
> search down its rows?  Prototype makes this trivial with new methods in
> the Element.Methods namespace (up, down, siblings...).
>
> > row in a table bringing up the detail about that record in another
> > area (<div>) of the screen.
>
> My advice is on the following guidelines:
>
> 1. Use only one event registration for the whole container <table>. 
If
> you define it inline, use "event" as the first argument.
>
> 2. Generate id= attributes for your <tr> elements, that include your
> numerical indices.  e.g. <tr id="row_<%= pour.id %>">
>
> 3. Make your handler take only the event as argument.  Go something like
> this:
>
> function handleClick(event) {
>    var elt = Event.element(event);
>    if (''TR'' != elt.tagName) // tagName is canonical!
>       return;
>    var id = row.id.split(''_'')[1]; // Get the numerical
part of the ID...
>    elt = $(elt);
>    var otherLit = elt.siblings().find(function(row) {
>      return row.hasClassName(''selected'');
>    });
>    if (otherLit)
>      otherLit.removeClassName(''selected'');
>    elt.addClassName(''selected'');
>    // Notify through Ajax.Updater?
>    Event.stop(event);
>
> }
>
> ''HTH
>
> --
> Christophe Porteneuve aka TDD
> t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ah!

I''ll bet you have a JSON-related lib loaded also, like the official
json.js lib, right?  Something that tinkers with Object.prototype, at
any rate.

It''s been covered many, many times in the past few weeks on this list.
setRequestHeader got rewritten for flexibility, which has it rely on
JavaScript''s for...in loop.  Any lib that tinkers with Object.prototype
will break such vanilla code.

Check the list''s archives for stuff like "Ajax not working
anymore," etc.

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Nope, unfortunately. The only javascript code being loaded is
prototype.js (1.5.0) and my own:

function deselectExisting(parentNode) {
  var existingList = parentNode.getElementsByClassName("selected");
  if (!existingList || existingList.length == 0) return;  // done
  var existing = existingList[0];
  existing.className = "";
}

function selectNew(newNode) {
  newNode.className = "selected";
}

Object.prototype.getElementsByClassName = function ( className ) {
    var matches = new Array();
    var alltags = this.getElementsByTagName( "*" );
    for (var i=0; i<alltags.length; i++) {
      if (alltags[i].className.toLowerCase() =className.toLowerCase()) {
        matches[matches.length] = alltags[i];
      }
    }
    return matches;
}

function initRowSelection() {
  //document.getElementById("pourList").onclick = toggle;
}

function my_toggle(evt, tagNameToSelect, parentTag, id) {
  var target = evt.target;
  if (target.className == "selected") return;
  if (target.tagName.toLowerCase() != tagNameToSelect) {
    target = target.parentNode; // try the parent
    if (target.tagName.toLowerCase() != tagNameToSelect) {
        return;
    }
  }
  var pourList = document.getElementById(parentTag);
  deselectExisting(pourList);
  selectNew(target);
  new Ajax.Updater(''detailArea'',
''/pour/main_detail/'' + id,
{asynchronous:true, evalScripts:true});
}


Any other ideas?

Thanks,
Martin



On Feb 13, 1:42 pm, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:
> Ah!
>
> I''ll bet you have a JSON-related lib loaded also, like the
official
> json.js lib, right?  Something that tinkers with Object.prototype, at
> any rate.
>
> It''s been covered many, many times in the past few weeks on this
list.
> setRequestHeader got rewritten for flexibility, which has it rely on
> JavaScript''s for...in loop.  Any lib that tinkers with
Object.prototype
> will break such vanilla code.
>
> Check the list''s archives for stuff like "Ajax not working
anymore," etc.
>
> --
> Christophe Porteneuve a.k.a. TDD
> "[They] did not know it was impossible, so they did it." --Mark
Twain
> Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I discovered the problem. It was the (seemingly unnecessary)
function:
     Object.prototype.getElementsByClassName = function
Once I commented this out and thereby used the prototype library
function (method) of the same name all worked well.

I guess the moral is that one should not use Object.prototype.

Since I don''t fully understand the issue(s) here, I''m
wondering where
I would go to read about the use and abuse of the XXX.prototype method/
property?

Thanks.

On Feb 13, 3:18 pm, "raf"
<r...-N9Q9sGHSUl/3fQ9qLvQP4Q@public.gmane.org>
wrote:
> Nope, unfortunately. The only javascript code being loaded is
> prototype.js (1.5.0) and my own:
>
> function deselectExisting(parentNode) {
>   var existingList =
parentNode.getElementsByClassName("selected");
>   if (!existingList || existingList.length == 0) return;  // done
>   var existing = existingList[0];
>   existing.className = "";
>
> }
>
> function selectNew(newNode) {
>   newNode.className = "selected";
>
> }
>
> Object.prototype.getElementsByClassName = function ( className ) {
>     var matches = new Array();
>     var alltags = this.getElementsByTagName( "*" );
>     for (var i=0; i<alltags.length; i++) {
>       if (alltags[i].className.toLowerCase() => className.toLowerCase())
{
>         matches[matches.length] = alltags[i];
>       }
>     }
>     return matches;
>
> }
>
> function initRowSelection() {
>   //document.getElementById("pourList").onclick = toggle;
>
> }
>
> function my_toggle(evt, tagNameToSelect, parentTag, id) {
>   var target = evt.target;
>   if (target.className == "selected") return;
>   if (target.tagName.toLowerCase() != tagNameToSelect) {
>     target = target.parentNode; // try the parent
>     if (target.tagName.toLowerCase() != tagNameToSelect) {
>         return;
>     }
>   }
>   var pourList = document.getElementById(parentTag);
>   deselectExisting(pourList);
>   selectNew(target);
>   new Ajax.Updater(''detailArea'',
''/pour/main_detail/'' + id,
> {asynchronous:true, evalScripts:true});
>
> }
>
> Any other ideas?
>
> Thanks,
> Martin
>
> On Feb 13, 1:42 pm, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:
>
> > Ah!
>
> > I''ll bet you have a JSON-related lib loaded also, like the
official
> > json.js lib, right?  Something that tinkers with Object.prototype, at
> > any rate.
>
> > It''s been covered many, many times in the past few weeks on
this list.
> > setRequestHeader got rewritten for flexibility, which has it rely on
> > JavaScript''s for...in loop.  Any lib that tinkers with
Object.prototype
> > will break such vanilla code.
>
> > Check the list''s archives for stuff like "Ajax not
working anymore," etc.
>
> > --
> > Christophe Porteneuve a.k.a. TDD
> > "[They] did not know it was impossible, so they did it."
--Mark Twain
> > Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

One of my favorite resources is prototype source.  Prototype extends 
elements on the fly to avoid the problems you were having. I found it in 
the source but it turns out there is a documented function 
Element.addMethods.

http://prototypejs.org/api/element/addMethods

Example:

<div id="testdiv">TEST</div>
<script type="text/javascript">
    Element.addMethods({
        testMethod: function(element){
            alert($(element).id); //always extend the element in case 
the user passes the id
            return element; //this is standard convention for chaining
        }
    });
    $(''testdiv'').testMethod(); //works
    Element.testMethod(''testdiv''); //doesn''t work
</script>

I tested this and the Element.testMethod is undefined, but according to 
the docs this should work, or am I missing something?

Colin

raf wrote:
> Since I don''t fully understand the issue(s) here, I''m
wondering where
> I would go to read about the use and abuse of the XXX.prototype method/
> property?
>
> Thanks.
>   

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Feb 14, 2:28 am, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:
> Hey Raf,
>
> raf a écrit :
>
> > about getting a reproducible case online, but at the moment I
don''t
> > have access to an externally visible site.
>
> That *would* be the most convenient way for us to dip inside this.
>
> > <tr onclick="my_toggle(event, ''tr'',
''pourList'', <%= pour.id %>)">
> > which becomes:
> > <tr onclick="my_toggle(event, ''tr'',
''pourList'', 1)" class="">
An id of "1" is invalid HTML, ID''s can''t start with
a number, though
they can include numbers.  If the ID is the number of the row, you
might consider using the tr''s rowIndex property.  Consider also
passing ''this'' to the function, that way you get a reference
directly
to the TR element that called my_toggle().

> > depending on the id (1, in this case) of the row being clicked.
>
> I wish this were unobstrusive, but that''s besides the issue
here...
>
> > As for the event argument, I am not running on IE, I am using Firefox
> > 2 on OSX. I read somewhere that this is the most portable way to pass
>
> My bad, it *is* W3C-based.  I must have been dozing...
>
> > the event object to an event handler.I believe I need the other
>
> The thing is, using onclick attributes in your HTML will not pass it on
> IE.  Using any sort of dynamic handler registration (IE''s
attachEvent,
> W3C''s addEventListener, or Prototype''s smoothing
Event.observe)
> guarantees the event object will get passed.

Ooops - using:

[HTML]
  <tr onclick="foo(event, ...);" ...>

[script]
  function foo(event, ...) {...}

most *is* a good, cross-browser method of passing a reference to the
event object to a function (albeit not so good if you don''t like in-
line code, but that''s another subject).  When using addEventListener
and addEvent, you have to do things like:

  function foo(e){
    var e = e || window.event;
    ...
  }

to cope with the different event models.  What''s more difficult
(though not impossible) to deal with is that the above methods set the
function''s this keyword differently in the Gecko and IE models.  The
usual deal is to use the function''s call or apply method to set it in
the call so it''s the same in both cases (as Prototype.js does).


--
Rob


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Feb 14, 12:54 pm, "raf"
<r...-N9Q9sGHSUl/3fQ9qLvQP4Q@public.gmane.org>
wrote:
> I discovered the problem. It was the (seemingly unnecessary)
> function:
>      Object.prototype.getElementsByClassName = function
You should also check to see if that property has already been defined
before stomping on it - Firefox 3 will have (has?) a native
getElementsByClassName method which will likely run much, much faster
than any javascript-based equivalent.  You should check to see if it
already exists and leverage it if it does.

If you intend to re-use your code in a library, It it good practice to
name-space your variables - especially if you are going to use them
with other libraries.

> Once I commented this out and thereby used the prototype library
> function (method) of the same name all worked well.
>
> I guess the moral is that one should not use Object.prototype.
>
> Since I don''t fully understand the issue(s) here, I''m
wondering where
> I would go to read about the use and abuse of the XXX.prototype method/
> property?
It''s pretty simple: don''t mess with built-in object prototypes
unless
you fully understand the consequences of doing so.  Mess with the
prototype property of your own objects all you like.

Perhaps you should spend some time learning about prototypes, they are
very powerful and at the core of javascript''s (parasitic) inheritance
model.

<URL: http://javascript.crockford.com/prototypal.html >


--
Rob


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

raf a écrit :
> Object.prototype.getElementsByClassName = function ( className ) {
THERE!

Why on Earth do you have this?  It makes no sense!  Only elements
feature getElementsByTagName!  And Prototype ALREADY provides
getElementsByClassName, both at the document level and at the (extended)
element level.

Your bloating Object.prototype results in all for...in loops breaking
apart, and this specific addition makes no sense, too!

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 12 fév, 18:33, "raf"
<r...-N9Q9sGHSUl/3fQ9qLvQP4Q@public.gmane.org>
wrote:
> I am a newbie to the prototype library, so please go easy ...
>
> I''m not sure all the following detail is relevant, but just in
case
>
> The code in question is:
>   function showDetail(evt, tagNameToSelect, parentTag, id) {
>     var target = evt.target;
>     if (target.className == "selected") return;
>     if (target.tagName.toLowerCase() != tagNameToSelect) {
>         target = target.parentNode; // try the parent
>       if (target.tagName.toLowerCase() != tagNameToSelect) {
>           return;
>       }
>     }
>     var pourList = document.getElementById(parentTag);
>     deselectExisting(pourList);
>     selectNew(target);
>     new Ajax.Updater(''detailArea'',
''/pour/main_detail/'' + id,
> {asynchronous:true, evalScripts:true});
>
> }
>
> This is from a pretty typical master/detail type display. This
> function showDetail is bound to the onclick property on each row (tr)
> in the table. The idea is that when a row in the table is clicked,
> then the appropriate detail is displayed by going back to the server
> for the contents and then display it in the ''detailArea''.
>
> Using Firebug, I can see that the request is not being sent to the
> server at all.
>
> If I switch back to 1.4 ot works fine.
>
> Any help would be greatly appreciated.
>
> Thanks,
> Martin

See this thread for my solution about this problem :

http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/728fb6ab1ad5027f


The problem lies in the fact that Prototype 1.5 extends the
Object.extend function to every objects, so the function
setRequestHeaders tries to add the ''extend'' function to the
headers to
be sent, thus generating the component exception.

-Yanick


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Yanick,

Yanick a écrit :
> The problem lies in the fact that Prototype 1.5 extends the
> Object.extend function to every objects, so the function
> setRequestHeaders tries to add the ''extend'' function to
the headers to
> be sent, thus generating the component exception.
While your suggested patch certainly works due to Hash#each''s
implementation (did you submit anything to Trac?), your diagnosis
doesn''t follow through.  Prototype does not add extend to every object.
 Prototype doesn''t add *anything* to *every* object (that would require
augmenting Object.prototype, which we don''t do).

Indeed, most people using 1.5.0 alone don''t have this issue.  In your
case, you must use another library in conjunction with Prototype that
augmented Object.prototype and added extend to it.

Regards,

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I did not, but Rico 1.1.2 does on line 30.

-Yanick

On 15 fév, 02:22, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:
> Hey Yanick,
>
> Yanick a écrit :
>
> > The problem lies in the fact that Prototype 1.5 extends the
> > Object.extend function to every objects, so the function
> > setRequestHeaders tries to add the ''extend'' function
to the headers to
> > be sent, thus generating the component exception.
>
> While your suggested patch certainly works due to Hash#each''s
> implementation (did you submit anything to Trac?), your diagnosis
> doesn''t follow through.  Prototype does not add extend to every
object.
>  Prototype doesn''t add *anything* to *every* object (that would
require
> augmenting Object.prototype, which we don''t do).
>
> Indeed, most people using 1.5.0 alone don''t have this issue.  In
your
> case, you must use another library in conjunction with Prototype that
> augmented Object.prototype and added extend to it.
>
> Regards,
>
> --
> Christophe Porteneuve a.k.a. TDD
> "[They] did not know it was impossible, so they did it." --Mark
Twain
> Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---