Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 84 lines (75 sloc) 4.065 kb
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 =&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>
Something went wrong with that request. Please try again.