7

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,

Flip
  • 6,233
  • 7
  • 46
  • 75
Rhys
  • 429
  • 2
  • 5
  • 12

2 Answers2

9

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>
Flip
  • 6,233
  • 7
  • 46
  • 75
Subtletree
  • 3,169
  • 2
  • 18
  • 25
  • Your a star !! I had tried this approach but ended rendering the whole page in the modal, <%= edit_ticket_path(ticket) %> #modal-edit-fields" made all the difference it never crossed my mind – Rhys Sep 09 '13 at 08:26
  • Is this solution deprecated by Bootstrap 3.3? http://stackoverflow.com/a/18387625/1037965 – Esteban Bouza May 03 '16 at 14:16
9

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

Kiry Meas
  • 1,200
  • 13
  • 26
ndemoreau
  • 3,849
  • 4
  • 43
  • 55