Question

I’m currently trying to update a specific <div> element on my page with the content sent back by the action of a specific controller. I’ve currently implemented it like this:

View:

link_to "Country: #{@vacancy.country.name}", semantic_country_url(@vacancy.country.id), :remote => true, :update => :semantic

Controller:

class SemanticController < ApplicationController
  # This action will communicate with DBPedia to retrieve information using the SPARQL endpoint
  # about the name of the specified city.
  def country
    country = Country.find params[:id]
    engine = SemanticSearchEngine.new
    @country = engine.country_information country.name, 'en'
    render(:update) { |page| page.replace_html 'semantic', :partial => 'semantic/country', :layout => false}
  end
end

This does the magic in the controller and updates the <div> with id “semantic” in the page that contains the link.
However, I don’t want to have this javascript logic in my controller, but I want to have this in a seperate jrs file (I use HAML, so it will probably be a.haml.jrs file).

But I don’t understand how i’m supposed to be doing this. I tried creating a jrs file that contained the JavaScript to perform the update, but when I called the action, I can see in Firebug the JavaScript beeing returned, but nothing was updated.

Could someone explain to me how I can make it work?

EDIT
I’ve added the country.js.erb file to the application which contains the following code:

$("semantic").replace();
$("semantic").insert("<p>#{@country.abstract.value}</p><p>#{@country.comment.value}</p><p>Currency: #{@country.currency.value}</p><p>Population: #{@country.population.value}</p><p>Capital: #{@country.capital.value}</p>");

In the controller I’ve placed the render line in comment to let rails select the correct rendering template based upon the request. This should be the country.js.haml file normally. When looking at the server development log, I see the following entry when clicking on the link:

Started GET “/semantic/country/5” for 127.0.0.1 at Wed Aug 24 09:05:52
+0200 2011 Processing by SemanticController#country as JS
Parameters: {“id”=>”5”} Country Load (2.0ms) SELECT countries.*
FROM countries WHERE countries.id = 5 LIMIT 1 Rendered
semantic/country.js.haml (4.0ms) Completed 200 OK in 944ms (Views:
70.0ms | ActiveRecord: 2.0ms)

So we can conclude that the remote link is working as intended. The Javascript returned is this:

$("semantic").replace();
$("semantic").insert("<p>#{@country.abstract.value}</p><p>#{@country.comment.value}</p><p>Currency: #{@country.currency.value}</p><p>Population: #{@country.population.value}</p><p>Capital: #{@country.capital.value}</p>");

I don’t think this is what it’s supposed to be?

EDIT2
Renamed the file to country.js.erb and inserted the following code:

$('semantic').replace();
$('semantic').insert('<p><%= @country.abstract.value %></p><p><%= @country.comment.value%></p><p>Currency: <[e-mail]%></p><p>Population: <%=@country.population.value%></p><p>Capital: <%=@country.capital.value%></p>');

The response from the server is a HTTP 200 with the following content:

$('semantic').replace();
$('semantic').insert('<p>The United Kingdom of Great Britain and Northern Ireland (commonly known as the United Kingdom, the UK, or Britain) is a country and sovereign state located off the northwestern coast of continental Europe. It is an island nation, spanning an archipelago including Great Britain, the northeastern part of the island of Ireland, and many smaller islands. Northern Ireland is the only part of the UK with a land border with another sovereign state, sharing it with the Republic of Ireland. Apart from this land border, the UK is surrounded by the Atlantic Ocean, the North Sea, the English Channel and the Irish Sea. Great Britain is linked to continental Europe by the Channel Tunnel. The United Kingdom is a constitutional monarchy and unitary state consisting of four countries: England, Northern Ireland, Scotland and Wales. It is governed by a parliamentary system with its seat of government in London, the capital, but with three devolved national administrations of varying powers in Belfast, Cardiff and Edinburgh, the capitals of Northern Ireland, Wales and Scotland respectively. The Channel Island bailiwicks of Jersey and Guernsey, and the Isle of Man are Crown Dependencies, which means they are constitutionally tied to the British monarch but are not part of the UK. The UK has fourteen overseas territories that are not constitutionally part of the UK. These territories are remnants of the British Empire, which at its height in 1922 encompassed almost a quarter of the world's land surface, the largest empire in history. British influence can still be observed in the language, culture and legal systems of many of its former colonies. The UK is a developed country, with the world's sixth largest economy by nominal GDP and the sixth largest by purchasing power parity. It was the world's first industrialised country and the world's foremost power during the 19th and early 20th centuries, but the economic and social cost of two world wars and the decline of its empire in the latter half of the 20th century diminished its leading role in global affairs. The UK nevertheless remains a great power with leading economic, cultural, military, scientific and political influence. It is a recognised nuclear weapons state while its military expenditure ranks third or fourth in the world, depending on the method of calculation. It is a Member State of the European Union, a permanent member of the United Nations Security Council, a member of the Commonwealth of Nations, G8, G20, NATO, OECD and the World Trade Organization.</p><p>The United Kingdom of Great Britain and Northern Ireland (commonly known as the United Kingdom, the UK, or Britain) is a country and sovereign state located off the northwestern coast of continental Europe. It is an island nation, spanning an archipelago including Great Britain, the northeastern part of the island of Ireland, and many smaller islands. Northern Ireland is the only part of the UK with a land border with another sovereign state, sharing it with the Republic of Ireland.</p><p>Currency: </p><p>Population: 62041708</p><p>Capital: London</p>');

But the content is still not beeing inserted…

EDIT 3
A colleague of mine says that there’s no binding on the code.
Alert(‘oops’) for example gets triggered, but when we try to select and element with $(‘name’) it returns null, even for stuff we know is definitly there and works in firebug console. So it seems there’s something missing, but I don’t know what.

EDIT 4
Created a new javascript file that contains the following code:

document.observe("dom:loaded", function(){
$('#semantic')
    .bind("ajax:success", function(evt, data, status, xhr){
        // Since we're dealing with ajax call, we'll handle the response as JavaScript
        eval(xhr.responseText);
    })
    .bind("ajax:error", function(evt, data, status, xhr){
        // Insert a custom error message when something goes wrong
        $('#semantic').replace();
        $('#semantic').insert('<p>A problem occured retrieving the information.</p>');
    });
 });

Apparently according http://www.alfajango.com/blog/rails-3-remote-links-and-forms/ i need to bind my own callbacks, which i’ve done with the above script, but still no dice….

Answer 1

Finally solved this whole mess:

Created a Javascript file to bind the callbacks

document.observe("dom:loaded", function(){
    $('semantic')
        .observe("ajax:success", function(evt, data, status, xhr){
            alert("success");
            // Since we're dealing with ajax call, we'll handle the response as JavaScript
            eval(xhr.responseText);
        })
        .observe("ajax:error", function(evt, data, status, xhr){
            alert("failed");
            // Insert a custom error message when something goes wrong
            $('semantic').replace();
            $('semantic').insert('<p>A problem occured retrieving the information.</p>');
        });
});

Relies on the Prototype.js file included, most web examples use jquery, so had to adapt several calls to be conform to the prototype standards.

Create the js.erb file

$('semantic').innerHTML = "";
$('semantic').insert("<p><%= CGI::escape(@country.abstract.value) %></p><p><%= CGI::escape(@country.comment.value)%></p><p>Currency: <%= CGI::escape(@country.currency.value) %></p><p>Population: <%= CGI::escape(@country.population.value) %></p><p>Capital: <%= CGI::escape(@country.capital.value) %></p>");

The problem here was the $(‘semantic’).replace(), this was for some reason removing the element instead of clearing it.

With these changes the remote call is working as intended.