Mini AHAH Or A Taste Of AJAX
| As suggested by RafaelAlvarez in the discussion, I've copied the showcase from the munich.pm website now that twiki.org is running TWiki4. |
- Some simple ways to preview TML without going through an edit cycle
- A topic selector form, similar to the "jump box" in PatternSkin
, but allowing to select from existing webs/topics in dropdown menues
- A topic explorer, very similar to the explorer known from MS Windows
- Another explorer, this time allowing to selectively collect entries from TWikiVariables
- A form and a table to display - and even change TWiki session variables without saving a topic
Full Table of Contents
A Word of Warning
This is a prototype, stuff hacked together in some evenings, just as a motivation whyXmlHTTPRequest is an interesting thing. There's still discussion in TWikiAjaxFramework about the interface, about which javascript library to use, etc, and these discussion should remain in that topic. Here is a showroom where you are kindly asked not to touch things and not to look too closely at the implementation. We might make some of the features shown here usable from other parts of twiki.org as well.
At some point in time the showcases here will be moved towards the API which will eventually drop out of the discussions in TWikiAjaxFramework. Or maybe not, because it might be pretty irrelevant how this particular topic is implemented as long as you know what you can do with AHAH or AJAX.
At some earlier point it may be advisable to split this topic in the showroom, the technical section, and the templates, or even split the templates (performance issue). But not right now - I ask for your patience.
Finally, the functions have been tested with IE 6.0 and Firefox 1.5 only, out of sheer lazyness on my side. They may wreak havoc on visitors using Opera, or Konqueror, though I'd expect them to fail rather harmlessly. Again, the fine print will be done in the framework of TWikiAjaxFramework.
Showroom
Preview arbitrary TML Without Leaving The Page
This can be used to test some TWiki Markup Language (TML), or to simply inspect a TWiki variable without having to go through a complete view/edit/save/view cycle. Available in three flavours: an one-line input field, a text area, and a real sandbox. All these share some shortcoming: The TWiki Variables describing the current web and topic (e.g. TOPIC) are showing a "wrong" value (so searches etc. are having the wrong defaults), and a "Save" function is not implemented (though the latter would be possible).One Line Input Field
Enter Text or TML. Try, for example,[[MendedDrum]] or %SEARCH{"Topic Explorer"}%.
To use in your own topic, say:
%INCLUDE{"Codev.MiniAhah" section="tmlinput"}%
Multiline Text Area
Use this one for trying bullet lists, table layouts, ... To use in your own topic, say:%INCLUDE{"Codev.MiniAhah" section="tmltextarea"}%
A Sandbox Within A Topic
With a sandbox like this, guests can try editing and formatting without having to think about topic names. No trace will be left on the server side. To use in your own topic, say:%INCLUDE{"Codev.MiniAhah" section="tmlsandbox"}%
A Dynamic Topic Selector Form
This is similar to the "Jump" box in pattern skin,
but allows selecting from existing webs and topics instead of having to guess.
Clicking on the 
will convert the
text boxes to dropdown menues, which will be filled with values only on request,
but cached for quick access.
Be careful when using this to select topics from a web with many
topics, this may take quite a while.
To use in your own topic, say:
%INCLUDE{"Codev.MiniAhah" section="topicselector"}%
A Dynamic Topic Explorer
This is similar to the Windows Explorer. Clicking on the will
expand the webs, or topics, respectively.
Be careful when using this for webs with many
topics, this may take quite a while.
|
 (TWiki) |
%INCLUDE{"Codev.MiniAhah" section="topicexplorer"}%
TWikiVariables Explorer
Is TWikiVariables too fat for you? Mind you, it has ~150kB, includes lots of stuff and - per design - expands almost every conceivable variable. Then read only the parts you really need. A drawback is that the links to "Related" variables are broken. As broken as if you access individual variable topics like VarACTIVATEDPLUGINS, and for a similar reason. |
(All TWiki Variables) |
%INCLUDE{"Codev.MiniAhah" section="twikivarexplorer"}%
Conveniently Getting/Setting Session Variables
Usually, to set a session variable you need to edit and save a topic. This is inconvenient, as I'd dare to say, since topics live longer than sessions (most of the time) and unless you remember to update the topic at the end of the session, everyone reading this topic will get the session variable thrust upon him.Set Using Key-Value Boxes
Enter the name of a session variable (for example_SESSION_REMOTE_ADDR) to read its value, set if you want.
To use in your own topic, say:
%INCLUDE{"Codev.MiniAhah" section="sessionvariable"}%
A Table of Frequently Used Session Variables
Set your Session variables: To use in your own topic, say:%INCLUDE{"Codev.MiniAhah" section="sessionvariabletable"}%
Preparation for Usage in Your Topics
- Create the three topics MiniAhah, MiniAhahSelector and MiniAhahParam, either by copying the contents from this web or by expanding the zip files which I have still been to lazy to attach in the beginning and probably won't do at all because of the issues raised in the discussion.
- Include the following either in one of your templates, or only in the text those pages where you want to use the examples (you'll see it in raw or edit mode at the top of this topic):
<script type="text/javascript"><!-- var ahah_web = '%WEB%'; var ahah_topic_type = 'input'; // --> </script>
<script type="text/javascript" src="https://twiki.org/p/pub/Codev/MiniAhah/ahah.js"></script>
Technical Section
- Purpose of this topic
- Short of a AJAX Framework, let's have a look what can be done with today's (TWiki4) functions, by leveraging a technique called "AHAH". AHAH (Asynchronous HTML and HTTP), also known as JAH (Javascript Asynchronous HTML) is sort of a lightweight AJAX (Asynchronous HTML And XML).
- AHAH References
- AHAH at Wikipedia
AHAH at Microformats
Comparison to Other TWiki Extensions
Today methods to expand or collapse parts of a HTML page with Javascript are quite frequently found in the internet. For TWiki, there are several extensions which help authors doing this. So, why yet another technique? Let's compare with some of those: In contrast to TWiki:Plugins.TwistyContrib,
TWiki:Plugins.RenderListPlugin, TWiki:Plugins.TooltipPlugin and the
like, with AHAH the "expandable" data are not fetched in advance.
They're only fetched from the server when unfolding is requested,
using the AJAXoid XMLHttpRequest(). If you are doing many unfolds,
the "traditional" CSS folding techniques are faster because only one
request to the server is required - however, even then the perceived
speed may be better with AHAH, where the first screen is readily
available.
Comparing to JSPopupPlugin, this extension is not a plugin.
It does not define a new TWiki tag to the author. Instead, it is
targeted at TWiki power users who want to define blocks (see below)
for ready-to-use dynamic content.
Overview
To dynamically read things like a%TOPICLIST% into a TWiki
topic, we need a possibility to 1) retrieve that information from the
server, and 2) display the list in the browser.
The first part is possible using Javascript: Modern browsers support a
function XMLHttpRequest, which allows to pull (XML) contents via
HTTP from a web server into a Javascript variable. As so often,
Microsoft's implementation is different from the rest of the world, but
there are plenty of explanations and examples in the internet how to
cope with that.
For the second part, we will use the DOM property innerHTML, which
describes the complete contents of a HTML element. We are not going
to bother with parsing the results from XMLHttpRequest (that is, by
the way, the difference between AJAX and AHAH). We simply replace
the contents of an element which has been present in a topic by the
contents from the server. Fortunately TWiki usually throws out valid
XHTML, which is valid XML as well.
The Gory Details
Formulating the XMLHttpRequest
The central driver routine XMLHttpRequest isn't called directly from event handlers or HTML code.
There's always wrappers in between.
In a TWiki topic, there are two main possibilities to define these wrappers: - As an
actionattribute of aformelement:<form action='javascript:my_wrapper(...)'> - As an event handler, typically for
onsubmit,onchange,onclickevents:<img src='...' onclick='my_wrapper(...)'>
XMLHttpRequest call is the target URL of the request.
We are using one of two specially crafted TWiki topics as target URLs as "AHAH drivers",
both having just one line: %TOPIC%Selector and %TOPIC%Param.
Do not, repeat: Do not edit these topics unless you know very exactly what you're doing.
If viewed directly in a browser, the first one of them seems to be an exact copy of this topic,
whereas the second looks pretty empty. I'll describe them in more detail later.
Both the AHAH driver topics expect parameters: The section describes a section (sic)
of a TWiki topic describing the HTML to be returned as a result from the request, and
(arbitrarily) three parameters called miniahah1, miniahah2, and miniahah3.
Only the first two are being used in the showroom today.
Formatting the Result
In the case of %TOPIC%Selector, the result of theXMLHttpRequest is
formatted as a section in a TWiki topic - hereby able to use all TWiki
formatting features. The section is pulled in with %INCLUDE% ,
which allows to pass parameters as of TWiki4. And that's the trick: The
main function of %TOPIC%Selector is to convert the URL parameters it
receives from the XMLHttpRequest call to TWiki variables. The whole
topic reads (linefeeds added for easier reading):
%INCLUDE{"MiniAHAH" section="%URLPARAM{section}%"
MINIAHAH1="%URLPARAM{miniahah1}%"
MINIAHAH2="%URLPARAM{miniahah2}%"
MINIAHAH3="%URLPARAM{miniahah3}%" }%
Easy, isn't it?
%TOPIC%Param is even simpler:
%URLPARAM{miniahah1}%%URLPARAM{miniahah2}%%URLPARAM{miniahah3}%
...so all it does is to let TWiki process whatever is passed as parameters. That's
how the TML previewers work - and that's all the magic needed.
To Do
- Make the documentation comprehensive, especially regarding the templates, and comprehensible (feedback welcome
). Documenting the javascript library isn't top priority since this part will tentatively vanish in favour of TWikiAjaxFramework.
- Split the various use case templates, mainly but not only for performance reasons. Today rendering MiniAhah for just one of the tiny templates always expands quite a lot of stuff, including
%WEBLIST%variables and searches.- This requires adding a
templatetopicparameter to the javascript routines in addition to thesectionthey are responding to today.
- This requires adding a
- Converge the javascript library, at least the javascript API, with TWikiAjaxFramework.
- Add more documentation / programmers guides about shuffling variables from (server side) TWiki to (client side) javascript and back again, and on quoting and escaping quotes in format strings. This is documented elsewhere, but is needed readily at hand when hacking own templates.
Mini AHAH Templates
The following templates implement what you can see in the demonstrations above. They will look strange (at least) when viewed they bear no useful function, and only minimal effort has been taken to maintain thie section as valid (X)HTML.Templates for the TML Previewer
TML Single Line Template
TML Textarea Template
Sandbox Template
Templates for the Topic Selector Form
Template topicselector
This is the template for the dynamic topic selector above.
Templates for the Topic Explorer
|
(TWiki) |
|
(TWiki) |
 |
(TWiki)
|
|
 |
[[.WebHome][]] |
Templates for the TWikiVariables Explorer
|
(All TWiki Variables) |
|
(All TWiki Variables) |
|
(All TWiki Variables) |
%MINIAHAH1%
Installed Plugins
TWiki Variables
Reference Manual Welcome to TWiki
The place to learn about TWiki features and perform TWiki system maintenance.
TWiki® is a flexible, powerful, secure, yet simple Enterprise Wiki and Web Application Platform. Use TWiki for team collaboration, project management, document management, as a knowledge base and more on an intranet or on the Internet.
TWiki Reference
TWiki Tip of the Day
Escaping TWiki rendering
Use the verbatim tag to surround code excerpts and other formatted text with verbatim and /verbatim... Read on
Use the verbatim tag to surround code excerpts and other formatted text with verbatim and /verbatim... Read on
TWiki Web Utilities
- WebSearch - simple search
- WebSearchAdvanced - advanced search
- WebTopicList - all topics
- WebChanges - recent topic changes
- WebNotify - subscribe to e-mail alerts
- RSS feed, ATOM feed of topic changes
- Web Statistics
- WebPreferences - preferences of this web
System Maintenance
Disclaimer
- TWiki® is a registered trademarks of TWiki founder Peter Thoeny, TWiki.org. The TWiki logo and the "Collaborate with TWiki" tagline are trademarks of Peter Thoeny.
- Twiki (with a lower case "w") is a robot character from the Buck Rogers™ in the 25th Century TV series. TWiki (with an upper case "W") is not affiliated with the Dille Family Trust, the registered trademark owner of the Buck Rogers name.
- TWiki is developed as Free Software under the GNU/GPL.
- Get the latest TWiki release from TWiki.org.
Templates for Accessing Session Variables
=
=
Session variable '' has been seet to ''
-- Contributors: HaraldJoerg
Discussion
Just because TWikiAjaxFramework is far away doesn't mean we can't do anything nifty withXMLHttpRequest()...
-- HaraldJoerg - 16 May 2006
hey Harald - did you see the JSPopupPlugin i published a week or 2 ago?
-- SvenDowideit - 17 May 2006
Yes, I know that plugin, and I think that JSPopupPlugin and MiniAhah can live side by side.
The differences I can see at the moment are: - Mini AHAH needs TWikiRelease04x00. I've made another attempt to Cairofy it and failed.
- Mini AHAH is not a plugin. It consists of just two topics and a tiny (<50 lines) Javascript file.
- With Mini AHAH, No new tag is provided. There is no need for Dojo or
restscripts, justviewwill do - and of courseeditandsaveif one wants to provide new use cases. - Mini AHAH does not allow arbitrary text to be displayed/fetched by any topic author. It is rather intended to allow a TWiki admin to install some ready-to-use helpers (see the examples). I could, for example, fancy a Mini-AHAH-based TWikiDocBrowser which would, on request, expand links to topics collected by category, by tag, by backlink.... all in one page, without fetching megabytes of HTML.
- Mini AHAH needs, and is able to have multiple expanded sections in one topic. It can, however, only handle one gimmick of a particular type (i.e. you can't have the topic explorer in both the left bar and the main text).
- Mini AHAH does unconditionally cache whatever it has expanded during the current visit. So re-expanding a collapsed web with the topic explorer is dead fast, but will miss topics which have been created since it fetched the list.
.
-- HaraldJoerg - 27 May 2006
Harald, I quickly glanced at your showcases, this is absolutely fantastic! And performance is acceptable too. The TWikiVariables Explorer is very nice.
I wish we had the TWikiAppPackage finalized so that this could be packaged and made available properly. Until then, how about packaging it the recommended way as an AddOnPackage? Possibly better to package for distribution in the TWiki web instead of a Tools web (that name might be taken (in fact at my previous employer it was taken by a name of a team), and to avoid cluttering the web list.)
Cool stuff!
-- PeterThoeny - 26 May 2006 - 23:11
Before packaging this as is, I would prefer to come to a joint solution to TWikiAjaxFramework. We need to work out the collaboration between plugins and skin templates.
-- ArthurClemens - 27 May 2006
About packaging: Providing a zip for the files is easily done, but I'm not yet sure enough about the design. I've considered putting it into my TWiki web, but the templates section is intended to be customized (or enhanced) by TML hackers, and I'd prefer the TWiki web to be more or less readonly. An alternative implementation which would allow for easy extensibility would yield a proliferation of topics. On the other hand one might say that the TWiki web is already sufficiently cluttered so that a dozen or so more topics won't hurt.
Arthur: I have to admit that I don't understand your point. The current implementation is neither a plugin nor a skin template, nor does it need them. My ahah_retrieve function is almost identical to your desired description of loadIntoElement(url, elementId) (from TWikiAjaxFramework), only that it has a third parameter to allow for a cache key, which I consider essential for some of my use cases.
But of course, having access to alternate skins for dynamically retrieved content is indeed a nice (or even necessary) feature. In my current implementation the collaboration is as simple as can be: The skin is just a parameter which is passed to the "AHAH server topics" (two topics of one line each).
But hey - twiki.org is now on TWiki4. I can shove the application to twiki.org and create some topics like TWiki.TWikiVariablesExplorer and the like. Or maybe even better a TWikiTagExplorer, just to provide something new.
-- HaraldJoerg - 27 May 2006
Harald, I think it is really valuable what you've created. My concern was about Peter's comment about creating a AddOnPackage, while I hope to get this functionality into the core distribution. For that I am working on the specs.
-- ArthurClemens - 28 May 2006
Arthur - so we have the same concerns regarding packaging it right now. API discussion is taking place in TWikiAjaxFramework. Maybe I'll just describe some prototypes here within the next week.
-- HaraldJoerg - 30 May 2006
If this coud be made a Contrib or an AddOn, then it could evolve independently of the core, much in the same way as the Core plugins (EditTablePlugin, for example). And it can be published for - Yes, this is what I was thinking of. -- ArthurClemens - 30 May 2006
-- RafaelAlvarez - 30 May 2006
Artur wrote:
> My concern was about Peter's comment about creating a AddOnPackage, while I hope to get this functionality into the core distribution.Yes, that is actually a better idea, AJAX functionality should be in the core by default. Since we are early in TWiki 4 deployment it would be nice to make it available also to existing TWiki 4 installs. -- PeterThoeny - 01 Jun 2006 Thanks HaraldJoerg for putting the showcase here
-- RafaelAlvarez - 01 Jun 2006
Thank you Harald and Arthur for working on this, this is very
-- PeterThoeny - 01 Jun 2006
Stupid me broke MiniAhah when implementing the spec change that including a non-existing section should return nothing instead of the complete text in Bugs:Item3170 (Nov 2006). It should work again. I replaced 30 occurrences of ?skin=text;section to ?skin=text;asection in this topic, and %URLPARAM{section} to %URLPARAM{asection} in MiniAhahSelector.
Many thanks to Francisco J. Picatto Armando, who prodded me via Mail, and apologies for the inconvenience.
-- HaraldJoerg - 09 Feb 2007
Topic revision: r4 - 2015-08-21 - HaraldJoerg
Site map
Blog web
Create New Topic
Index
Search
Advanced search
My topics of interest
Changes
Major changes only
All tags
Notifications
RSS Feed
Statistics
Preferences
Community 
Readme first
Developers News
How you can help
Community roles
#twiki IRC
Lima Release
Bugs Changes
Categories 
Account 
Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.