app_horses.js

$(document).ready(function() {
  bindListeners();
});

var bindListeners = function(){
  getHorseFormListener();
  postNewHorseFormListener();
}

function getHorseFormListener(){
  $('#new-horse').on('click', requestForm);
}

function postNewHorseFormListener(){
  $('#horse-list').on("submit", "#horse-form", function(event){
    event.preventDefault();

    var formData = $(this).serialize();
    console.log("submitting: " + formData);
    submitForm(formData);
  })
}

var requestForm = function(event){
  event.preventDefault();

  $('#new-horse').hide();
  var url = $(this).attr('href');

  $.ajax({
    url: url,
    type: 'GET'
  })
  .done(function(response){
    console.log("response: " + response);
    $('#horse-list').append(response);
  })
  .fail(function(xhr, status, errorMessage){
    // what to see on a failing request
    console.log("failing the request!")
    console.log("status code: " + status);
    console.log("errorMessage: " + errorMessage);
    console.dir(xhr);
  })
}

var submitForm = function(formData){

  $.ajax({
    url: '/horses',
    type: 'POST',
    data: formData
  })
  .done(function(response){
    // do something here
    console.log("SUCCESS   " + response);
    $('#horse-list').prepend(response);
  })
  .fail(function(status, errorMessage){
    console.log("Failing!!!")
    console.log("status: " + status)
    console.log("errorMessage: " + errorMessage)
  })
}