2013Jun30 app/views/index.scala.html

index.scala.html

@(message: String)
<!-- Pre-requisite: Browser requests main page: /index via GET ( This page loads in DOM ) -->


@main("Example AJAX Partial Search Form") {


<!-- Step 2 : Page defines a submit button plus empty div#searchResults landing zone</li> -->
<div id="searchForm">
  Form
  <input type="button" id="search-button" value="Search">
</div>
<div id="searchResults">
  ..type above..
</div>



<!-- Step 3: JQuery custom script click event handler on user input control (button). -->
<script type="text/javascript">

  // Step 4: Ajax anonymous function {1} triggers on input 'click' handler.
  $("#search-button").click(function() {


     $.ajax({url: "/_searchResults"}).done(function(data) {
       // Step 5: Html writer anonymous function {2} triggers on ajax 'done' handler.
       // alert("data recv: " + data );

       // Step 6: Browser writes results of Browser writes results of _searchResults.html.scala into results landing zone div.
       $("#searchResults").html(data);
     });
  });


</script>

}