Prototype??™s Ajax.Updater
(as discussed in Chapter 5) does exactly this:
Help = {
open : function() {
$(document.body).addClassName('with-help');
},
close : function() {
$(document.body).removeClassName('with-help');
},
CHAPTER 9 n A DYNAMIC HELP SYSTEM 197
request : function(url, callback) {
new Ajax.Updater('help', url, {
method: 'get',
onComplete: callback.bind(this)
});
}
};
The new request() method takes a URL and a callback function, which will be called
when the Ajax request has completed successfully. The body of the function contains an
Ajax.Updater call, which updates the contents of the element with ID help, which in this case
is the help sidebar, and specifies that the passed callback should be executed on completion.
Notice that you??™re using Prototype??™s bind() method to ensure that the this keyword will point
to the Help controller object within the callback.
When you click a help link you want to trigger the request to get a certain URL. And when
the request has got the help content, you want to reveal the sidebar. So let??™s wrap that up in
another controller method:
Help = {
openWith : function(url) {
this.request(url, function() {
if ($(document.body).hasClassName('with-help') == false) this.open();
});
},
open : function() {
$(document.body).addClassName('with-help');
},
close : function() {
$(document.body).removeClassName('with-help');
},
request : function(url, callback) {
new Ajax.
Pages:
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277