The issue may be that the last function in the chain, where you add the event listeners again, is never called. You either need to call 'this.callChain()' in the second-to-last chained function, or move the call to 'addEvents()' into the same function as the construction of the MultiBox.
You can also see a post (I wrote) about chaining http://www.mooforum.net/help12/chain-guide-t1347.html#p4362 . It is also has some examples with Fx + Request. BTW, I notice the nesting level of your code is quite high. This makes it difficult to read, and I expect difficult to change in the future. To change this I would recommend: - Not replacing the links every time, so you don't need to keep re-adding event listeners. You may need to only inject the relavent new content into the page DOM, and also set the link hrefs from the requested content. - Construct the Request and Fx objects once on domready (So the Fx constructor takes a 'container' that is faded in/out when items are requested). - Make the Fx and Request objects call 'callChain' on a separate Chain instance onComplete/onSuccess, and do all the chaining in that separate Chain instance (as in the mooforum post) Michal. On Thu, May 21, 2009 at 8:32 AM, Arak Tai'Roth <[email protected]> wrote: > > Hi there. I've been looking for hours on how to do this but can't seem > to find anything, perhaps my google-fu needs honing but I was hoping > someone could help me on here. > > I have the following code: > > window.addEvent('domready', function() > { > addEvents(); > }); > > function addEvents() > { > var myFade = new Fx.Tween('builds_imagemenu'); > > $$('a.next', 'a.prev').each(function(ar) > { > ar.addEvent('click', function(event) > { > event.stop(); > > var req = new Request.HTML( > { > method: 'get', > url: ar.get('href'), > data: { 'do' : '1' }, > onRequest: function() > { > $('builds_imagecontent').set('html', > '<div id = "loader"><img src > = "http://testing.solderpoint.com/habitatregina/img/builds_loader.gif"; > alt = "Loading" /></div>'); > }, > onSuccess: function(responseTree, > responseElements, responseHTML, > responseJavaScript) > { > myFade.start('opacity', > 0.0).chain(function() > { > > $('builds_imagecontent').set('html',responseHTML); > myFade.start('opacity', 1.0); > }).chain(function() > { > imageMulti = new > MultiBox('bi', {descClassName: 'multiBoxDesc', > useOverlay: true}); > }).chain(function() > { > addEvents(); > }); > } > }).send(); > }); > }); > } > > Now it works fine the first time. However the second time it doesn't > work. Now I'm pretty sure I know what's happening, the buttons are > being removed from the dom and then re-added, thus the events are > being erased. However according to the final part of my code, I am > understanding that it should be re-adding the events to the buttons, > but it isn't as far as I can tell. I am wondering if someone can tell > me how I should be doing this?
![http://testing.solderpoint.com/habitatregina/img/builds_loader.gif"](http://testing.solderpoint.com/habitatregina/img/builds_loader.gif"){kind=link}