Make transaction form remote

app/assets/javascripts/application.js

@@ -20,7 +20,10 @@
 //= require_tree .
 
 ready = function() {
-  $(".select2-selector").select2();
+  $(".select2-selector").select2({
+    width: 'resolve',
+    placeholder: "Ontvanger"
+  });
 }
 
 $(document).ready(ready)

app/assets/javascripts/transactions.coffee

@@ -1,3 +1,17 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+ready = ->
+  $("#new_transaction").on("ajax:success", (e, data, status, xhr) ->
+    console.log("success")
+  ).on("ajax:error", (e, xhr, status, error) ->
+    console.log(e)
+    console.log(xhr)
+    console.log("failed")
+  )
+$.ajaxSetup({
+  dataType: 'json'
+})
+
+$(document).ready(ready)
+$(document).on('page:load', ready)

app/controllers/transactions_controller.rb

@@ -14,20 +14,11 @@ class TransactionsController < ApplicationController
   end
 
   def create
-    @transaction = Transaction.new(transaction_params)
+    transaction = Transaction.new(transaction_params)
-    respond_to do |format|
+    if transaction.save
-      format.html do
+      head :created
-        if @transaction.save
+    else
-          flash[:success] = "Transaction created"
+      render json: transaction.errors.full_messages, status: :unprocessable_entity
-          redirect_to new_transaction_path
-        else
-          render 'new'
-        end
-      end
-
-      format.json do
-        head(@transaction.save ? :created : :unprocessable_entity)
-      end
     end
   end
 

app/views/transactions/_new.html.haml

@@ -0,0 +1,20 @@
+= render 'partials/form_errors', object: @transaction
+= form_for @transaction, remote: true, html: { class: "pure-form" } do |f|
+  - if current_user.penning
+    = f.collection_select :debtor, User.all, :name, :name,
+        { selected: @transaction.debtor.try(:name) || current_user.name }, { class: 'select2-selector'}
+  - else
+    = f.hidden_field :debtor, value: current_user.name
+    = f.select :creditor,
+        options_from_collection_for_select(User.all.order(:name), :name, :name),
+        { include_blank: true },
+        { class: 'select2-selector', size: 50 }
+  -# { class: 'select2-selector', size: 50, required: true }
+  = f.text_field :message, placeholder: "Message", size: 75
+  -# = f.text_field :message, required: true, placeholder: "Message", size: 75
+  %fieldset.pure-group-inline
+    %span.euro.pure-group-addon
+    = f.number_field :euros, value: amount(@transaction.amount),
+        placeholder: "Bedrag", step: 0.01, min: 0.01, class: "pure-group-addon price", size: 20
+    -# placeholder: "Bedrag", step: 0.01, min: 0.01, class: "pure-group-addon price", size: 20, required: true
+  = f.submit "Send it!", class: "pure-button pure-button-primary"

app/views/transactions/new.html.haml

@@ -1,13 +0,0 @@
-= render 'partials/form_errors', object: @transaction
-= form_for @transaction do |f|
-  - if current_user.penning
-    = f.collection_select :debtor, User.all, :name, :name,
-        { selected: @transaction.debtor.try(:name) || current_user.name }, { class: 'select2-selector'}
-  - else
-    = f.hidden_field :debtor, value: current_user.name
-  = f.collection_select :creditor, User.all, :name, :name,
-        { selected: @transaction.creditor.try(:name) || User.zeus.name }, { class: 'select2-selector' }
-  = f.text_field :message, required: true
-  = f.number_field :euros, value: @transaction.amount/100
-  .pure-controls
-    = f.submit "Send it!"