gistfile1.js

<h1>To Do</h1>

<h2> Add a to do item</h2>

<div class='formdiv'>
<form class="todo" action="<%= items_url %>" method="post">

  <input class="submission" type="text" name="item[name]" size='50'>
  <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
  <input class="newitem" type="submit" value="New Item">

</form>
</div>

<div class="todolist">

  <ul>
    <% @items.each do |item| %>
      <div class='totalitem'>
      <p class="itemname" id="<%= item.id %>"> <%= item.name %> </p>
    </div>
    <% end %>
  </ul>

</div>


<script>


  $('.todo').on("click", ".newitem", function(event){
    event.preventDefault();
    var that = this;

    var formData = $(this.form).serialize();

    $.ajax({
      url: that.form.action + '.json',
      type: "POST",
      data: formData,
      success: function(response){

        var todoItem = $('.submission').val();
        $('.todolist ul').prepend("<div class='totalitem'> <p class=itemname id =" + response + " style='display:none'>" + todoItem +  "</p> </div>");
        $(".todolist ul div p").slideDown();
        $('.submission').val('');
      },
    });
  });

  // $('.todo').on("submit", function(event){
  //   event.preventDefault();
  //   var that = this;

  //   var formData = $(this.form).serialize();

  //   $.ajax({
  //     url: that.action + '.json',
  //     type: "POST",
  //     data: formData,
  //     success: function(response){
  //       var todoItem = $('.submission').val();
  //       $('.todolist ul').prepend("<div class='totalitem'> <p class=itemname id =" + response + " style='display:none'>" + todoItem +  "</p> </div>");
  //       $(".todolist ul div p").slideDown();
  //       $('.submission').val('');
  //     },
  //   });
  // });


  $('.todolist').on('click', '.itemname', function(){
    event.preventDefault();
      var that = this;
      $.ajax({
        url: "/items/" + that.id + '.json',
        type: "PUT",
        success: function(){
          $(that).toggleClass('completed');
          // $(that).append("<p class='icon'><i class='icon-check'></i></p>")
        },
      });
    });


</script>