Rails 4 - 通过 ajax 在 bootstrap 模式中显示数据

Question

我有一个非常简单的 Ruby 在 Rails 应用程序上，前端有 bootstrap 3：我有交易，每个交易 has_many 机会。

在每个交易页面上（交易 1 的 url 就像我的应用程序。com/id=1），我想要一个文本 link 说 "view deal's opportunities" 和单击 Bootstrap 模态内的内容外观时必须触发。

非常基本，但由于具体原因，我希望通过Ajax加载模态的内容。（用户加载交易页面时内容不可见但只有当他们点击 link“查看交易机会”

我在网上找到了许多关于 Rails4/ajax/Forms 和其他内容的 Ajax 资源，但不是通过 Ajax 在模态中使用简单的 "display content/text"。应该很容易，但我卡住了。

controller/deals_controller.rb

def showcase    
    deals = Deal.friendly.find(params[:id])   

    respond_to do |format|
      format.html # showcase.html.erb
      format.json { render json: @deal }
    end
end 

def show_opportunities

    @opportunities = Opportunity.where('deal_id = ? AND deal_type = ?',
                             @deal.id, "high tech").first

    respond_to do |format|
      format.js
    end

  end

app/views/deals/showcase.html.erb

this is the beginning
<%= render 'deals/deal_info_zone' %>
this is the end

views/deals/_deal_info_zone.html.erb

<div id="zoneA">  

  <div style="color:red;padding-top: 150px;">
    <%= link_to "view infos of Opportunities", deal_opportunities_modal_path, remote: true %>
  </div>
</div>

这是我想通过 ajax 触发的模式：views/deals/opportunity_modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-body"> 

          <%= @opportunity.name %> <br/>     

      </div>

    </div>
  </div>
</div>

routes.rb

match '/deals/:id', # this is the Deal page
    to:   'deals#showcase',
    via:  'get',
    as:   :deal_page

match '/opportunity_modal',
    to:   'deals#show_opportunities',
    via:  'get',
    as:   :deal_opportunities_modal

我是 RoR 的菜鸟，从未使用过 ajax，ujs 也许...我觉得它缺少 javascript 代码和 xhr 请求等东西...

目前的情况是这样的：当我进入交易页面（前页面 /deal id=1）时，文本 link "view infos of Opportunities"。并且浏览器指向 http://localhost:3000/opportunity_modal 但是当我点击它时它不会触发任何东西。什么都没发生。 firebug 控制台上没有显示任何内容。

Answer 1

当您单击 remote: true link 时，rails 不是在寻找 opportunity_modal.html.erb，而是在寻找 opportunity_modal.js.erb。你需要做的是将你的模态框放在一个部分中，然后用 JavaScript 渲染它。

将模态代码放入名为 views/deals/_opportunity_modal.html.erb.
创建一个 views/deals/opportunity_modal.js.erb 文件，该文件将在触发此操作时呈现并显示模式。

$('body').append('<%= j render partial: "views/deals/opportunity_modal" %>');
$('#myModal').modal('show');

此外，您在模态中有一个变量 @opportunity，但它没有在您的控制器中定义，因此请务必也定义它。

Rails 4 - 通过 ajax 在 bootstrap 模式中显示数据

Rails 4 - Display data inside a bootstrap modal via ajax

javascript

ruby

ajax

ruby-on-rails

ruby-on-rails-3