---+!! Mini AHAH Or A Taste Of AJAX <!-- * Set PERCENT = (%) --> <script type="text/javascript"><!-- var ahah_web = '%WEB%'; var ahah_topic_type = 'input'; // --> </script> <script type="text/javascript" src="%ATTACHURL%/ahah.js"></script> 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 [[#PreviewTML][%ICON{more}%]] 1 A topic selector form, similar to the "jump box" in [[TWiki:Plugins.PatternSkinPlugin][PatternSkin]], but allowing to select from _existing_ webs/topics in dropdown menues [[#TopicSelector][%ICON{more}%]] 1 A topic explorer, very similar to the explorer known from MS Windows [[#TopicExplorer][%ICON{more}%]] 1 Another explorer, this time allowing to selectively collect entries from TWiki.TWikiVariables [[#VariableExplorer][%ICON{more}%]] 1 A form and a table to display - and even _change_ TWiki session variables without saving a topic [[#SessionVars][%ICON{more}%]] Feel free to create your own! --- *Full Table of Contents* %TOC% ---++ Showroom #PreviewTML ---+++ 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. [[TWiki.VarTOPIC][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, TML, or TWiki.TWikiVariables. Try, for example, =[<nop>[MendedDrum]]= or =%<nop>SEARCH{"Topic Explorer"}%=. %INCLUDE{"%TOPIC%" section="tmlinput"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="tmlinput"}%= ---++++ Multiline Text Area Use this one for trying bullet lists, table layouts, ... %INCLUDE{"%TOPIC%" section="tmltextarea"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" 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. %INCLUDE{"%TOPIC%" section="tmlsandbox"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="tmlsandbox"}%= --- #TopicSelector ---+++ A Dynamic Topic Selector Form This is similar to the "Jump" box in [[TWiki:Plugins.PatternSkin][pattern skin]], but allows selecting from existing webs and topics instead of having to guess. Clicking on the %ICON{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. %INCLUDE{"%TOPIC%" section="topicselector"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="topicselector"}%= --- #TopicExplorer ---+++ A Dynamic Topic Explorer This is similar to the Windows Explorer. Clicking on the %ICON{plus}% will expand the webs, or topics, respectively. Be careful when using this for webs with many topics, this may take quite a while. %INCLUDE{"%TOPIC%" section="topicexplorer"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="topicexplorer"}%= --- #VariableExplorer ---+++ %TWIKIWEB%.TWikiVariables Explorer Is %TWIKIWEB%.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 TWiki.VarACTIVATEDPLUGINS, and for a similar reason. %INCLUDE{"%TOPIC%" section="twikivarexplorer"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="twikivarexplorer"}%= --- #SessionVars ---+++ 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. %INCLUDE{"%TOPIC%" section="sessionvariable"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="sessionvariable"}%= ---++++ A Table of Frequently Used Session Variables *Set your Session variables:* %INCLUDE{"%TOPIC%" section="sessionvariabletable"}% To use in your own topic, say: =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="sessionvariabletable"}%= ---+++ Preparation for Usage in Your Topics 1 Create the two topics MiniAHAH and MiniAHAHSelector, either by copying the contents from this web or by expanding the zip files which I have still been to lazy to attach. 1 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): <div> <verbatim> <script type="text/javascript"><!-- var ahah_web = '%WEB%'; var ahah_topic_type = 'input'; // --> </script> </verbatim> =<script type="text/javascript" src="%ATTACHURL%/ahah.js"></script>= </div> 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 [[TWiki:Codev.TWikiAjaxFramework][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: [[http://en.wikipedia.org/wiki/AHAH][Wikipedia]]%BR%[[http://microformats.org/wiki/rest/ahah][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 Plugins.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 =%<nop>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. 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= ---++++ Formatting the Result --- ---++ 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 %STARTSECTION{tmlinput}% <form name="miniahah_tmlinput" action="#" onsubmit="ahah_retrieve('miniahah_tmlinput_parsed','%TOPIC%Param?skin=text;miniahah1='+encodeURIComponent(this.elements['tml'].value),'');return false"> <div> | *TML Input:* | <input name="tml" size="40" /> <input type="submit" value="Go!"/> | | *Result:* | <div id="miniahah_tmlinput_parsed"></div> | </div> </form> %ENDSECTION{tmlinput}% ---++++ TML Textarea Template %STARTSECTION{tmltextarea}% <form name="miniahah_tmltextarea" action="#" onsubmit="ahah_retrieve('miniahah_tmltextarea_parsed','%TOPIC%Param?skin=text;miniahah1='+encodeURIComponent(this.elements['tml'].value,''));return false"> <div> | *TML Input:* | <textarea rows="3" cols="60" name="tml"></textarea> <input type="submit" value="Go!"/> | | *Result:* | <div id="miniahah_tmltextarea_parsed"></div> | </div> </form> %ENDSECTION{tmltextarea}% ---++++ Sandbox Template %STARTSECTION{tmlsandbox}% <form name="miniahah_tmlsandbox" action="#" onsubmit="return false"> <div id="miniahah_sandbox_ta"> <textarea rows="%EDITBOXHEIGHT%" cols="%EDITBOXWIDTH%" style="%EDITBOXSTYLE%" name="tml"></textarea>%BR% <button type="button" value="View" onclick="document.getElementById('miniahah_sandbox_va').setAttribute('style','width:99%');document.getElementById('miniahah_sandbox_ta').setAttribute('style','display:none');ahah_retrieve('miniahah_sandbox_view','%TOPIC%Param?miniahah1='+encodeURIComponent(document.forms['miniahah_tmlsandbox']['tml'].value,''))">Preview</button> </div> <div id="miniahah_sandbox_va" style="display:none"> <div id="miniahah_sandbox_view" style="border: 1px solid black;padding: 2px"></div> <button type="button" value="Edit" onclick="document.getElementById('miniahah_sandbox_va').setAttribute('style','display:none');document.getElementById('miniahah_sandbox_ta').setAttribute('style','%EDITBOXSTYLE');">Edit</button> </div> </form> %ENDSECTION{tmlsandbox}% ---+++ Templates for the Topic Selector Form ---++++ Template =topicselector= This is the template for the dynamic topic selector above. %STARTSECTION{topicselector}% <form action="%SCRIPTURL{view}%"> <div> Select web and topic: <span id="miniahah_ts_web">%INCLUDE{"%TOPIC%" section="ts_inputweb"}%</span> <span id="miniahah_ts_topic">%INCLUDE{"%TOPIC%" section="ts_inputtopic"}%</span> <input type="submit" value="Go!"/> </div> </form> %ENDSECTION{topicselector}% <form action="#"> <div> %STARTSECTION{ts_inputweb}% <a href="javascript:ahah_retrieve('miniahah_ts_web','%TOPIC%Selector?skin=text;section=ts_selectweb;miniahah1='+ahah_web,'ts_web_select_'+ahah_web)">%ICON{plus}%</a> <input size="20" name="web" value="%IF{"defined MINIAHAH1" then="%MINIAHAH1%" else="%INCLUDINGWEB%"}%" onchange="ahah_web=this.value;if (ahah_topic_type == 'select') {ahah_retrieve('miniahah_ts_topic','%TOPIC%Selector?skin=text;section=ts_selecttopic;miniahah1='+ahah_web,'ts_topic_select_'+ahah_web);} else {this.form.elements.topic.value='';}"></input> %ENDSECTION{ts_inputweb}% %STARTSECTION{ts_selectweb}% <a href="javascript:ahah_retrieve('miniahah_ts_web','%TOPIC%Selector?skin=text;section=ts_inputweb;miniahah1='+ahah_web,'ts_web_input_'+ahah_web)">%ICON{minus}%</a> <select size="1" name="web" onchange="ahah_web=this.value;if (ahah_topic_type == 'select') {ahah_retrieve('miniahah_ts_topic','%TOPIC%Selector?skin=text;section=ts_selecttopic;miniahah1='+ahah_web,'ts_topic_select_'+ahah_web);} else {this.form.elements.topic.value='';}"> %PERCENT%WEBLIST{format="<option $marker value=$qname>$name</option>" marker="selected='selected'" selection="%MINIAHAH1%"}% </select> %ENDSECTION{ts_selectweb}% %STARTSECTION{ts_inputtopic}% <a href="javascript:ahah_topic_type='select';ahah_retrieve('miniahah_ts_topic','%TOPIC%Selector?skin=text;section=ts_selecttopic;miniahah1='+ahah_web,'ts_topic_select_'+ahah_web)">%ICON{plus}%</a> <input size="20" name="topic"></input> %ENDSECTION{ts_inputtopic}% %STARTSECTION{ts_selecttopic}% <a href="javascript:ahah_topic_type='input';ahah_retrieve('miniahah_ts_topic','%TOPIC%Selector?skin=text;section=ts_inputtopic','ts_topic_input_'+ahah_web)">%ICON{minus}%</a> <select size="1" name="topic">%SEARCH{".*" nonoise="on" scope="topic" regex="on" web="%MINIAHAH1%" format="<option value='%MINIAHAH1%.$topic'>$topic</option>"}%</select> %ENDSECTION{ts_selecttopic}% </div> </form> ---+++ Templates for the Topic Explorer %STARTSECTION{topicexplorer}% <div id="miniahah_te_wiki">%INCLUDE{"%TOPIC%" section="te_collapsedwiki"}%</div> %ENDSECTION{topicexplorer}% %STARTSECTION{te_collapsedwiki}% <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><a href="javascript:ahah_swap('miniahah_te_wiki','%TOPIC%Selector?skin=text;section=te_expandedwiki')">%ICON{plus}%</a></td> <td valign="top">%ICON{home}% (%WIKITOOLNAME%)</td> </tr> </table> %ENDSECTION{te_collapsedwiki}% %STARTSECTION{te_expandedwiki}% <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><a href="javascript:ahah_swap('miniahah_te_wiki','%TOPIC%Selector?skin=text;section=te_collapsedwiki')">%ICON{minus}%</a></td> <td valign="top">%ICON{home}% (%WIKITOOLNAME%) %PERCENT%WEBLIST{format="<div id='miniahah_te_web_$name'><table border='0' cellpadding='0' cellspacing='0'><tr><td valign='top'><a href='javascript:ahah_swap(\"miniahah_te_web_$name\",\"%TOPIC%Selector?skin=text;section=te_expandedweb;miniahah1=$name\");'><img width='16' alt='plus' align='top' src='%ICONURL{plus}%' height='16' border='0' /></a></td><td valign='top'><img width='16' alt='plus' align='top' src='%ICONURL{folder}%' height='16' border='0' /></td><td valign='top'>[[$name.WebHome][$name]]</td></tr></table></div>"}% </td> </tr> </table> %ENDSECTION{te_expandedwiki}% %STARTSECTION{te_collapsedweb}% <table border='0' cellpadding='0' cellspacing='0'> <tr> <td valign="top"><a href='javascript:ahah_swap("miniahah_te_web_%MINIAHAH1%","%TOPIC%Selector?skin=text;section=te_expandedweb;miniahah1=%MINIAHAH1%");'>%ICON{plus}%</a></td> <td valign="top">%ICON{folder}%</td> <td valign="top">[[%MINIAHAH1%.WebHome][%MINIAHAH1%]]</td> </tr> </table> %ENDSECTION{te_collapsedweb}% %STARTSECTION{te_expandedweb}% <table border='0' cellpadding='0' cellspacing='0'> <tr> <td valign="top"><a href='javascript:ahah_swap("miniahah_te_web_%MINIAHAH1%","%TOPIC%Selector?skin=text;section=te_collapsedweb;miniahah1=%MINIAHAH1%");'>%ICON{minus}%</a></td> <td valign="top">%ICON{folder}%</td> <td valign="top">[[%MINIAHAH1%.WebHome][%MINIAHAH1%]]%BR% %PERCENT%TOPICLIST{web="%MINIAHAH1%" format="<img width='16' alt='plus' align='top' src='%ICONURL{viewtopic}%' height='16' border='0' /> [[%MINIAHAH1%.$name][$name]]%BR%"}% </td> </tr> </table> %ENDSECTION{te_expandedweb}% ---+++ Templates for the %TWIKIWEB%.TWikiVariables Explorer %STARTSECTION{twikivarexplorer}% <div id="miniahah_ve">%INCLUDE{"%TOPIC%" section="ve_collapsed"}%</div> %ENDSECTION{twikivarexplorer}% %STARTSECTION{ve_collapsed}% <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><a href="javascript:ahah_swap('miniahah_ve','%TOPIC%Selector?skin=text;section=ve_expanded')">%ICON{plus}%</a></td> <td valign="top">(All TWiki Variables)</td> </tr> </table> %ENDSECTION{ve_collapsed}% %STARTSECTION{ve_expanded}% <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><a href="javascript:ahah_swap('miniahah_ve','%TOPIC%Selector?skin=text;section=te_collapsedwiki')">%ICON{minus}%</a></td> <td valign="top">(All TWiki Variables) %PERCENT%SEARCH{"^Var.*" web="%TWIKIWEB%" scope="topic" type="regex" nonoise="on" format="<div id='miniahah_ve_$topic'><a href='javascript:ahah_swap(\"miniahah_ve_$topic\",\"%TOPIC%Selector?skin=text;section=ve_expandedtopic;miniahah1=$topic\");'><img width='16' alt='plus' align='top' src='%ICONURL{plus}%' height='16' border='0' /> !$topic</a></div>"}% </td> </tr> </table> %ENDSECTION{ve_expanded}% %STARTSECTION{ve_collapsedtopic}% <a href="javascript:ahah_swap('miniahah_ve_%MINIAHAH1%','%TOPIC%Selector?skin=text;section=ve_expandedtopic;miniahah1=%MINIAHAH1%');">%ICON{plus}% !%MINIAHAH1%</a> %ENDSECTION{ve_collapsedtopic}% %STARTSECTION{ve_expandedtopic}% <a href="javascript:ahah_swap('miniahah_ve_%MINIAHAH1%','%TOPIC%Selector?skin=text;section=ve_collapsed;miniahah1=%MINIAHAH1%');">%ICON{minus}% <noautolink> %MINIAHAH1% </noautolink> </a> <div style="border: thin solid black; padding: 2px;"> %INCLUDE{"%TWIKIWEB%.%MINIAHAH1%"}% </div> %ENDSECTION{ve_expandedtopic}% ---+++ Templates for Accessing Session Variables %STARTSECTION{sessionvariable}% <form action="#" onsubmit="return false"> <div id="miniahah_sv"> Name: <input name="varname" size="30" onchange="javascript:ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=readvalue;miniahah1='+this.value,'sv_n_'+this.value)"></input> <span id="miniahah_sv_value"><a href="javascript:ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=readvalue;miniahah1='+this.value,'sv_n_'+this.value)">%ICON{more}%</a></span> </div> </form> %ENDSECTION{sessionvariable}% %STARTSECTION{readvalue}% = <input name="varvalue" size="40" value="%SESSION_VARIABLE{%MINIAHAH1%}%" onchange="ahah_clear('sv_v_'+this.value);ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=setvalue;miniahah1=%MINIAHAH1%;miniahah2='+this.value,'sv_v_'+this.value)"/> <a href="javascript:ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=setvalue;miniahah1=%MINIAHAH1%;miniahah2='+this.value,'sv_v_'+this.value)">%Y%</a> %ENDSECTION{readvalue}% %STARTSECTION{setvalue}% <!-- %SESSION_VARIABLE{"%MINIAHAH1%" set="%MINIAHAH2%"}% --> = <input name="varvalue" size="40" value="%SESSION_VARIABLE{%MINIAHAH1%}%" onchange="ahah_clear('sv_v_'+this.value);ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=setvalue;miniahah1=%MINIAHAH1%;miniahah2='+this.value,'sv_v_'+this.value)"/> <a href="javascript:ahah_retrieve('miniahah_sv_value','%TOPIC%Selector?skin=text;section=setvalue;miniahah1=%MINIAHAH1%;miniahah2='+this.value,'sv_v_'+this.value)">%Y%</a> %ENDSECTION{setvalue}% %STARTSECTION{sessionvariabletable}% <form name="miniahah_sv_table" action="#" onsubmit="return false"> <div> | *SKIN:* | <input name="svt_skin" value="%SESSION_VARIABLE{SKIN}%" onchange="ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=SKIN;miniahah2='+this.value,'');"/> | <a href="javascript:ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=SKIN;miniahah2='+document.forms['miniahah_sv_table']['svt_skin'].value,'');">%Y%</a> | (you need to reload the page to see the effect) | | *EDITBOXHEIGHT:* | <input name="svt_ebh" value="%EDITBOXHEIGHT%" onchange="ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=EDITBOXHEIGHT;miniahah2='+this.value,'');"/> | <a href="javascript:ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=EDITBOXHEIGHT;miniahah2='+document.forms['miniahah_sv_table']['svt_ebh'].value,'');">%Y%</a> | | | *EDITBOXWIDTH:* | <input name="svt_ebw" value="%EDITBOXWIDTH%" onchange="ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=EDITBOXWIDTH;miniahah2='+this.value,'');"/> | <a href="javascript:ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=EDITBOXWIDTH;miniahah2='+document.forms['miniahah_sv_table']['svt_ebw'].value,'');">%Y%</a> | | | *LANGUAGE:* | <input name="svt_language" value="%LANGUAGE%" onchange="ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=LANGUAGE;miniahah2='+this.value,'');"/> | <a href="javascript:ahah_retrieve('miniahah_svt','%TOPIC%Selector?skin=text;section=svt_set;miniahah1=LANGUAGE;miniahah2='+document.forms['miniahah_sv_table']['svt_language'].value,'');">%Y%</a> | %IF{"context i18n_enabled" then="" else="<img width='16' alt='plus' align='top' src='%ICONURL{warning}%' height='16' border='0' /> I18N is not enabled"}% | </div> <div id="miniahah_svt"></div> </form> %ENDSECTION{sessionvariabletable}% %STARTSECTION{svt_set}% %SESSION_VARIABLE{"%MINIAHAH1%" set="%MINIAHAH2%"}%Session variable '%MINIAHAH1%' has been seet to '%MINIAHAH2%' %ENDSECTION{svt_set}%
Attachments
Attachments
Topic attachments
I
Attachment
History
Action
Size
Date
Who
Comment
js
ahah.js
r1
manage
1.9 K
2006-08-22 - 10:30
AndreaSterbini
This topic: Legolab
>
MiniAHAH
Topic revision: r1 - 2006-08-22 - AndreaSterbini
Copyright © 2008-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki?
Send feedback