hi everyone thanks for the responses. before jumping into my replies ill ask a question that might clear up everything..
the MooTools docs (http://mootools.net/docs/core/Request/Request.HTML) says that onSuccess has the signature: onSuccess(responseTree, responseElements, responseHTML, responseJavaScript) i had hoped that meant (see the MenuHandler class pasted in below) i could do this onSuccess: function(tree,elms,pg) { this.page = pg ... } but "elms", "pg" (and if i put a third var in there for the response javascript) all come out null or undefined. only "tree" has a value. am i doing something dumb? is this not how you access the onSuccess arguments? i am assuming that "responseHTML" is what i am looking for. how come its coming back undefined (again see the MenuHandler class below)? on to the responses --- chone: i´ll paste in the complete class below. i dont have a working demo of that class (that i am willing to show) but i set up http://expeditionsurfcharters.com/ in almost the exact same way. if you look at http://expeditionsurfcharters.com/js/mootools/Menu.js and http://expeditionsurfcharters.com/js/expeditionsurfcharters.js you´ll see how it works but again the class i am pasting below is an updated (hopefully smarter and definitely more portable) version of Menu.js matt: i may be missing something but i think more or less your example is equivalent to what i am already doing. you write yours to a hidden div and i create a div and put it in there. but either way i am inserting into a div everything -- here "everything" means doctype declarations - meta tags - scripts - css ... its all this stuff that is causing me concern. steve: can you write a data into and iframe? by this i mean, i know i can do this <iframe src="http://..";.> but is it possible to do something like <iframe data=' htmlstring"> where htmlstring is a string with all the html included into the page. the class i am using is below if you have a smart way to get that into an iframe let me know last but not least... virtualgadjo: this is a really nice little trick i hadn´t thought of before. i will definitely use it on sites in the future. for the particular site i am working on this seems a little annoying though. apart from a contact form there is no other php. it seems silly to me that i have the entire set of data in a variable called page and i cant just go page.getElement('...'). there must be a nice way to handle this purely with javascript that doesnt involve some odd trickery. for this page i think i would rather stick with what i am already doing (writing everything into a div and parsing it in a silly way) than start adding php around everything. ...... thanks again everyone - chone and whoever else cares, the menuhandler class is below. it occurs to me that i need to include my eventmanager class too. clearly this could be written without the eventmanager class but i use it all the time as it makes my life easier when unloading pages - removing listeners etc.. a quick note: i´ve got the words "public" and "internal" in comments down there - "public" would be public and "internal" would be private if had the options to declare them as such. also i declare all the useful (what would be public) variables at the beginning... this just helps me keep stuff straight in my head. /*** * * Menu Handler Class: * - a simple class that simply blocks the default of <a> (for local pages), then loads the linked page - returned as 'page'. * - the function addLinks may be called repeatedly. so only one instance of the class in necesary. * - if a 'group' is given in load pages, the listeners can later be removed with the pullEvents() function from the EventManager Class * ***/ var MenuHandler = new Class({ pages:null, url: null, page: null, error: null, request: null, currentElement: null, currentIndex: null, currentRef: null, currentGroup: null, overElement: null, overIndex: null, overRef: null, overGroup: null, // // initialize // Implements: [Options,Events,EventManager], options: { errorClass: 'load_error', masterGroup: 'master', initial_index: 0 }, initialize: function(lnks,options){ this.setOptions(options); if ($chk(lnks)) { this.pages = $$(lnks) this.addLinks(this.pages,this.options.masterGroup); this.setCurrent(this.options.initial_index,this.options.masterGroup) this.page = document.body } }, // // public // addLinks: function(lnks,grp){ $$(lnks).each(function(elm,index){ this.addlink(elm,index,grp) }.bind(this)) }, setCurrent: function(index,grp){ this.currentElement = this.pages[index] this.currentIndex = index this.currentRef = this.currentElement.get('href') this.currentGroup = grp }, // // internal // addlink: function(elm,index,grp){ this.pushEvents(elm,'click',function(e){ if (!elm.get('href').contains('http://')){ e.stop() } e.href = elm.get('href') this.clicked(e,elm,index,grp) }.bind(this),grp) this.pushEvents(elm,'mouseover',function(e){ this.overElement = elm this.overIndex = index this.overRef = elm.get('href') this.overGroup = grp this.fireEvent('over') }.bind(this),grp) this.pushEvents(elm,'mouseout',function(e){ this.overElement = null this.overIndex = null this.overRef = null this.overGroup = null this.fireEvent('out') }.bind(this),grp) }, clicked: function(e,elm,index,grp){ this.request = e.href this.fireEvent("pageRequest") var req = new Request({ url: e.href, onSuccess: function(htmlstring) { var newpage = new Element('div',{id: 'ajaxholder'}) this.page = newpage.set('html',htmlstring) this.url = this.request this.currentElement = elm this.currentIndex = index this.currentRef = elm.get('href') this.currentGroup = grp this.error = null, this.fireEvent('pageLoaded') }.bind(this), onFailure: function(err) { var newpage = new Element('div',{'class': this.options.errorClass}) this.error = newpage.set('html','LOAD_ERROR: :'+this.request) this.fireEvent('loadError') }.bind(this) }) req.send() } }); and the event manager class // // EventManager // var EventManager = new Class({ events: [], timers: [], delays: [], // // events // pushEvents: function(obj,typ,f,grp) { var ehash = new Hash({ object: obj, type: typ, func: f, group: grp }) this.events.push(ehash) document.id(obj).addEvent(typ,f) return ehash }, pullEvent: function(ehsh){ ehsh.object.removeEvent(ehsh.type,ehsh.func) ehsh = null }, pullEvents: function(grp){ if ($chk(grp)){ this.events.each(function(ehsh){ if (ehsh.group == grp) this.pullEvent(ehsh) }.bind(this)) } else { this.events.each(function(ehsh){ this.pullEvent(ehsh) }.bind(this)) } }, // // periodicals // pushTimers: function(f,dur,bnd,grp){ if ($chk(bnd)) var tmr = f.periodical(dur,bnd) else var tmr = f.periodical(dur) var thash = new Hash({ timer: tmr, group: grp }) this.timers.push(thash) return thash }, pullTimer: function(thsh){ $clear(thsh.timer) thsh = null }, pullTimers: function(grp){ if ($chk(grp)){ this.timers.each(function(thsh){ if (thsh.group == grp) this.pullTimer(thsh) }.bind(this)) } else { this.timers.each(function(thsh){ this.pullTimer(thsh) }.bind(this)) } }, // // delays // pushDelays: function(f,dur,bnd,grp){ if ($chk(bnd)) var dly = f.delay(dur,bnd) else var dly = f.delay(dur) var dhash = new Hash({ delay: dly, group: grp }) this.delays.push(dhash) return dhash }, pullDelay: function(dhsh){ $clear(dhsh.delay) dhsh = null }, pullDelays: function(grp){ if ($chk(grp)){ this.delays.each(function(dhsh){ if (dhsh.group == grp) this.pullDelay(dhsh) }.bind(this)) } else { this.delays.each(function(dhsh){ this.pullTimer(dhsh) }.bind(this)) } }, // // // destroy: function(){ this.pullEvents() this.pullTimers() this.pullDelays() events = null timers = null delays = null } });
