jon - refactor example

application.js

function CustomerView (search_customers_container, show_customers_container, new_customer_container) {
  this.search_customers_container = search_customers_container;
  this.show_customers_container = show_customers_container;
  this.new_customer_container = new_customer_container;
}

CustomerView.prototype.showCustomers = function(customers) {
  this.show_customers_container.html("<h3>Customer List: </h3>");
  customers.forEach(this.showCustomer.bind(this));
};

CustomerView.prototype.showCustomer = function(customer) {
 this.show_customers_container.append(
   "<li class='customer'>" +
     "<span class='name'>" + customer.name + "</span>" + " " + 
     "<a href='#' class='delete' id='" + customer.id + "'>" + "[X]"  + "</a>" + " " +
     "<a href='#' class='more' id='" + customer.id + "'>" + "more >>" + "</a>" +
   "</li>"
 ); 
};

CustomerView.prototype.renderNewCustomerForm = function() {
  this.new_customer_container.html(
    "<h3>New Customer: </h3>" + 
    "<form action='/customers'>" +
      "<input type='text' name='customer[name]' id='name' placeholder='Customer Name'><br>" + 
      "<input type='submit' class='submit'>" + 
    "</form>"
  );
}

CustomerView.prototype.renderSearchCustomerForm = function() {
  this.search_customers_container.append(
    "<h3>Search Customer: </h3>" +
    "<form>" + 
      "<input type='text' name='search' id='search' placeholder='Customer Name'>" +
    "</form> <br>"
  );
}

function NoteView (display_notes_container, add_note_container) {
  this.display_notes_container = display_notes_container;
  this.add_note_container = add_note_container;
}

NoteView.prototype.showNotes = function(notes) {
  this.display_notes_container.html("<h3>Notes: </h3>")
  this.display_notes_container.append(notes);
}

NoteView.prototype.appendNewNote = function(newNote) {
  $(".notes").append(
    "<div class='note' data-id='" + newNote.note.id + "'>" + 
      newNote.note.content + 
    "</div>"
  );
}

NoteView.prototype.renderAddNoteForm = function(id) {
  this.add_note_container.html(
    "<h3>Add Note: </h3>" + 
    "<form name='note' id='note' action='/customers/" + id + "/notes'>" + 
      "<input type='text' name='note[content]' id='content' placeholder='New Note'><br>" + 
      "<input type='submit' class='submit'>" + 
    "</form>"
  );
}

$(document).ready(function() {

  $("#crm").append("<div id='customer_view'></div>");
  $("#customer_view").append("<div id='search_customers_view'></div>");
  $("#customer_view").append("<div id='show_customers_view'></div>");
  $("#customer_view").append("<div id='new_customer_view'></div>");
  $("#crm").append("<div id='note_view'></div>");
  $("#note_view").append("<div id='add_note_view'></div>");
  $("#note_view").append("<div id='display_notes_view'></div>");

  var customerView = new CustomerView($("#search_customers_view"), $("#show_customers_view"), $("#new_customer_view"));
  var noteView = new NoteView($("#display_notes_view"), $("#add_note_view"));

  $.ajax({
    type: 'GET',
    url: '/customers',
    success: function (customer_data) {
      customerView.renderNewCustomerForm();
      customerView.renderSearchCustomerForm();
      customerView.showCustomers(customer_data);
    },
    error: function () {
      console.log("Error retrieving customers.");
    }
  });

  $("#customer_view").on('click', 'a.delete', function(e) {
    e.preventDefault();
    var id = e.target.id;
    $.ajax({
      type: 'DELETE',
      url: '/customers/' + id,
      success: function () {
        $(e.target).parent().remove();
        $("#note_view").hide();
      },
      error: function() {
        console.log("Error deleting customer.");
      }
    });
  });

  $("#customer_view").on('click', 'a.more', function(e) {
    e.preventDefault();
    var id = e.target.id;
    $.ajax({
      type: 'GET',
      url: '/customers/' + id + '/notes',
      success: function (notes) {
        $("#note_view").show();
        noteView.showNotes(notes);
        noteView.renderAddNoteForm(id);
      },
      error: function () {
        console.log("Error retrieving customer notes.");
      }
    });
  });

  $("#note_view").on('click', '.submit', function(e) {
    e.preventDefault();
    $.ajax({
      url: $(e.target).parent().attr("action"),
      type: 'POST',
      data: $(e.target).parent().serialize(),
      success: function (newNote) {
        noteView.appendNewNote(newNote);
      },
      error: function () {
        console.log("Error adding new note");
      }
    });
  });

  $("#customer_view").on('click', '.submit', function(e) {
    e.preventDefault();
    $.ajax({
      url: $(e.target).parent().attr("action"),
      type: 'POST',
      data: $(e.target).parent().serialize(),
      success: function (newCustomer) {
        customerView.showCustomer(newCustomer);
      },
      error: function () {
        console.log("Error adding new note");
      }
    });
  });

  $("#customer_view").on('keyup', '#search', function(e) {
    e.preventDefault();
    $('.customer').show();
    var searchString = $('#search').val();
    $('.customer').each(function(i, customer) {
      var $customer = $(customer);
      var name = $customer.find('.name').text();
      name.indexOf(searchString) >= 0 ? $customer.show() : $customer.hide();
    });
  });

});