Updated 2013-09-01 16:24:46 by RLE ▲

MJ - Scriptaculous [1] is a framework to simplify the JavaScript part of Ajax. Because it is server-implementation agnostic, it can be used to add Ajax functions to tclhttpd. Note that according to the wiki, it is already integrated in OpenACS. One of the main advantages of using a framework like this is that all the XmlHttpRequest and browser DOM differences are handled by the framework.

To install it, download the JavaScript files from the URL above and put them in the htdocs/javascripts directory of your tclhttpd installation. In your custom directory add the file ajax.tcl with contents:
 proc ajax {} {
  # Initial call: build page
  set ::ajax text/html
  set head {
    <script src="/javascripts/prototype.js" type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/css/scriptaculous.css" />
  }
  set body {
    <input type="text" id="autocomplete" name="autocomplete_parameter"/><div id="autocomplete_choices" class="autocomplete"></div>
    <script type="text/javascript" language="javascript" charset="utf-8">
      new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/ajax/complete", {});
    </script>
  }
  set result "<html><head>$head</head><body>$body</body></html>"
  return $result
 }

 proc ajax/complete {autocomplete_parameter} {
  set ajax/complete text/xml
  set result <ul>
  foreach cmd [lsort [info commands ${autocomplete_parameter}*]] {
    set result [concat $result "<li>$cmd</li>\r\n"]
  }
  set result [concat $result "</ul>"]
  return $result
 }

 Direct_Url /ajax ::ajax

And for nice markup, use the following in httpdocs/css/scriptaculous.css
 div.autocomplete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:0px;
  padding:0px;
 }
 div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
 }
 div.autocomplete ul li.selected { background-color: #ffb;}
 div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  /* height:32px; */
  cursor:pointer;
 }

Now we have a text field with autocompletion on the currently defined Tcl commands.

fr gets server-response unknown content-type with scriptaculous-js.1.7.0 and tclhttpd3.5.1 - changing the default request-method POST of prototype.js repairs this. Just use:
 new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/ajax/complete", {}).setRequestMethod("GET");

Category InternetCategory Ajax