No replies to this topic

[AhmedRezaSiddique]

I have a simple rails app where a user can add a product and as the user clicks on the f.submit button it takes them to show.html.erb but what i want to do now is to make the show.html.erb a popup, as am new to rails i don't have any idea on how to accomplish this.

What i tried is bootstrap modal

my controller.rb
 

class LoadsController < ApplicationController
  before_action :set_load, only: [:show, :edit, :update, :destroy]

  # GET /loads
  # GET /loads.json
  def index
    @loads = Load.all
  end

  # GET /loads/1
  # GET /loads/1.json
  def show
    @load = Load.find(params[:id])
  end

  # GET /loads/new
  def new
    @load = Load.new
  end

  # GET /loads/1/edit
  def edit
  end

  # POST /loads
  # POST /loads.json
  def create
    @load = current_user.loads.new(load_params)

    respond_to do |format|
      if @load.save
        format.html { redirect_to @load, notice: 'Shipment was successfully created.' }
        format.json { render :show, status: :created, location: @load }
      else
        format.html { render :new }
        format.json { render json: @load.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /loads/1
  # PATCH/PUT /loads/1.json
  def update
    respond_to do |format|
      if @load.update(load_params)
        format.html { redirect_to @load, notice: 'Load was successfully updated.' }
        format.json { render :show, status: :ok, location: @load }
      else
        format.html { render :edit }
        format.json { render json: @load.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /loads/1
  # DELETE /loads/1.json
  def destroy
    @load.destroy
    respond_to do |format|
      format.html { redirect_to loads_url, notice: 'Load was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_load
      @load = Load.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def load_params
      params.require(:load).permit(:pickup, :delivery, :date, :truck, :phone, :user_id)
    end
end

_form.html.erb
 

<div class="row vertical-offset-100">
      <div class="col-md-4 col-md-offset-4">
<div class="row">
  <div class="span4">
    <%= simple_form_for @load, html: {class: "well", multipart: true } do |f| %>

    <fieldset>
      <h1 class="text-center login-title"><strong> Hey <%= current_user.first_name %></strong> </h1> 
      <h3 class="text-center login-title"><strong> Let's fill the Shipment Details </strong> </h3>
      <%= f.input :pickup, placeholder: "Where Do You Want The Shipper To Arrive?", label: "Pickup Location" %>
      <%= f.input :delivery, placeholder: "Where Do You Want To Move The Shipment?", label: "Delivery Location" %>
      <%= f.input :date, placeholder: "When Do You Want To Ship?", label: "Date Of Shipment" %>
      <%= f.input :truck, :collection => ["Mini(Tempo)", "Tata Ace(Chota Hathi", "Max(MaxiTruck)","Max+(Tata 407"], placeholder: "Choose Your Vehicle", label: "Trucks", :prompt => 'Select Your Vehicle' %>
      <%= f.input :phone, placeholder: "Your Mobile Number", label: "Contact Number" %>
    <div class="text-center">
<%= link_to 'Add release', load_id:  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'}  %>
  </button>

          </div>
      <% end %>
          <script type="text/javascript" src="/assets/jquery.backstretch.min.js"></script>
    <script>
        $.backstretch("/assets/shifting.jpg", {speed: 500});
    </script>

show.html.erb
 

<!-- Modal -->
  <div class="modal fade" id="load-<%= load.id %>-notes" tabindex="-1" role="dialog" aria-labelledby="load-<%= load.id %>-label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="load-<%= load.id %>-label">Notes</h4>
        </div>
        <div class="modal-body">
          <p>
  <strong>Pickup:</strong>
  <%= @load.pickup %>
</p>

<p>
  <strong>Delivery:</strong>
  <%= @load.delivery %>
</p>

<p>
  <strong>Date:</strong>
  <%= @load.date %>
</p>

<p>
  <strong>Truck:</strong>
  <%= @load.truck %>
</p>

<p>
  <strong>Phone:</strong>
  <%= @load.phone %>
</p>

<strong><font style="text-transform: capitalize;"><%= @load.user.full_name %></strong></font>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<% end %>