Tags:
ajax2Add my vote for this tag component1Add my vote for this tag create new tag
, view all tags

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.

The capability of TWiki4 regarding dynamic retrieval of contents can be shown with a couple of simple examples:

  1. Some simple ways to preview TML without going through an edit cycle Read more
  2. A topic selector form, similar to the "jump box" in PatternSkin, but allowing to select from existing webs/topics in dropdown menues Read more
  3. A topic explorer, very similar to the explorer known from MS Windows Read more
  4. Another explorer, this time allowing to selectively collect entries from TWikiVariables Read more
  5. A form and a table to display - and even change TWiki session variables without saving a topic Read more
Feel free to create your own!


Full Table of Contents

A Word of Warning

This is a prototype, stuff hacked together in some evenings, just as a motivation why XmlHTTPRequest 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"}%.

TML Input:
Result:

To use in your own topic, say: %INCLUDE{"Codev.MiniAhah" section="tmlinput"}%

Multiline Text Area

Use this one for trying bullet lists, table layouts, ...

TML Input:
Result:

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 Plus 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.

Select web and topic: Plus Plus

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 Plus will expand the webs, or topics, respectively. Be careful when using this for webs with many topics, this may take quite a while.

Plus Home (TWiki)

To use in your own topic, say: %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.

Plus (All TWiki Variables)

To use in your own topic, say: %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.

Name: Read more

To use in your own topic, say: %INCLUDE{"Codev.MiniAhah" section="sessionvariable"}%

A Table of Frequently Used Session Variables

Set your Session variables:

SKIN: DONE (you need to reload the page to see the effect)
EDITBOXHEIGHT: DONE  
EDITBOXWIDTH: DONE  
LANGUAGE: DONE plus I18N is not enabled

To use in your own topic, say: %INCLUDE{"Codev.MiniAhah" section="sessionvariabletable"}%

Preparation for Usage in Your Topics

  1. 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.
  2. 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="http://twiki.org/p/pub/Codev/MiniAhah/ahah.js"></script>

See the demonstrations above for how to use the particular functions. You don't have to stick with the functions given here. Take them just as a examples, extend as you like.


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:

  1. As an action attribute of a form element: <form action='javascript:my_wrapper(...)'>
  2. As an event handler, typically for onsubmit, onchange, onclick events: <img src='...' onclick='my_wrapper(...)'&gt
Both are used in the examples above.

The most important part of the 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 the XMLHttpRequest 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 smile ). 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 templatetopic parameter to the javascript routines in addition to the section they are responding to today.
  • 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 Input:
Result:

TML Textarea Template

TML Input:
Result:

Sandbox Template


Templates for the Topic Selector Form

Template topicselector

This is the template for the dynamic topic selector above.

Select web and topic: Plus Plus

Plus

Minus

Plus

Minus

Templates for the Topic Explorer

Plus Home (TWiki)

Plus Home (TWiki)

Minus Home (TWiki)

Plus Folder %MINIAHAH1%

Minus Folder %MINIAHAH1%

Templates for the TWikiVariables Explorer

Plus (All TWiki Variables)

Plus (All TWiki Variables)

Minus (All TWiki Variables)

Plus %MINIAHAH1%

Minus %MINIAHAH1%

Warning: Can't find topic TWiki06x00.MINIAHAH1

Templates for Accessing Session Variables

Name: Read more

= DONE

= DONE

SKIN: DONE (you need to reload the page to see the effect)
EDITBOXHEIGHT: DONE  
EDITBOXWIDTH: DONE  
LANGUAGE: DONE plus I18N is not enabled

Session variable '%MINIAHAH1%' has been seet to '%MINIAHAH2%'

-- Contributors: HaraldJoerg

Discussion

Just because TWikiAjaxFramework is far away doesn't mean we can't do anything nifty with XMLHttpRequest()...

-- 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 rest scripts, just view will do - and of course edit and save if 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.
And, with regard to the current implementations of both:
  • 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 - 17 May 2006

I've uploaded a showcase to http://munich.pm.org/cgi-bin/view/Tools/MiniAHAH.

-- 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! 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 DakarTWiki04 without any risk.

  • Yes, this is what I was thinking of. -- ArthurClemens - 30 May 2006

-- RafaelAlvarez - 30 May 2006

Now that twiki.org is running TWikiRelease04x00, can you update the topic to see this working? The showcase is quite impresive and it could be good to have it "on-site" smile

-- 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 smile

-- RafaelAlvarez - 01 Jun 2006

Thank you Harald and Arthur for working on this, this is very cool!

-- 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 attachments
I Attachment History Action Size Date Who Comment
JavaScriptjs ahah.js r1 manage 1.9 K 2006-05-31 - 21:04 HaraldJoerg  
Edit | Attach | Watch | Print version | History: r22 < r21 < r20 < r19 < r18 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r22 - 2017-10-06 - HaraldJoerg
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.