如何使用 ruby​​ 2.2.3 在 rails 4.2.4 中实现 Javascript/Jquery

Question

我正在用 ruby​​ on rails 构建一个应用程序。 rails 和 ruby​​ 的版本如上所列。

我的目标是在我的思维导图索引视图中实现 JavaScript/Jquery，以便它们可以动态地将信息添加到我的页面中，而无需重新加载整个页面。所以他们将是一个被点击的链接，它将显示思维导图表单，在提交表单时，表单应该消失并且新数据应该附加到指定的 div 视图中。 --到目前为止，一旦我单击新链接，我就能够显示思维导图表单，但是表单在提交表单时并没有消失。我已经能够允许用户输入和提交信息，但信息仅在我重新加载整页后才会显示。

我尝试了一个数字，但似乎没有任何帮助。

有人请帮忙。如果你住在芝加哥，我欠你一杯啤酒:)。

下面是控制器、js和视图文件。

class MindmapsController < ApplicationController

  before_action :find_capsule, only: [:new, :index, :create, :show, :update, :destroy]
  before_action :find_mindmap, only: [:show, :edit, :index, :update, :destroy]

  before_action :authenticate_author!

  def index
    @mindmaps = Mindmap.all.order('created_at DESC')

  end

  def new
    @mindmap = Mindmap.new
  end

  def create
    @mindmap = Mindmap.new(mindmap_params)
    if @mindmap.save
      respond_to do |format|
        format.html {redirect_to mindmaps_path , notice:"You have successfully created a Mindmap"}
        format.js
      end
    else
      render 'new'
    end
  end

  def show
  end

  def edit
  end

  def update
    if @mindmap.update(mindmap_params)
      redirect_to @mindmap , notice:" You have successfully updated Your Mindmap"
    else
      render 'edit'
    end
  end

  def destroy
    @mindmap.destroy
    redirect_to mindmaps_path
  end

  def find_mindmap
    @mindmap = Mindmap.find_by(params[:id])
  end

  def find_capsule
    @capsule = current_author.capsules.find_by(params[:id])
  end

  def mindmap_params
    params.require(:mindmap).permit(:src, :src_purpose, :capsule_id, :profile_id)
  end
end

JavaScript 文件位于思维导图视图文件夹下仅供参考

new.js.erb

$("a#new_mindmap_link").hide().after("<%= j render('form')%>");

create.js.erb

$("form#new_mindmap").remove();
$("a#new_mindmap_link").show();
$("div#mindmap").append("<%= j render(@mindmaps) %>");

思维导图索引页面

思维导图#index

<%= link_to "Create Mindmap", new_mindmap_path, id:"new_mindmap_link", remote: true %>
<% @mindmaps.each do |mindmap| %>
<div class="mindmap">    
    <div>Source: <%= mindmap.src %></div>
    <div class="meta">
  <%= link_to time_ago_in_words(mindmap.created_at) + " ago" , mindmap %>
        <span class="admin"><%= link_to "Edit", edit_mindmap_path(mindmap) %>
          <%= link_to "Delete", mindmap ,  method: :delete, data: { confirm: "Are you sure you want to delete this Mindmap" } %>
        </span>
    </div>
  </div>
<% end %>

思维导图形式

<div class="col-md-4 mindmap-container">
  <%= simple_form_for @mindmap, remote: true do |f| %>
    <%= f.input :src, as: :url, class:'form-control', label: false, placeholder:"Add a URL" %>
    <%= f.input :src_purpose, as: :text, class: 'form-control', label: false,  placeholder: "Add a description to your URL"%>
    <%= f.input :capsule_id, label: false, collection: Capsule.all, default: 'Select a capsule', label_method: :title %>
    <%= f.input :profile_id, label: false, collection: Profile.all, default: 'Select a Profile ID',label_method: :profile_name %>
    <%= f.button :submit, class:'btn btn-primary' %>
    <% end %>
</div>

Answer 1

如果您检查日志，我怀疑是否调用了 js.erb 视图，因为您的操作目前只知道响应 html。我认为解决此问题的一种方法是在您的创建操作中添加一个 respond_to 块

def create
    @muse = Muse.new(muse_params)
    @muse.author_id = current_author.id
    if @muse.save
      respond_to do |format|
         format.html { redirect_to @muse, notice: "You have successfully added your muses" }
         format.json
      end
    else
      render :new
    end
  end

让我知道这是否有帮助