application.js

$(document).ready(function () {

  // PSEUDO-CODE:
  //   1- intercept the form submission event using jQuery
  //   2- prevent the default action for that event from happening
  //   3- generate a random number between 1 and 6 using JavaScript
  //   4- use jQuery to submit an AJAX post to the form's action
  //   5- when the AJAX post is done, replace the contents of the "#die" DIV in the DOM using jQuery
  $('form').on('submit', function(e){
    e.preventDefault();
    console.log($(this).serialize())
    $.ajax({
      type: "POST",
      url: $(this).attr('action'),
      data:$(this).serialize()
      }).done(function(data){
        $('#die').html("<img src='/"+data+".png' title='"+data+"' alt='the roll'></img>")
      }).fail(function(){console.log("failed")})

  });
});

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">
    Cheater: <input type="text" name="value"></input></br>
    <input type="submit" value="Roll the Die">
  </form>

  <div id="die">

  </div>

</div>

index.rb

get '/' do
  erb :index
end


post '/rolls' do
  return 500 unless (((1..6).include? params["value"].to_i) || (params["value"] == ""))
  value = params["value"] != "" ? params["value"].to_i : nil
  @roll = value ? Roll.create({ value: value }) : Roll.create
  
  @roll.value.to_s
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.