Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

135 lines (110 sloc) 5.462 kb
<lift:surround with="default" at="content">
<center><b>AJAX Samples</b></center>
<br >
<div class="lift:Ajax.sample?id_name=cnt_id;id_msgs=messages">
<span>Click me to increase the count (currently <span id='cnt_id'>0</span>)</span>
<div id="messages"></div>
You selected <sel:number></sel:number> From the select box.
You entered <text:value></text:value> in the text box.
An example of autocomplete with a server round trip to
calculate the autocomplete list
<hr >
And each time an Ajax or Comet update is made to the page,
we update this span:
<span id="timely" class="lift:Timely">The time is</span>
Enter some text: <input id="the_input">
and <button class="lift:Ajax.buttonClick">Click Here</button>
<br >
<br >
<br >
The <i>Lift</i> Scala code to render the controls:
<br >
<style type="text/css">
/* <![CDATA[ */
.comment {
/* font-lock-comment-face */
color: #b22222;
.comment-delimiter {
/* font-lock-comment-delimiter-face */
color: #b22222;
.function-name {
/* font-lock-function-name-face */
color: #0000ff;
.keyword {
/* font-lock-keyword-face */
color: #a020f0;
.string {
/* font-lock-string-face */
color: #bc8f8f;
.type {
/* font-lock-type-face */
color: #228b22;
.variable-name {
/* font-lock-variable-name-face */
color: #b8860b;
/* ]]> */
<span class="keyword">class</span> <span class="type">Ajax</span> {
<span class="keyword">def</span> <span class="function-name">sample</span>(<span class="variable-name">xhtml</span>: <span class="type">NodeSeq</span>): <span class="type">NodeSeq </span>= {
<span class="comment-delimiter">// </span><span class="comment">local state for the counter
</span> <span class="keyword">var</span> <span class="variable-name">cnt</span> = 0
<span class="comment-delimiter">// </span><span class="comment">get the id of some elements to update
</span> <span class="keyword">val</span> <span class="variable-name">spanName</span>: <span class="type">String </span>= S.attr(<span class="string">"id_name"</span>) openOr <span class="string">"cnt_id"</span>
<span class="keyword">val</span> <span class="variable-name">msgName</span>: <span class="type">String </span>= S.attr(<span class="string">"id_msgs"</span>) openOr <span class="string">"messages"</span>
<span class="comment-delimiter">// </span><span class="comment">build up an ajax &lt;a&gt; tag to increment the counter
</span> <span class="keyword">def</span> <span class="function-name">doClicker</span>(<span class="variable-name">text</span>: <span class="type">NodeSeq</span>) =
a(() =&gt; {cnt = cnt + 1; SetHtml(spanName, Text( cnt.toString))}, text)
<span class="comment-delimiter">// </span><span class="comment">create an ajax select box
</span> <span class="keyword">def</span> <span class="function-name">doSelect</span>(<span class="variable-name">msg</span>: <span class="type">NodeSeq</span>) =
ajaxSelect((1 to 50) =&gt; (i.toString, i.toString)),
v =&gt; DisplayMessage(msgName,
bind(<span class="string">"sel"</span>, msg, <span class="string">"number"</span> -&gt; Text(v)),
5 seconds, 1 second))
<span class="comment-delimiter">// </span><span class="comment">build up an ajax text box
</span> <span class="keyword">def</span> <span class="function-name">doText</span>(<span class="variable-name">msg</span>: <span class="type">NodeSeq</span>) =
ajaxText(<span class="string">""</span>, v =&gt; DisplayMessage(msgName,
bind(<span class="string">"text"</span>, msg, <span class="string">"value"</span> -&gt; Text(v)),
4 seconds, 1 second))
<span class="comment-delimiter">// </span><span class="comment">bind the view to the functionality
</span> bind(<span class="string">"ajax"</span>, xhtml,
<span class="string">"clicker"</span> -&gt; doClicker _,
<span class="string">"select"</span> -&gt; doSelect _,
<span class="string">"text"</span> -&gt; doText _,
<span class="string">"auto"</span> -&gt; JqSHtml.autocomplete(<span class="string">""</span>, buildQuery _, _ =&gt; ()))
<span class="keyword">private</span> <span class="keyword">def</span> <span class="function-name">buildQuery</span>(<span class="variable-name">current</span>: <span class="type">String</span>, <span class="variable-name">limit</span>: <span class="type">Int</span>): <span class="type">Seq[String]</span> = {<span class="string">"Checking on server side with "</span>+current+<span class="string">" limit "</span>+limit)
(1 to limit).map(n =&gt; current+<span class="string">""</span>+n)
<span class="keyword">def</span> <span class="function-name">time</span> = Text(timeNow.toString)
Jump to Line
Something went wrong with that request. Please try again.