Question

I have a view named servicios inside my static_pages, this view has a menu on the left that should load the diferent services description on click on the right div, I already made the AJAX call but now I don’t how to put the loaded content on the page.

app/views/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>

app/controllers/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 this is the Response by GET Request made to the server:

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>

How do I update the div#servicedesc every time that I select something from the menu.
I have been reading all over the internet (API, forums, here) but they are all confusing and messy

Answer 1

jQuery has a nifty function called load().

With this line of jQuery code, your div will load and display whatever comes back from that controller asynchronously:

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