Railsの：私のレールのアプリでは、ブートストラップモーダル

Question

内belongs_toの関連付けのためのform_forを作成し、私はコスト/ Cost_Dependencies

間にhas_many/belongs_toの関連を持っているユーザーは、その後で閲覧ます新しいコストをすることができますインデックスアクション、特別なものはありません。しかし、私は、コストが作成された後、コストのCost_dependencyを作成する機能を追加しようとしています。私はすべての部分を適所に持っているので、（効率のために）ブートストラップモードで実行するだけで助けが必要です。私のサイトのIndexビュー内では、ユーザーはすべてのコストの表を見て

：

依存関係欄の下側に、私は、ユーザーがポップ+ボタンとモーダルをクリックできるようにしたいですフォームでアップ。ここで

は、私がこれまでのところに持っているものです。 私のルートは私にこれを与える：

cost_cost_dependencies GET /costs/:cost_id/cost_dependencies(.:format)   cost_dependencies#index 
          POST /costs/:cost_id/cost_dependencies(.:format)   cost_dependencies#create 
new_cost_cost_dependency GET /costs/:cost_id/cost_dependencies/new(.:format)  cost_dependencies#new 
edit_cost_cost_dependency GET /costs/:cost_id/cost_dependencies/:id/edit(.:format) cost_dependencies#edit 
cost_cost_dependency  GET /costs/:cost_id/cost_dependencies/:id(.:format)  cost_dependencies#show 
          PATCH /costs/:cost_id/cost_dependencies/:id(.:format)  cost_dependencies#update 
          PUT /costs/:cost_id/cost_dependencies/:id(.:format)  cost_dependencies#update 
          DELETE /costs/:cost_id/cost_dependencies/:id(.:format)  cost_dependencies#destroy 

だから私は明らかにコストを通じてこの事を作成する能力を持っています。 （私は私ができる場合cost_dependencies用に別のコントローラを避けるためにしようとしますが、ない場合は、私に知らせています。）

をインデックス内で費用を閲覧、私はこれらの作品を持っている：

<div class="btn-group" style="margin:0; height:100%; float: center !important"> 
    <%= link_to '<i class="glyphicon glyphicon-eye-open"></i>'.html_safe, "/costs/#{cost.id}/cost_dependencies", class: 'btn btn-warning' %> 
    <%= link_to '<i class="glyphicon glyphicon-plus"></i>'.html_safe, "/costs/#{cost.id}/cost_dependencies/new", {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window', :class => 'btn btn-success'} %>  
</div> 

そして

<div id="modal-window" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <%= render 'costs/new_cost_dependency' %> 
     </div> 
    </div> 
</div> 

私は同様の依存関係を表示するためのモーダルを実装する上で計画を行いますが、私はそれで私を助ける答えこの質問を取得把握します。部分内のモーダル・ボディのためのその後

：

<div class="modal-body"> 
    <%= form_for @cost_dependency, :html => {:class => "form-group"} do |f| %> 
    Blah Blah form stuff looking like <%= f.label ... %> and <%= f.text_field ... %> 
    <% end %> 
</div> 

私が受けてきたので、私はこだわっている作品は、コントローラでdatabase_associationてフォーム内@cost_dependency変数をインスタンス化する方法でありますa

First argument in form cannot contain nil or be empty 

ページをリロードしようとするとエラーが発生します。

これを達成するための助けがあれば非常に役に立ちます。 は

編集ありがとうございました：はここに私のコストコントローラです：

def index 
    @costs = Cost.all 
    respond_to do |format| 
    format.html # index.html.erb 
    format.json { render json: @costs } 
    end 
end 

def show 
end 

def new 
    @cost = Cost.new 
    @new = true 

    respond_to do |format| 
    format.html # new.html.erb 
    format.json { render json: @cost } 
    end 
end 

def edit 
    @edit = true 
    @cost = Cost.find(params[:id]) 
end 

def create 

    @cost = Cost.new(cost_params) 

    if Cost.exists?(:category => @cost.category, :option => @cost.option) 
    redirect_to action: 'update', id: Cost.where(:category => @cost.category, :option => @cost.option).first.id 
    else 
    respond_to do |format| 
     if @cost.save 
     format.html { redirect_to action: 'index', status: 303, notice: [true, 'Cost was successfully created.'] } 
     format.json { render json: @cost, status: :created, location: @cost } 
     else 
     format.html { render action: "new" } 
     format.json { render json: @cost.errors, status: :unprocessable_entity } 
     end 
    end 
    end 
end 

def update 
    @cost = Cost.find(params[:id]) 

    respond_to do |format| 
    if @cost.update_attributes(cost_params) 
     format.html { redirect_to action: 'index', status: 303, notice: [true, 'Cost was successfully updated.'] } 
     format.json { head :no_content } 
    else 
     format.html { render action: "edit" } 
     format.json { render json: @cost.errors, status: :unprocessable_entity } 
    end 
    end 
end 

だから私は私の@cost_dependency変数がここにいないことを実現します。新しいものを入れたら、現在はindexのアクションに入っているので、呼び出されません。その点でも助けになるでしょう。

私はこの質問を投稿して以来、私はCostDependency同様の機能を持つコントローラを作った。

編集2：私は新しいものを試し続けてきましたが、もう少し進んできましたが、もう一度立ち往生しました。

私は新しいインデックスページがあります。

<tbody> 
    <% @costs.each do |cost| %> 
    <tr> 
     <td style="vertical-align:middle !important"><%= cost.category %></td> 
     <td style="vertical-align:middle !important"><%= cost.option %></td> 
      <td style="vertical-align:middle !important"><%= '$'+cost.per_job.to_s %></td> 
      <td style="vertical-align:middle !important"><%= '$'+cost.per_page.to_s %></td> 
      <td style="vertical-align:middle !important"> 
      <div class="btn-group" style="margin:0; height:100%; float: center !important"> 
       <%if Cost.where(:id => cost.id)[0].cost_dependencies.empty? %> 
       <span class="btn btn-danger" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<h5 style='color: black;'>No Dependencies for this Cost</h5>"><i class="glyphicon glyphicon-eye-close"></i></span> 
       <% else %> 
       <%= link_to '<i class="glyphicon glyphicon-eye-open"></i>'.html_safe, "", {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window', :class => 'btn btn-warning', :cost => cost.id} %> 
       <% end %> 
       <%= link_to '<i class="glyphicon glyphicon-plus"></i>'.html_safe, "", {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-new-dependency', :cost => cost.id, :class => 'btn btn-success'} %> 
      </div> 
      </td> 
      <td style="vertical-align:middle !important"> 
      <div class="btn-group" style="margin:0; height:100%; float: center !important"> 
       <%= link_to '<i class="glyphicon glyphicon-pencil"></i>'.html_safe, "/costs/#{cost.id}/edit", class: 'btn btn-info'%> 
       <%= link_to '<i class="glyphicon glyphicon-trash"></i>'.html_safe, cost, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %> 
      </div>  
      </td> 
    </tr> 
    <div id="modal-window" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <%= render 'costs/dependency_index', :cost => Cost.where(:id => cost.id)[0] %> 
     </div> 
     </div> 
    </div> 
    <div id="modal-new-dependency" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <%= render 'costs/new_cost_dependency', :cost => Cost.where(:id => cost.id)[0] %> 
     </div> 
     </div> 
    </div> 
    <% end %> 
</tbody> 

これはエラーをスローしませんが、私は+をクリックしたとき、私はこの場合Size - 8.5" x 11"には、最初のコストを受けていますし、私のログが吹くまでをあたかもそれがすべてを選択しようとしているかのように、それは.eachループ内にあるので少し意味があります。私はそれを引き出す場合、それはスコープ

Answer 1

オーケー外に存在しないため、

しかし、私はcost.idためundefined variableエラーを取得し、私はこの獣を考え出しました。私が答えている間、私についてください。

ここであなたの親友はajaxです。

だから、このよう

<button class="btn btn-success" data-toggle="modal" data-target="#new-dependency-modal-window" id="newdependency"> 
    <%= hidden_field_tag "cost_id", cost.id %> 
    <span class="glyphicon glyphicon-plus"></span> 
</button> 

：まず、ボタンへnew（プラス）メソッドのlink_toを変更。後で再生される/cost/:id/cost_dependencies/newにはリンクが全くないことに注意してください。

：最終 div（ファイルの終わり）、

<div id="new-dependency-modal-window" class="modal fade" role="dialog" aria-labelledby="myNewDependencyModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document" id="new_cost_dependency_modal" style="width: 85%"> 

    </div> 
</div> 

次のモーダルの存在のためにこのコードを追加コストの依存関係のためのコントローラを作成し、通常のメソッドを追加するには、以下

それぞれの方法で@cost = Cost.find(params[:cost_id])が、これはあなたが@cost.cost_dependencies.newメソッドを呼び出すことができるため、正しいCostをつかむだろうが、どのよう

class CostDependenciesController < ApplicationController 

    def new 
    @cost = Cost.find(params[:cost_id]) 
    @cost_dependency = CostDependency.new 
    respond_to do |format| 
     format.html # new.html.erb 
     format.json { render json: @cost_dependency } 
    end 
    end 

    def edit 
    @edit = true 
    @cost = Cost.find(params[:cost_id]) 
    @cost_dependency = @cost.cost_dependencies.find(params[:id]) 
    end 

    def index 

    end 

    def create 
    @cost = Cost.find(params[:cost_id]) 
    @cost_dependency = @cost.cost_dependencies.new(cost_dependencies_params) 
    respond_to do |format| 
     if @cost_dependency.save 
     format.html { redirect_to controller: 'costs', action: 'index', status: 303, notice: [true, 'Cost Dependency was successfully created.'] } 
     format.json { render json: @cost_dependency, status: :created, location: @cost } 
     else 
     format.html { render action: "new" } 
     format.json { render json: @cost_dependency.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    def update 
    @cost = Cost.find(params[:cost_id]) 
    @cost_dependency = @cost.cost_dependencies.find(params[:id]) 

    respond_to do |format| 
     if @cost_dependency.update_attributes(cost_dependencies_params) 
     format.html { redirect_to controller: 'costs', action: 'index', status: 303, notice: [true, 'Cost was successfully updated.'] } 
     format.json { head :no_content } 
     else 
     format.html { render action: "edit" } 
     format.json { render json: @cost.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

def destroy 
    @cost = Cost.find(params[:cost_id]) 
    @cost_dependency = @cost.cost_dependencies.find(params[:id]) 
    @cost_dependency.destroy 

    respond_to do |format| 
    format.html { redirect_to controller: 'costs', action: 'index', status: 303, alert: [true, 'Cost Dependency has been deleted.'] } 
    format.json { head :no_content } 
    end 
end 


private 
    def cost_dependencies_params 
    params.require(:cost_dependency).permit(:cost_id, :dependency_category, :dependency_option, :per_job, :per_page) 
    end 

end 

注意してください。これは、buttonタグ内のhidden_​​fieldタグがjQueryによってパラメータを検索可能にする理由です。

ここから、新しいメソッドをjQueryからajax呼び出しを使用して呼び出すと、コンテンツを取得してモーダル内に移動します。

$(document).on "turbolinks:load", -> 
    $('button[id="newdependency"]').click -> 
     cost_id = $(this).find('#cost_id').val() 
     $.ajax({ 
      url: 'costs/'+cost_id+'/cost_dependencies/new', 
      type: 'GET', 
      data: {cost_id: cost_id}, 
      dataType: 'html', 
      success: (data) -> 
       dependencyform = $($.parseHTML(data)).find("#new_dependency_modal") 
       $('#new_cost_dependency_modal').html(dependencyform) 
     }) 

は、だから我々はnewdependency IDを持つボタンがクリックされた後、我々は戻って、すべてのページ全体、ナビゲーションバーとなり、ページの読み込み（HTMLを取得する実行します。しかし、私たちは私たちが望むコンテンツを（ラベル。new_dependency_modal）ので、我々はfind()それをすることができますを参照してください我々は現在、オンのままであることのhtmlを取ると、ページ上のモーダルdiv内側に設定

注：thisをそれ以外の場合は、最初cost_idをつかむだろう、ここで重要なページ上で見つからない場合は、スコープをローカライズします。

わかりやすくするために、私のnew.html.erbページが呼び出されます。

<div class="modal-content" id="new_dependency_modal"> 

    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h2 style="color: #49afcd" class="center-block westmontTextMuseo3">New Cost Dependency for - <%= @cost.category+" - "+@cost.option %></h2> 
    </div> 
    <div class=modal-body> 
    <%= render 'form' %> 
    </div> 
</div> 

ここで、フォームは新しいcost_dependencyを作成するためのフォームに過ぎません。