Ruby/Rails/AJAX/JQuery - On link click, passing a parameter and performing a controller action

Question

I'm trying to use clicking a link to perform and action in my controller called 'yes' but do so client side rather than having to refresh everytime a user clicks.

Before I had an link_to that routed to a action called "yes" and passed the id of a model I have called 'event'

      <%= link_to "yes", yes_path(event)%>   (in view)

      match 'user/:id/yes' => 'user#yes', :as => "yes"   {in routes.rb)

The problem issue is that every time the user clicks the link the page refreshes while it performs the yes action, so it will flow alot smoother if I can tell the backend to perform the actions client side.

S0 I found a reference here : execute controller/action from javascript in rails3

and took a look at the documentation : http://api.jquery.com/jQuery.ajax/

And came up with this. Where if the post is successful at the previous route from above change a css class for the link (change color).

 $.ajax({
       type: "POST",
       url: "/user/" + $(this).attr('event') + "/yes/",
       success: function(){
           $(".like").click(function() {
           if ($(this).hasClass("selected")) {
           $(this).addClass("selected");
           return false;  } 
    });

I also added this is the bottom of the controller that the desired javascript is being used.

respond_to do |format|
     format.html { }
     format.js
end

So now my link_to looks like this

 <%= link_to "yes", yes_path(event), :class => "like", :remote => true %>

But the page is still refreshing and It doesnt look like its calling the AJAX at all.

am I passing the parameter "event" properly as a jquery attribute?
am I calling the link_to properly? This is my first time so I have no idea what I'm doing wrong, possibly a few things?

I'd really appreciate any help

Did you make sure that the jQuery JS files are included in the head? — Wizard of Ogz
– Wizard of Ogz, Commented Feb 26, 2011 at 4:39

kim3er · Accepted Answer · 2011-02-26 00:22:34Z

2

Is this what you're after?

$(".like").click(function(evt) {
    evt.preventDefault();

    var $self = $(this);
    $.post($self.attr("href"), function(response) {
        $self.addClass("selected");
    });
});

The first line binds the JavaScript to all elements with a class of like. preventDefault is the preferred way to prevent the default behavior of an anchor tag (navigate to the href). $.post() is shorthand for $.ajax({ type: "POST" }).

Whatever you want to happen after a successful post to the server goes that finally function call. The first argument is the response from the server.

Rich

edited Feb 26, 2011 at 0:22

answered Feb 26, 2011 at 0:14

kim3er

6,5365 gold badges44 silver badges73 bronze badges

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

3 Comments

kim3er Over a year ago

@ChrisWesAllen $.post is one of a few shorthand methods for $.ajax.

ChrisWesAllen Over a year ago

Thanks so much for the help. 2 questions => does the self.attr("href") servce as the url tag? and where do I specify the route? should I the link_to tag?

kim3er Over a year ago

@ChrisWesAllen The answer to both questions is that your ruby should work as is. The link_to route is translated into a URL that is placed in the href attribute of the resulting anchor tag. The JS above simply extracts the href and sends an Ajax POST to the URL instead of a standard GET request.

Collectives™ on Stack Overflow

Ruby/Rails/AJAX/JQuery - On link click, passing a parameter and performing a controller action

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related