I can get the modal to render in the DOM, but I can't get it to show, I get it to flash for an instant, but it doesn't stay. Here is the relevant code.
tasks_controller.rb
def edit
#task = Task.find(params[:id])
respond_to do |format|
format.html
format.js
end
end
edit.js.erb
$(document).ready( function() {
$("#edit_task_modal").html("<%= escape_javascript(render 'tasks/edit_task_modal') %>");
$("#edit_task_modal").modal('show');
});
_edit_task_modal.html.erb
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id="close_edit_task_modal" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="edit_task_modal_label">Edit Task</h4>
</div>
<%= form_for(:task, url: {action: 'update', id: #task.id},:html => {:class => 'form-horizontal'}) do |f| %>
<div class="modal-body">
<%= render(partial: 'form', locals: {f: f}) %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<%= f.submit 'Save Changes', class: 'btn btn-primary' %>
</div>
<% end %>
</div>
</div>
_task_div.html.erb
<div class="task well">
<a>Title: <%= "#{task.title}" %></a><br/>
Description: <%= "#{task.description}" %> <br>
Status: <%= "#{task.status}" %> <br>
Due Date: <%= "#{task.due_date}" %> <br>
Completed Date: <%= "#{task.completed_date}" %> <br>
<div style='text-align:right;'>
<%= link_to 'Edit', {controller: 'tasks', action: 'edit', id: task.id}, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#edit_task_modal'} %>
</div>
</div>
show.html.erb
<div id="edit_task_modal" class="modal fade" role="dialog" aria-labelledby="edit_task_modal_label" aria-hidden="true" tabindex="-1"></div>
EDIT: Added modal code
Turns out all I had to do was remove 'data-toggle'='modal' from the link to the modal. The javascript was showing it, then the html would toggle it making it hidden again.
Related
My application implements a Sumit/Approve/Reject workflow upon Skills. When a Skill is rejected, it creates a notification of which the reason should be input by the user through a modal window. Unfortunately, I am not comfortable with front-end development, and the modal window does not show up: it is not generated in the html output of the page. Here is the code I wrote:
1 - Skills controller creates a notification when the Reject button (in the Skill's Show view) is hit, and tries to render the notifications_edit_description_form.html.erb partial of the Notifications controller (which uses the #notification variable).
def reject
puts "-------------------------------------------------------"
puts "------------------ REJECTED ---------------------------"
puts "-------------------------------------------------------"
#skill.reject!
#skill.update_attribute(:status_id, statuses.find { |x| x["code"] == "REJECTED" }.id || 0)
#notification = Notification.create(playground_id: current_playground, description: t('SkillRejected'), severity_id: options_for('rules_severity').find { |x| x["code"] == "CORRECTION" }.id || 0,
status_id: statuses.find { |x| x["code"] == "NEW" }.id || 0, expected_at: Time.now + 1.day, responsible_id: #skill.parent.parent.reviewer_id, owner_id: current_user.id, created_by: current_login, updated_by: current_login,
topic_type: #skill.class.name, topic_id: #skill.id, deputy_id: #skill.parent.parent.responsible_id, organisation_id: #skill.organisation_id, code: #skill.code, name: t('SkillRejected'))
# Create title and description for current language
#notification.name_translations.create(field_name: 'name', language: current_language, translation: "#{t('Skill')} #{#skill.code} #{#skill.workflow_state}")
#notification.description_translations.create(field_name: 'description', language: current_language, translation: "#{format_datetime(Time.now)} #{current_user.name} :\n> #{t('SkillRejected')}")
render partial: 'notifications/edit_description_form', data: { toggle: "modal", target: "#editNotificationModal" }
end
2 - The notifications_edit_description_form.html.erb partial is:
<%= form_with model: #notification, html: {id: "edit_description_form"} do |f| %>
<div class="modal-header">
<h5 class="modal-title" id="editNotificationModalLabel">
<% if content_for?(:notificationModalTitle) %>
<%= yield(:notificationModalTitle) %>
<% else %>
<%= t('EditNotification') %>
<% end %>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "shared/error_list", locals: { errors: #notification.errors } %>
<fieldset>
<div class="row mat-form-row">
<div class="mat-form-field col-md-4">
<%= f.label :notification_severity_id, t('NotificationSeverity'), class: "mat-form-field-label" %>
<%= f.collection_select :severity_id, options_for('rules_severity') , :id, :name, {}, { class: "mat-input-element" } %>
</div>
<div class="mat-form-field col-md-4">
<label for="notification-issuer" class="mat-form-field-label">
<%= t('Issuer') %>
</label>
<input id="notification-issuer" class="mat-input-element" readonly
value="<%= #notification.owner.name %>" />
</div>
<div class="mat-form-field col-md-4">
<%= f.label :notification_expected_at, t('NotificationDueDate'), class: "mat-form-field-label" %>
<%= f.date_field :expected_at, { class: "mat-input-element" } %>
</div>
</div>
<div class="row mat-form-row">
<div class="mat-form-field col-md-4">
<%= render partial: "shared/translated_field_form", locals: {
f: f,
field: "description",
fields: :description_translations,
translations: #notification.description_translations,
isTextarea: true,
smallTextarea: true,
label: t('Description') } %>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="mat-stroked-button mat-button-base" data-dismiss="modal">
<%= t('Cancel') %>
</button>
<button class="mat-flat-button mat-button-base mat-primary">
<%= t('Submit') %>
</button>
</div>
<% end %>
3 - The target is defined in the Skill's Show view.
<!-- Notification Modal -->
<aside class="modal fade modal-remote" id="editNotificationModal" tabindex="-1" role="dialog" aria-labelledby="editNotificationModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content"></div>
</div>
</aside>
4 - The console reports that the partial has been rendered :
Rendered notifications/_edit_description_form.html.erb (67.1ms)
What did I miss? Where is my modal gone, and how to solve this?
Thanks a lot for your help!
The solution I found may not be optimum, but this works: from the Show view, link to new Notification path with modal target actually opens the notification in the modal window.
<%= link_to t('Reject'), new_notification_path(
playground_id: current_playground,
description: t("#{this_object.class.name}#{'Rejected'}"),
severity_id: options_for('rules_severity').find { |x| x["code"] == "CORRECTION" }.id || 0,
status_id: statuses.find { |x| x["code"] == "NEW" }.id || 0,
expected_at: Time.now + 1.day,
responsible_id: this_object.owner_id,
owner_id: current_user.id,
created_by: current_login,
updated_by: current_login,
topic_type: this_object.class.name,
topic_id: this_object.id,
deputy_id: this_object.parent.responsible_id,
organisation_id: this_object.organisation_id,
code: this_object.code,
name: t("#{this_object.class.name}#{'Rejected'}")
),
title: t('Reject'), data: {
toggle: "modal", target: "#editNotificationModal"
}, class: "mat-stroked-button mat-button-base mat-primary" %>
When the notification modal window closes, the Skill show view is still available.
I'm trying to do an edit object in Ruby on Rails using a modal form, when I try to do the link_to edit_plane_path(plane) in planes.html.erb I get the following error:
undefined local variable or method `plane' for #<#:0xd580e98>
Did you mean? #plane
plane_url
#planes
However, trying any of those doesn't really change the fact that I still get an error on the page and I can't even load it.
planes.html.erb
<table>
<thead>
<tr>
<th>Image</th>
<th>Operating agency</th>
<th>Date</th>
<th>Call sign</th>
<th>Country</th>
<th>Info</th>
<th>Action</th>
</tr>
<thead>
<tbody>
<% #planes.each do |p| %>
<tr class="gradeC">
<td>
<%= image_tag(p.image, size: "150x150")%></td>
<td class="w-25"><%= p.provider%>
</td>
<td><%= p.brand%></td>
<td class="center"><%= p.year%></td>
<td class="center"><%= p.call_sign%></td>
<td><%= p.country%></td>
<td><%= p.info%></td>
<td class="text-right">
<div class="btn-group">
<%= link_to 'Edit', edit_plane_path(plane), remote: true, :class =>'btn white btn btn-xs' %>
<button class="btn-white btn btn-xs">Delete</button>
</div>
</td>
</tr>
</tbody>
<% end %>
</table>
_form.html.erb
<!-- FORM EDIT -->
<div id="edit-plane" class="modal fade" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-sm-12"><h3 class="m-t-none m-b">Edit plane</h3>
</div>
</div>
<%= form_for #plane, url: planes_path, remote: true do |f| %>
<div class="form-group row">
<div class="col-sm-6">
<label>Brand</label>
<%= f.text_field :brand, class:"form-control"%>
</div>
<div class="col-sm-5">
<label>Model</label>
<%= f.text_field :model, class:"form-control"%>
</div>
</div>
<div class="form-group row">
<div class="col-sm-5">
<label>Year</label>
<%= select_tag :hyear, options_for_select(["2015","2016","2017","2018","2019"], "2019"), class:"select2_demo_1 form-control" %>
<%= f.hidden_field :year %>
</div>
<div class="col-sm-6">
<label>Country</label>
<%= select_tag :hcountry, nil, class:"select2_demo_1 form-control" %>
<%= f.hidden_field :country %>
</div>
<script language="javascript">
populateCountries("hcountry");
</script>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Provider</label>
<%= select_tag :hprovider, options_for_select([ "Test", "Test2"], "Test"), class:"select2_demo_1 form-control"%></select>
<%= f.hidden_field :provider %>
</div>
<div class="col-sm-5">
<label>Tactical call sign</label>
<%= f.text_field :call_sign, class:"form-control"%>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Extra info</label>
<%= f.text_area :info %>
</div>
<div class="col-sm-5">
<label>Image</label>
<%= f.file_field :image %>
</div>
</div>
<!-- SUBMIT -->
<button class="btn btn-primary btn-lg float-right ml-2" id="cancelbtn">Cancel</button>
<%= f.submit "Submit", id:"edpla", class: 'btn btn-primary btn-lg float-right'%>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
edit.js.erb
// Add the dialog title
$('#edit-plane h3').html("<i class=' glyphicon glyphicon-pencil'></i> Edit Plane");
// Render the edit form
$('.modal-body').html('<%= j render("form") %>');
// Show the dynamic dialog
$('#edit-plane').modal("show");
// Set focus to the first element
$('#edit-plane').on('shown.bs.modal', function () {
$('.first_input').focus()
})
update.js.erb
$('#edit-plane').modal('toggle');
$('#customer_<%= #plane.id %>').replaceWith('<%= j render (#plane) %>')
planes_controller.rb
class PlanesController < ApplicationController
def planes
#plane = Plane.new
#planes = Plane.all
end
def create
#plane = Plane.new(plane_params)
if #plane.save
flash[:success] = "Plane successfully added"
redirect_to :planes => 'post', :action => 'planes'
else
flash[:error] = "Something went wrong"
render 'planes'
end
end
def edit
#plane = Plane.find(params[:id])
end
def update
respond_to do |format|
if #plane.update(plane_params)
format.json { head :no_content }
format.js
else
format.json { render json: #customer.errors.full_messages, status: :unprocessable_entity }
end
end
end
private
def plane_params
params.require(:plane).permit(:brand, :model, :provider, :call_sign, :user, :country, :image, :info, :year)
end
end
My goal is to edit a plane in the table through a modal form, but I can't even show the page at the moment.
Here:
<% #planes.each do |p| %>
...you are passing each plane as p. Therefore, try:
<%= link_to 'Edit', edit_plane_path(p), remote: true, class: 'btn white btn btn-xs' %>
I was able to create reviews to book in the proper way. But I'm unable to create and edit reviews in modals.
I was able load the new review form in the modal but it only loads if a book already has reviews. If the books has no reviews then modal button won't work.
I get this error which I don't fully understand
First argument in form cannot contain nil or be empty
pointing to the edit form line
<%= form_for([#book, #review], remote: true) do |f| %>
I've tried to implement the modals for the book model which work well but the reviews doesn't.
books_controller.rb
def show
#reviews = #book.reviews
end
books/show.html.erb
<section id="reviews-section">
<div class="review-form">
<% if user_signed_in? %>
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#mynewreview">
Write your review
</button>
<% else %>
<p>You need to <%= link_to 'sign in', new_user_session_path, class: "btn btn-warning btn-sm" %> before writing a review buddy :)</p>
<br>
<% end %>
</div>
<br>
<div id="reviews_panel">
<%= render #reviews %>
</div>
</section>
reviews/_review.html.erb
<% if user_signed_in? %>
<% if review.user_id == current_user.id %>
<div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editreview_<%= review.id %>">Edit Modal</button>
<%= link_to 'Delete Review', book_review_path(review.book, review), class: "btn btn-sm btn-danger", method: :delete, remote: true, data: { confirm: "Are you sure?" } %>
</div>
<% end %>
<% end %>
<%= render 'reviews/widgets/new_review_modal' %>
<%= render 'reviews/widgets/edit_review_modal' %>
reviews/widgets/_new_review_modal
<%= form_for([#book, #book.reviews.build], remote: true) do |f| %>
<!-- Modal -->
<div class="modal fade" id="mynewreview" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Review</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="rating-form">
<label>Rating:</label>
</div>
<div class="field">
<p><%= f.text_area :comment, placeholder: 'Write comment...', class: "form-control review-text-field" %></p>
</div>
</div>
<div class="modal-footer">
<div class="actions">
<%= f.button "Submit Review", class: "btn btn-success btn-sm", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting Review..."} %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<script>
$('#rating-form').raty({
path: '/assets/',
scoreName: 'review[rating]'
});
</script>
reviews/widgets/_edit_review_modal
<%= form_for([#book, #review], remote: true) do |f| %>
<!-- Modal -->
<div class="modal fade" id="editreview_<%= review.id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit your review</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="rating-form">
<label>Rating:</label>
</div>
<div class="field">
<p><%= f.text_area :comment, placeholder: 'Write comment...', class: "form-control review-text-field" %></p>
</div>
</div>
<div class="modal-footer">
<div class="actions">
<%= f.button "Submit Review", class: "btn btn-success btn-sm", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting Review..."} %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<script>
$('#rating-form').raty({
path: '/assets/',
scoreName: 'review[rating]',
score: <%= #review.rating %>
});
</script>
in reviews_controller > edit action you must find #book and #review as well.
def edit
#review = #book.reviews.find(params[:id])
end
It looks like you are showing all reviews in show page of book. and you want to do edit with ajax. In that case you must be using some kind of loop and you must be assigning a single review object to any variable. you need to use that variable in form object
<%= #reviewes.each do |review| %>
<% form_for [#book, review] ... do %>
...
<% end %>
<% end %>
I have created the rails app that has a gallery. Now i am willing to have gallery cover photo. I want to update the cover photo using modal. to upload the photo i am using paperclip.
This is my model:
class Gallery < ActiveRecord::Base
has_attached_file :cover_url, :styles => { :small => "108x76" }
validates_attachment_content_type :cover_url, :content_type => ['image/jpeg', 'image/jpg', 'image/png']
end
This is my controller:
def update
puts params
respond_to do |format|
if #gallery.update(gallery_params)
format.html { redirect_to galleries_galleryhome_path(id: params[:id]), notice: 'Gallery was successfully updated.' }
format.json { render :show, status: :ok, location: #gallery }
else
format.html { render :edit }
format.json { render json: #gallery.errors, status: :unprocessable_entity }
end
end
end
def gallery_params
params.require(:gallery).permit(:name, :shoot_date, :release_date, :expiration_date, :archive,:gallery_layout_id, :contact_id,:status, :cover_url).merge(brand_id: current_brand.id,user_id: current_user.id)
end
This is my View:
<div class="cover-photo default pull-left">
<% if #find_gallery.cover_url.present?%>
<%=image_tag #find_gallery.cover_url.url(:small)%>
<%end%>
</div>
<div class="icon-cta" data-toggle="modal" data-target="cover_modal">
<% if #find_gallery.cover_url.present? %>
<%=link_to "Add<br>Cover".html_safe, "#profile-change" ,'data-toggle': "modal", class: "change-cover"%>
<% else %>
<%=link_to "Add<br>Cover".html_safe, "#album-title-popup" ,'data-toggle': "modal", class: "change-cover"%>
<% end %>
</div>
<!-- Album Cover Modal -->
<div class="modal fade" id="profile-change" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Album Cover</h4>
</div>
<%= form_for #gallery_cover,html: {multipart: true}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<%= label_tag "photo"%>
<div class="modal-body">
<%= f.hidden_field :cover_url,id: "hidden_cover_url"%>
<div class="empty stack">
<%= image_tag #find_gallery.cover_url.url,size: "355x237",id: "changecover"%>
</div>
</div>
<div class="modal-footer pull-left">
<button data-toggle="modal" data-target="#album-title-popup" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-trash set-stack"></span>Remove</button>
<button data-toggle="modal" data-target="#album-add-cover" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-picture-o set-stack"></span>Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= f.submit "Save"%>
</div>
<%end%>
</div>
</div>
</div>
<!-- Add Album Photo Modal -->
<div class="modal fade" id="album-add-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Cover</h4>
</div>
<div class="modal-body">
<%= form_for #gallery_cover,html: {id: "Cover-Upload"}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<ul class="source-links">
<li class="js-cover-flow-upload">
<span class="btn btn-file">
<p>Upload From Computer</p>
<%=f.file_field :cover_url, id: "Computer-Upload", onchange: "document.getElementById('hidden_cover_url').val = window.URL.createObjectURL(this.files[0])" %>
<%= f.hidden_field :id, value: params[:id]%>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
<li class="js-cover-flow-random">
<span class="btn btn-file">
<p>Choose From Gallery</p>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
</ul>
<%= image_tag "image",id: "sample"%>
<%= f.submit "Save", style: "display:none;",id: "Pc"%>
<% end %>
</div>
</div>
As you can see above there are two modals. On clicking of Add Cover Link #profile-change modal will open. This modal is having the button Change. On clicking this button it will open second modal i.e. #album-add-cover modal. On the second modal i can select the image to upload. As soon as i select the photo i should be redirected to first modal with the value selected on second modal so that i can update the cover photo of gallery on submitting the form on first modal.
This is the script that i have wrote:
function updatecover(input){
if (input.files) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$("#changecover").attr('src', e.target.result);
}
}
}
$("#Computer-Upload").change(function(){
updatecover(this);
alert($(this).val());
$("#changecover").attr("src",$(this).val());
// $("#Pc").click();
});
The above script is displaying the selected file on the first modal but on saving the photo it gives me error of:
Paperclip::AdapterRegistry::NoHandlerError in GalleriesController#update
It is updating the profile pic without loading the first modal.
Please any one can help me? Thank you in advance.
I have hit a brick wall. I've been hacking at this problem for so long now, I'm not even sure how I got to where I am. All I can say is, I've tried all of the below without success:
How to add bootstrap modal with link_to so the link content open in modal ?
How to show twitter bootstrap modal via JS request in rails?
rails link_to :remote
http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/link_to_remote
How do I render "new", "edit" and "delete" views within Bootstrap modals on the "index" view rather than linking to separate pages for each?
Here is my code as it stands now. For now, lets ignore "edit" and "delete" and just focus on "new". When I click the "New" button, a modal with the string "<%= j render "items/new" %>" appears (instead of the form that that ruby statement should render). What am I doing wrong?:
items_controller.rb:
class ItemsController < ApplicationController
def index
#items = Item.all
end
def new
respond_to do |format|
format.js {}
end
end
def create
#item = Item.new(item_params)
if #item.save
flash[:notice] = "'#{#item.name}' saved!"
redirect_to items_path
else
flash[:notice] = "Something went wrong :("
render "index"
end
end
def edit
#item = Item.find(params[:id])
respond_to do |format|
format.js {}
end
end
def update
#item = Item.find(item_params[:id])
if #item.update_attributes(item_params)
flash[:notice] = "Successfully updated #{#item.name}."
redirect_to items_path
else
flash[:notice] = "Oops"
# render "edit"
end
end
private
def item_params
params.require(:item).permit(:name, :bid, :uuid)
end
end
items/index.html.erb
<div class="row">
<div class="col-xs-12">
<%= link_to "New", new_item_path, remote: true, class: "btn btn-success pull-right new", data: { toggle: "modal", target: "#newModal" } %>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-hover items">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>UUID</th>
<th colspan="2">Links</th>
</tr>
</thead>
<tbody>
<% #items.each do |item| %>
<tr>
<td><%= item.id %></td>
<td><%= item.name %>
<!-- edit/remove icons -->
<span class="edit-remove">
<%= link_to edit_item_path(item.id), remote: true, data: { toggle: "modal", target: "#editModal" } do %>
<span class="glyphicon glyphicon-pencil text-muted"></span>
<% end %>
<a href="#">
<span class="glyphicon glyphicon-remove text-muted"></span>
</a>
</span>
</td>
<td><%= item.uuid %></td>
<td><%= link_to "XXX", "http://xxx" %></td>
<td><%= link_to "XXXX", "http://xxx", target: "_blank" %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
<!-- newModal skeleton -->
<div class="modal fade" id="newModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<!-- editModal skeleton -->
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<!-- deleteModal skeleton -->
<div class="modal fade" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
items/new.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">New Item</h4>
</div>
<div class="modal-body">
<%= form_for :item, url: { action: "create" } do |f| %>
<div class="form-group">
<%= f.label :name, "Name" %>
<%= f.text_field :name, { class: "form-control" } %>
</div>
<div class="form-group">
<%= f.label :bid, "BID" %>
<%= f.text_field :bid, { class: "form-control" } %>
</div>
<div class="form-group">
<%= f.label :uuid, "UUID" %>
<%= f.text_field :uuid, { class: "form-control" } %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<%= submit_tag "Save", class: "btn btn-primary" %>
<% end %>
</div>
javascripts/items.js
$(document).on("page:change", function() {
$("#newModal .modal-content").html('<%= j render "items/new" %>');
});
In the case of new for instance, you want to render a javascript file. For this, you'll need to create items/new.js.erb.
Also, remove ", data: { toggle: "modal", target: "#newModal" }" from your link, we will do that in the javascript.
# new.js.erb
$("#newModal .modal-content").html('<%= j render "items/form" %>');
$("#newModal").modal(); // Or whatever the Bootstrap function is to render the modal
# items/_form.html.slim
# Here you'll put your form
You cannot use "render" on views directly, you should render partials and not views (this is why I asked you to put your form into a partial).
I threw this together and it puts a big '3' in my document 3 seconds after loading it:
<script>
setTimeout(function() {
$("#holder").html("<%= j render(:file => 'things/test.html.erb') %>");
}, 3000);
</script>
<div id="holder></div>
app/views/things/test.html.erb:
<h1><%= 1 + 2 %></h1>
That should get you going.