-
Notifications
You must be signed in to change notification settings - Fork 30
/
ajax-form.html
84 lines (75 loc) · 3.97 KB
/
ajax-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<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 => (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 => (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 => After(200, replace(s)))
bind(<span class="string">"select"</span>, xhtml,
<span class="string">"state"</span> -> select(AjaxForm.states.map(s => (s,s)),
Full(state), state = _, <span class="string">"onchange"</span> -> 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> -> cityChoice(state) % (<span class="string">"id"</span> -> <span class="string">"city_select"</span>),
<span class="string">"submit"</span> -> submit(?(<span class="string">"Save"</span>),
() =>
{S.notice(<span class="string">"City: "</span>+city+<span class="string">" State: "</span>+state);
redirectTo(<span class="string">"/"</span>)}))
}
}
</pre>
</lift:surround>