Rails ajax jquery problem

Question

Ok I have this problem I'm trying to use Jquery to load a partial in replace of a listed object.

index.html.erb

<div class="style_image_<%= style.id %>" > <%=link_to image_tag(style.cover.pic.url(:small)), style %></div>

loadshow:

$(function() {
    $(".style_image_<%= style.id %> a").click(function() {
    $(".style_image_<%= style.id %>").html("loading... ")
    $(".style_image_<%= style.id %>").html("<%= escape_javascript(render("show")) %>")
    $.get(this.href, null, null, "html");
    return false;
  });
});

_show.html.erb:

<%=link_to image_tag(style.cover.pic.url(:normal)), style %>

I'm getting this error:

missing ) after argument list
[Break on this error] $(".style_image_<%= style.id %>").htm...scape_javascript(render("show")) %>")\n

There is two problems with my code here the first is the click function is not targeting the .style_image_<%= style.id %> .... i.e (.style_image_42) if I replace the css target with 42 instead of _style.id the click target works; why is this?

And with or without this change the _show partial is not render and the above error is given.

Not really that good with Javascript any help would be great!

P.s.

The effect I really want is like one of those super cool cargo themes: http://cargocollective.com/publikspace

Thanks Dan!

Answer 1

The reason this isn't working is because you can't have ERB code in javascript files. Anything between <% %> in a javascript file won't be evaluated by Rails.

I'd advise either loading the images with AJAX or simply putting them in the HTML and using jQuery to show or hide them as necessary.

Answer 2

Of course you can have ERB code in a javascript file, name it xxxx.js.erb and you have access to it all.

Have a look at this link which shows a great example of how to 'ajaxify' links by simple adding a class to them. Once you do this you can class a link, and create a .js.erb file that will contain your javascript (including erb code) that gets called on success. and if you need too access the class_id, you now have the id of the object as well. id="yourobj_<%= @yourobj.id %>"

---

UPDATE The reason you javascript is failing is because you need to escape your quotes in the line that is throwing the error, like so:

$(".style_image_<%= style.id %>").html("<%= escape_javascript(render(\"show\")) %>");

OR just use single quotes, like so:

$(".style_image_<%= style.id %>").html('%= escape_javascript(render("show")) %>');

Answer 3

Still not sure why my js.erb file don't understand <%=style.id%>, maybe it's not the done thing to do here.

I have two solutions for this problem:

1. write the javascript in the controller and use a link_to_remote.

2. Unobtrusively Load link path in to the DIV of the link:

Image_tag link as above!

and in my Application.js file

$(function() {

$(".style_image a").live('click', function(event) { 

    $(this).closest(".style_teaser").load(this.href + " #show_photo");


    return false;       

});
});

With this method if javascript is off link will tak you to the show path of the object.

Thanks goes out to Nick Craver for give me the heads up on this!