Display Rails View in Bootstrap Module

Question

I hit a brick wall. I have cracked this problem for so long, I don’t even know how I got to where I am. All I can say, I tried everything below without success:

• How to add bootstrap modal with link_to so that the contents of the link open in modal format?
• 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 to render “new”, “edit” and “delete” views in Bootstrap models in the “index” view, rather than linking to separate pages for each?

Here is my code as of now. For now, let's ignore the “edit” and “delete” and just focus on the “new”. When I click the Create button, a modal line appears with the line "<% = j render" items / new "%>" (instead of the form that Ruby 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

products / 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>

products / new.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span>&times;</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" %>');
});

Answer 1

In the case of a new one, for example, you want to display a javascript file. To do this, you need to create the /new.js.erb elements.

", data: {toggle:" modal ", target:" #newModal "}" , 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

"" , ( ).

Answer 2

, "3" 3 :

<script>
setTimeout(function() {
    $("#holder").html("<%= j render(:file => 'things/test.html.erb') %>");
}, 3000);
</script>
<div id="holder></div>

///test.html.erb

<h1><%= 1 + 2 %></h1>

.