Materialize Modal

application.js

$( document ).ready(function(){

$(document).ready(function(){
  $('.modal-trigger').leanModal();
});

})

create.js.erb

<% if @product.errors.empty? %>
   Materialize.toast('Se creo correctamente!', 4000);
   $('#modal1').closeModal();
<% else %>
   Materialize.toast('Ocurrio un error!', 4000)
<% end %>

edit.html.erb

<%= render partial: 'form' %>

edit.js.erb

$('#modal1').html('<%= j render "form" %>').openModal();

form.html.erb

  <!-- Modal Structure -->
    <div class="modal-content">

      <h2>Producto</h2>

      <%= form_for @product, html: { multipart: true }, remote: true, authenticity_token: true do |f| %>

      <% if @product.errors.any? %>
          <div id="error_explanation">
            <h2>
              <%= pluralize(@product.errors.count, "error") %> prohibited
              this article from being saved:
            </h2>
            <ul>
              <% @product.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
              <% end %>
            </ul>
          </div>
        <% end %>

      <div class="input-field col s12 m12 l12 block-center">
        <%= f.text_field :name, autofocus: true, placeholder: 'Nombre del producto' %>
      </div>

      <div class="input-field col s12 m12 l12">
        <%= f.text_field :description, placeholder: 'Descripcion del producto' %>
      </div>

      <div class="input-field col s12 m12 l12">
        <div class="file-field input-field">
          <div class="btn teal accent-5">
            <span>IMG</span>
            <%= f.file_field :picture %>
          </div>
          <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Agregar imagen">
          </div>
        </div> <br>
      </div>

      <div class="row">
        <div class="input-field col s12 m12 l12 center">
          <%= f.submit "Crear producto", class: 'btn teal accent-5' %>
        </div>
      </div>

    <% end %>

    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>

index.html.erb

<div class="container">

  <nav>
      <div class="nav-wrapper teal accent-5">
        <div class="col s12 m12 l12 center">
          <ul>
            <li class="hover-disabled">Productos <i class="material-icons left">chevron_right</i></li>
            <% if enterprise_signed_in? %>
              <li class="right hover-disabled">
                <%= link_to new_product_path, remote: true do %>
                  <button class="btn teal lighten-2 z-depth-0">
                    Crear producto
                  </button>
                <% end %>
              </li>
            <% end %>
          </ul>
        </div>
      </div>
    </nav>
    <br>

  <div class="row">

    <% if @products.any? %>

    <% @products.each do |product| %>

    <div class="col s12 m6 l4">

      <%= link_to product_path(product) do  %>
        <div class="card z-depth-1">
          <div class="card-image valign-wrapper" style="background-image: url( <%= product.picture.url %> );">
            <h5 class="white-text block-center"><b><%= product.name %></b></h5>
          </div>
          <div class="card-action center">
            <% if enterprise_signed_in? %>
              <%= link_to product_path(product), method: :delete, data: { confirm: '¿Estas seguro de querer eliminar este producto?' }, class: "btn-floating waves-effect waves-light red" do %>
              <i class="material-icons">delete</i>
              <% end %>
              <%= link_to edit_product_path(product), remote: true do %>
                <button class="btn-floating teal lighten-2 z-depth-0">
                  <i class="material-icons">edit</i>
                </button>
              <% end %>
            <% end %>
             <a class="btn-floating waves-effect waves-light red"><i class="material-icons">favorite</i></a>
          </div>
        </div>
      <% end %>

    </div>

    <% end %>

    <% else %>
      <p class="center">No hay productos disponibles por el momento</p>
    <% end %>

  </div>
</div>

<div id="modal1" class="modal modal-fixed-footer">

</div>

new.html.erb

<%= render partial: 'form' %>

new.js.erb

$('#modal1').html('<%= j render "form" %>').openModal();

products_controller.rb

class ProductsController < ApplicationController

  before_action :authenticate_enterprise!, except: [:index]

  def index
    @products = Product.all
  end

  def show
    @product = Product.find(params[:id])
  end

  def new
    @product = current_enterprise.products.new
  end

  def edit
    @product = Product.find(params[:id])
  end

  def create
    @product = current_enterprise.products.new(products_params)

    respond_to do |format|
      if @product.save
        format.html { redirect_to products_path }
        format.js { render :index }
      else
        format.js { render :new }
      end
    end

  end

  def update
    @product = Product.find(params[:id])

    respond_to do |format|
      if @product.update(products_params)
        format.html { redirect_to products_path }
        format.js { render :index }
      else
        format.js { render :edit }
      end
    end

  end

  def destroy
    @product = Product.find(params[:id])
    @product.destroy

    redirect_to products_path
  end

  private

  def products_params
    params.require(:product).permit(:name, :picture, :description, :enterprise_id)
  end

end

update.js.erb

<% if @products.errors.empty? %>
  swal("Datos actualizados", "Se ha actualizado los datos del documento", "success");
  $('#modal1').closeModal();
<% else %>
  swal("Ha ocurrido un problema", "Datos erroneos", "error");
<% end %>