Rails 3 - Ajax - Need help with some basic Javascript/Jquery

Question

I'm trying to learn some javascript and have gotten stuck.

Right now, I have a really stupid simple gallery/image application. What I'm trying to do is make it so, when someone clicks an image, it hyperlinks them to a url I have in my model data all with ajax. The reason why is I'd like to also do something with ajax, like update a score/vote counter for the image when it is clicked.

Right now in the view I do this with:

<% @galleries.each do |g| %>
    <% for image in g.images %>
    <div id="picture">
      <%= render 'top_nav'%>

      <%= link_to image_tag(image.file_url(:preview)), g.source, :remote => true, :target => "_blank" %>

So far, with javascript I've figured out how to open a url, but only if I hardcode one into the javascript. Here's my index.js.erb code (real simple):

window.open("http://www.google.com");

But I cannot figure out how I would link to my g.source like I am in my view's do loop. How do I access this model data in javascript? I have figured out how to render this code on click of the image though, with the follow in ...javascripts/application.js:

$(function() {
    $("#galleries #picture a img").live("click", function() {
        $.getScript(this.href);
        return false;
    });
});

Anyone have any pointers on how I can start interacting with my application's data rather than hardcoding a url in the open?

Thanks

your image link with remote true sends an ajax call to the image controller? the method needs to respond to js and it will render a template method.js by default. In that template you can include more javascript to complete the action. — awilkening
– awilkening, Commented Jul 27, 2011 at 4:40

amantur · Accepted Answer · 2011-07-27 04:47:53Z

2

You are pretty much on the right path to open image in a window, if the href you get from a points to image file.

Try with this code:

$(function() {
    $("#galleries #picture a img").live("click", function() {
        var lnk = $(this).closest("a").attr("href");
        window.open(lnk);
        return false;
    });
});

"#galleries #picture a img" is giving you img elements but you need the hyperlink which contains the image. so we will use $(this).closest("a") to get hyperlink for image url.

edited Jul 27, 2011 at 4:47

answered Jul 27, 2011 at 4:38

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kombo Over a year ago

Well that worked :) - Question: because we're looking at the img's, anchor's, href attribute(working through it in my head), it's preserving everything I write in the view when we open this link? As it's opening the link as it would see it in HTML from what I create with the link_to helper?

amantur Over a year ago

@Kombo don't get your question. But your helper will emit something like this: <a href='path to image'><img src='path to image'/></a>. So when you click on image it will open only image on new window, there will be not other html stuff there.

Kombo Over a year ago

Sorry about the confusing question. I figure it out playing around. I was curious if javascript was some how preserving the way to open the link from what I wrote in the view (for example a :target => "_blank") with the assignment. I am grateful for your help! This has helped my understand a lot.

Collectives™ on Stack Overflow

Rails 3 - Ajax - Need help with some basic Javascript/Jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related