In Rails, as
demonstrated previously, you can use request.xhr? to find out whether the request came via
Ajax, but it??™s easily replicated if you aren??™t using Rails. Under the hood, the request.xhr? method
simply checks whether the X-Requested-With HTTP header is 'XMLHttpRequest'. Prototype??™s Ajax
routines append this header to all Ajax requests by default.
The help_sidebar layout is pretty simple. You??™ll notice that it doesn??™t contain a whole
HTML document; it??™s just a fragment, which is what you need if you want to update just part
of an existing page. You also need to add a close link that can used to close the sidebar:
X
<%= yield %>
Test the page again and you??™ll see a much better effect. The layout now remains intact
when the sidebar is open. You need to make the close button work by adding another rule to
the Event.addBehavior() block:
Event.addBehavior({
'a[rel=help]:click' : function() {
Help.openWith(this.href);
return false;
},
'#close_help a:click' : function() {
Help.close();
return false;
}
});
Implementing a Loader
Although the feature is now working, it??™s always a good idea to implement a loader to give the
user some feedback if the help content is taking some time to load. A nice simple approach to
this is to create a global loader that responds to all Ajax requests automatically. Fortunately,
Prototype makes this really simple.
Pages:
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280