Rubyでレール上にアプリケーションを構築しています。レールとルビのバージョンは上記の通りです。Ruby 2.2.3でJavascript/Jqueryをレール4.2.4に実装する方法
私の目的は、マインドマップインデックスビューにJavaScript/Jqueryを実装して、ページ全体をリロードせずにページに情報を動的に追加できるようにすることです。したがって、フォームの提出時にフォームが消えて、指定されたdivビューに新しいデータを追加する必要がある、マインドマップフォームを表示するリンクがクリックされます。 - これまでのところ、新しいリンクをクリックすると、マインドマップフォームを表示できましたが、フォームの提出時にフォームが消えません。私は、ユーザーが情報を入力して提出することを許可することができましたが、フルページのリロードを行った後にのみ情報が表示されます。
私は数字を試しましたが、何も役立たないようです。
誰かお手伝いください。あなたがシカゴに住んでいるなら、私はあなたにビールを借りています:)。
以下は、controller、js、viewsファイルです。 マインドマップの下に配置されている
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ファイルは、フォルダとしてFYI
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) %>");
マインドマップビューインデックスページ
マインドマップ#インデックス
<%= 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>
で助けなら、私を知ってみましょうあなたのアクションを作成
になど
respond_to
ブロックを追加することだと思います。あなたの問題がどこで発生しているのか絞り込み、少し詳しく説明できますか? –私はJavaScriptに問題があります。ここで私がYouTubeで見つけたチュートリアルに基づいて何をしようとしているのか、ここにリンクがあります。 https://www.youtube.com/watch?v=FBxVN7U1Qsk、私はそれを正確に行うつもりですが、このコントローラーのインデックスページでは基本的に行います。 –
あなたのコードではすべてがうまくいくように思えますが、いくつかのjQueryを実行するにはページをリロードする必要があります。これはターボリンクの問題です。 [Turbolinksの削除](http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4)または[この回答](http://stackoverflow.com/questions)を参照してください。/18770517/rails-4-how-to-use-document-ready-with-turbo-link) '$(ready)'問題を回避する方法については、 –