hey matt - the problem was mootools selectors weren´t working for me. i think this is because in your simple example you have a nice well formed div - because your data is just simple piece of html. however i am actually loading a page and i get all that headers stuff - i am assuming this is the reason that the mootools selectors fails in my case. cheers.b
On May 2, 10:24 am, "Matthew Hazlett" <[email protected]> wrote: > It is similar, but I used mootools selectors and that was what you said you > wanted to do in your post. > > -----Original Message----- > From: [email protected] > > [mailto:[email protected]] On Behalf Of brook > Sent: Sunday, May 02, 2010 10:08 AM > To: MooTools Users > Subject: [Moo] Re: ajax and the dom > > 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 > uphttp://expeditionsurfcharters.com/ in almost the exact same way. if > you look > athttp://expeditionsurfcharters.com/js/mootools/Menu.js andhttp://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 > } > });
