Today's recitation AJAX query example

example_application.js

// AJAX REQUEST

$(document).ready(function() {
  // This is called after the document has loaded in its entirety
  // This guarantees that any elements we bind to will exist on the page
  // when we try to bind to them

  // See: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
  $('form').submit( function(e) {
      e.preventDefault();
      var item = $(this).serialize();

      $.ajax({
        url: '/',
        type: 'POST',
        data: item,
        success: function(string) {
          $(".container").append("<p>"+string+"</p>");
        }
      });
    });
  });

example_index.erb

<!-- # VIEW -->

<div class="container">
  <h1>Kittens have tattoos.</h1>
  <p>It's a fact. Serious.</p>

  <form action="/" method="post">
    <input name="email" type="text">
    <input name="num" type="hidden" value="10" />
    <input type="submit" value="Add stuff!" />
  </form>

</div>

example_index.rb

# CONTROLLER

get '/' do
  # Look in app/views/index.erb
  erb :index
end

post '/' do
  #These params are coming from the AJAX query.
  @count = params[:num]
  @email = params[:email]

  #This return is being sent to the 
  return "Thanks for signing up #{@email}! There are now #{@count} signups."
end