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 %>