Permalink
Fetching contributors…
Cannot retrieve contributors at this time
85 lines (75 sloc) 3.97 KB
<lift:surround with="default" at="content">
<center><b>AJAX Form Update</b></center>
<br >
Choose city and state:<br>
<lift:snippet type="AjaxForm:show" form="post">
State: <select:state></select:state>
City: <select:city></select:city>
<select:submit></select:submit>
</lift:snippet>
<p>Here's the code:</p>
<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;
}
/* ]]> */
</style>
<pre>
<span class="keyword">class</span> <span class="type">AjaxForm</span> {
<span class="keyword">var</span> <span class="variable-name">state</span> = AjaxForm.state
<span class="keyword">var</span> <span class="variable-name">city</span> = <span class="string">""</span>
<span class="keyword">private</span> <span class="keyword">def</span> <span class="function-name">cityChoice</span>(<span class="variable-name">state</span>: <span class="type">String</span>): <span class="type">Elem </span>= {
<span class="keyword">val</span> <span class="variable-name">cities</span> = AjaxForm.citiesFor(state)
<span class="keyword">val</span> <span class="variable-name">first</span> = cities.head
<span class="comment-delimiter">// </span><span class="comment">make the select "untrusted" because we might put new values
</span> <span class="comment-delimiter">// </span><span class="comment">in the select
</span> untrustedSelect(cities.map(s =&gt; (s,s)), Full(first), city = _)
}
<span class="keyword">private</span> <span class="keyword">def</span> <span class="function-name">replace</span>(<span class="variable-name">state</span>: <span class="type">String</span>): <span class="type">JsCmd </span>= {
<span class="keyword">val</span> <span class="variable-name">cities</span> = AjaxForm.citiesFor(state)
<span class="keyword">val</span> <span class="variable-name">first</span> = cities.head
ReplaceOptions(<span class="string">"city_select"</span>, cities.map(s =&gt; (s,s)), Full(first))
}
<span class="comment-delimiter">// </span><span class="comment">bind the view to the dynamic HTML
</span> <span class="keyword">def</span> <span class="function-name">show</span>(<span class="variable-name">xhtml</span>: <span class="type">Group</span>): <span class="type">NodeSeq </span>= {
<span class="keyword">val</span> (<span class="variable-name">name</span>, <span class="variable-name">js</span>) = ajaxCall(JE.JsRaw(<span class="string">"this.value"</span>),
s =&gt; After(200, replace(s)))
bind(<span class="string">"select"</span>, xhtml,
<span class="string">"state"</span> -&gt; select(AjaxForm.states.map(s =&gt; (s,s)),
Full(state), state = _, <span class="string">"onchange"</span> -&gt; js.toJsCmd) %
(<span class="keyword">new</span> PrefixedAttribute(<span class="string">"lift"</span>, <span class="string">"gc"</span>, name, Null)),
<span class="string">"city"</span> -&gt; cityChoice(state) % (<span class="string">"id"</span> -&gt; <span class="string">"city_select"</span>),
<span class="string">"submit"</span> -&gt; submit(?(<span class="string">"Save"</span>),
() =&gt;
{S.notice(<span class="string">"City: "</span>+city+<span class="string">" State: "</span>+state);
redirectTo(<span class="string">"/"</span>)}))
}
}
</pre>
</lift:surround>