_roll.erb

<% if @roll %>
<img src="/<%= @roll.value %>.png" title="<%= @roll.value %>" alt="the roll">
<% end %>

application.js

$(document).ready(function () {
  $("form").on("submit", function(event){
    event.preventDefault();
    var rand_num = Math.floor(Math.random() * 6) + 1;
    $.post('/rolls', {value: rand_num}, function(server_response) {
      //var dieRoll = $(server_response).find('#die');
      $('#die').html(server_response);
    })
  })
});

index.erb

<div class="container">
  <h1>Simplest Possible AJAX</h1>
  <p>This contrived app will simulate a roll of a 6-sided die.</p>

  <form method="post" action="/rolls">
    <input type="submit" value="Roll the Die">
  </form>

  <div id="die">  
    <%= erb :_roll %>
  </div>
</div>

index.rb

get '/' do
  erb :index
end


# TODO: convert this route to use AJAX
post '/rolls' do
  # If the user passes-in a "value", let's use it. Otherwise, we'll generate a random one.
  # See: roll_if_value_is_nil method in the Roll model.
  value = params[:value] ? params[:value].to_i : nil

  @roll = value ? Roll.create({ value: value }) : Roll.create

  if request.xhr?
    erb :_roll, :layout => false  # HINT: what does this do? what should we do instead?
  else
    erb :index
  end
end

lucky_ajax.md

Instructions:

1. Download this application skeleton.
2. Convert the app to use AJAX.
3. Add any files you changed to your gist and submit your code.