Rails spinoffs - Aug 2007 - update events on elements loaded through Ajax.Updater

Hi all,

I''ve been searching and searching (and searching) for a solution to
this, because it seems pretty run-of-the-mill, but I haven''t found
anything. So apologies if it''s been answered.

Basically, I have a JS object that hooks itself into an XHTML
container and loads content into the container via AJAX. It needs to
register events on the content within the container so that the
container can continue to be updated.

--- somewhere in XHTML ---

<div class="container"></div>

--- meanwhile, in JS, onDOMReady ---

$$(''.container'').each(function(c){new CategoryBrowser(c)});

--- and then before, we did this in JS ---

CategoryBrowser = Class.create();
CategoryBrowser.prototype = {
  bdc: '''',

  getControls: function() {
    return this.container.getElementsByClassName(''control'');
  },

  hookEvents: function() {
    this.getControls().each(function(control){
      var evHash = $H({
        el: control,
        ev: ''click'',
        func: function(ev){
          this.setBDC(Event.element(ev).href).bind(this);
          Event.stop(ev);
        }.bindAsEventListener(this)
      });
      this.events.push(evHash);
      Event.observe(evHash[''el''],
evHash[''ev''], evHash[''func'']);
    }.bind(this));
  },

  setBDC: function(bdc) {
    bdc = bdc ? String(bdc) : '''';
    this.bdc = bdc;
    new Ajax.Updater(this.container, ''/elsewheres.php'', {
      method: ''get'',
      parameters: {id: bdc},
      onSuccess: this.hookEvents.bind(this),
      onFailure: function(){alert(''Could not update
category.'')}
    });
  },

  initialize: function(container) {
    this.container = container;
    this.events = new Array();
    this.setBDC(this.bdc);
  }
};
--- that''s all the code ---

So the "/elsewheres.php" url will return an unordered list (XHTML) of
li''s with ''class="control"'', and click on a
given control should
update the container. This works if I do it all statelessly, but once
I create object instances and rely on "this.container" in the
CategoryBrowser, things fall apart.

"this.container" works fine the first time around, but when I go to
hookEvents(), either it''s been unloaded or (more likely)
"this.container" still refers to the container *before the new XHTML
was inserted*. So when I go looking for controls in "this.container"
there''s nothing there.

So how do I reload or refresh this.container? Or can I pass it by
reference somehow so it stays up to date? I know I could give the
container div an id and refer to it within CategoryBrowser as $
(this.container.id), but there''s an indeterminate number of browsers,
and I don''t want to be generating meaningless ids for them. Unless
there''s absolutely no other way.

Muchas gracias,
Ian


--~--~---------~--~----~------------~-------~--~----~
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 Ian,
I think this

return this.container.getElementsByClassName(''control'');

has to be

return document.getElementsByClassName(''control'',
this.container);

Maybe this solves your problem already?

Greetings,
Mensler


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Unfortunately, no. Looking at the prototype docs:

getElementsByClassName(element, className) -> [HTMLElement...]

but document.getElementsByClassName(this.container, ''control'')
didn''t
work either. The problem isn''t that this.container can''t be
found, or
I would get a "no properties" error or something, no? Anyway, for
whatever reason running getElementsByClassName on document instead of
this.container doesn''t observably change the behavior.

Thanks though.

-Ian

On Aug 17, 8:53 am, Mensler
<webpl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:
> Hi Ian,
> I think this
>
> return this.container.getElementsByClassName(''control'');
>
> has to be
>
> return document.getElementsByClassName(''control'',
this.container);
>
> Maybe this solves your problem already?
>
> Greetings,
> Mensler

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Ok, so I figured it out. Apparently Updater''s onSuccess handler runs
on receipt of a success response code, but before the new data has
actually been loaded in. Using the onComplete handler fixed it. The
Prototype docs are confusing on this point, as they suggest that
onSuccess is the same as onComplete but with response code checking.

On Aug 20, 10:34 am, "i...-ZMJO0lPjCCA@public.gmane.org"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
> Unfortunately, no. Looking at the prototype docs:
>
> getElementsByClassName(element, className) -> [HTMLElement...]
>
> but document.getElementsByClassName(this.container,
''control'') didn''t
> work either. The problem isn''t that this.container can''t
be found, or
> I would get a "no properties" error or something, no? Anyway, for
> whatever reason running getElementsByClassName on document instead of
> this.container doesn''t observably change the behavior.
>
> Thanks though.
>
> -Ian
>
> On Aug 17, 8:53 am, Mensler
<webpl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
>
> > Hi Ian,
> > I think this
>
> > return
this.container.getElementsByClassName(''control'');
>
> > has to be
>
> > return document.getElementsByClassName(''control'',
this.container);
>
> > Maybe this solves your problem already?
>
> > Greetings,
> > Mensler

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---