2016-06-19 8 views
0

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> 
+0

で助けなら、私を知ってみましょうあなたのアクションを作成

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 

になどrespond_toブロックを追加することだと思います。あなたの問題がどこで発生しているのか絞り込み、少し詳しく説明できますか? –

+0

私はJavaScriptに問題があります。ここで私がYouTubeで見つけたチュートリアルに基づいて何をしようとしているのか、ここにリンクがあります。 https://www.youtube.com/watch?v=FBxVN7U1Qsk、私はそれを正確に行うつもりですが、このコントローラーのインデックスページでは基本的に行います。 –

+0

あなたのコードではすべてがうまくいくように思えますが、いくつかの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)'問題を回避する方法については、 –

答えて

0

あなたのログをチェックした場合js.erb景色が全く呼ばれていた場合、あなたのアクションのみでHTMLに対応するために知っているので、私は、疑います瞬間私はこの問題を解決する方法は、それはあなたがここにコードの多くを示しているすべての

+0

を参照してください。 –

+0

それはそのままでは機能しませんか? – oreoluwa

+0

いいえ、フォームが消えてしまい、一度投稿が行われ、もともとは隠れていたリンクが表示されません。新しいコンテンツがマインドマップ部門に追加されていません –

関連する問題