关于Rails的AJAX:如何放置加载的内容

时间:2013-01-20 12:11:58

标签: ruby-on-rails ajax ruby-on-rails-3

我的servicios内有一个名为static_pages的视图,此视图左侧有一个菜单,可以点击右侧div加载不同的服务说明,我已经制作了AJAX调用,但现在我不知道如何将加载的内容放在页面上。

应用/视图/ static_pages / servicios.html.erb

<%= provide(:title,'Servicios') %>
<% provide(:navbar,'serviciosnav') %>
<h1>Servicios</h1>
<div class="row">
    <div class="servicelist">
    <div class="navbar span4">
        <div class="navbar-inner">
            <ul class="nav" style="padding: 0">
            <% @servicios.each do |serv| %>
                <li><%= link_to serv.name,  "servicios/load?id="+serv.id.to_s, remote: true  %></li>
            <% end %>
            </ul>
        </div>
    </div>
    </div>
    <div id="servicedesc" class="span8">
        <%= render partial: "servicios/load", locals: {assets: @serv = @servicios.first} %>
    </div>
</div>
<script>
</script>

应用/控制器/ servicios_controller.erb

class ServiciosController < ApplicationController
  respond_to :html, :js

  def load
    @serv = Servicio.first
    if !params[:id].nil?
        @serv = Servicio.find(params[:id])
    end
    respond_with(@serv) do |format|
      format.html { render partial: "servicios/load"}
    end
  end
end

Ans这是对服务器的GET请求响应:

GET http://localhost:3000/servicios/load?id=5

304 Not Modified
        63ms    
jquery.js?body=1 (line 8435)
ParamsHeadersResponseCookies

<h2>Promoción de Inversiones</h2>
<ul>
        <li>Captación de Inversionistas en Mercados Externos.</li>
        <li>Promoción de Proyectos Industriales, Empresariales e Inmobiliarios.</li>
        <li>Intermediación en la compra ó venta de Empresas.</li>
</ul>

每次从菜单中选择内容时,如何更新div#servicedesc。 我一直在网上阅读(API,论坛,这里),但它们都令人困惑和混乱

1 个答案:

答案 0 :(得分:0)

jQuery有一个叫做load()的漂亮函数。

使用这行jQuery代码,你的div将加载并显示异步从该控制器返回的任何内容:

$('.navbar').on('click', function(){
  $('#servicedesc').load('servicios/load?id=5');
});