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,

Kiry Meas · Accepted Answer · 2020-10-13 09:01:36Z

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

edited Oct 13, 2020 at 9:01

Kiry Meas

1,25219 silver badges28 bronze badges

answered Jan 9, 2014 at 9:50

ndemoreau

3,8694 gold badges46 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dennis Over a year ago

What's the 'j' in "<%= j render "new"%>" for?

ndemoreau Over a year ago

j is an alias for "unescape"

Brian Over a year ago

You could also set more link_to data options and skip the manual call to show the modal: data: {remote: true, toggle: "modal", target: "#myModal"}

Mark Swardstrom Over a year ago

j is an alias for escape_javascript: api.rubyonrails.org/classes/ActionView/Helpers/…

Flip · Accepted Answer · 2016-11-27 20:52:52Z

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>

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
Is this solution deprecated by Bootstrap 3.3? stackoverflow.com/a/18387625/1037965

Collectives™ on Stack Overflow

Rails: Edit record in Bootstrap modal

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related