Rails: Edit record in Bootstrap modal

Question

I'm trying to use a Bootstrap modal in Rails to edit a record, but I can't get the modal to scope to the current record

The static link is

<%= link_to "Weigh Out", edit_ticket_path(ticket), "data-toggle" => "modal", :class => 'btn btn-mini', :id => 'edit_modal_link', "data-toggle" => "modal" %>

I really need to call the modal on id/edit which is the ticket number but cannot get it to link to the selected record in the table.

Any ideas?

Or render a partial but the partial must be called with the ticket available to it is scoped correctly to the ticket we need to edit?

My partial looks like

<%= form_for @ticket, :html => { :class => 'form-horizontal' } do |f|%>    
  <div class="control-group">
    <%= f.label :customer_name, :class => 'control-label' %>
    <div class="controls">
      <%= f.hidden_field :customer_id, :class => 'text_field', :id =>"cust_id" %>
      <%= f.autocomplete_field :customer_name, autocomplete_customer_name_customers_path, :id_element => '#cust_id', :class => 'text_field ui-autocomplete-input' %>
    </div>

Which need to render in Modal,

Answer 1

Another way to do it is like so:

just create a remote link:

link_to "edit", edit_ticket_path(ticket), class: "btn btn-mini", remote: true

Then in your views, add a edit.js.erb file:

$("#myModal").html("<%= j render 'new' %>");
$('#myModal').modal('show');

and change your new.html files to _new.html

Answer 2

I'm assuming you want to load the modal from a page other than the edit page.

I've got this working in my app by writing the link myself and using data-remote to specify the remote page to load. e.g

<a data-toggle="modal" data-target="#myModal" data-remote="<%= edit_ticket_path(ticket) %> #modal-edit-fields" class="btn btn-mini>Weigh out</a>

data-target specifies the modal you want to render the partial into.

edit.html.erb

<%= render 'edit_ticket_fields' %>

_edit_ticket_fields.html.erb (This could just be directly in edit.html.erb)

<div id="modal-edit-fields">
  <%= form_for @ticket, :html => { :class => 'form-horizontal' } do |f| %>      
    <div class="control-group">
      <%= f.label :customer_name, :class => 'control-label' %>
      <div class="controls">
        <%= f.hidden_field :customer_id, :class => 'text_field', :id =>"cust_id" %>
        <%= f.autocomplete_field :customer_name, autocomplete_customer_name_customers_path, :id_element => '#cust_id', :class => 'text_field ui-autocomplete-input' %>
      </div>
    </div>