# jQuery Rails Functions

**URL:** <https://www.ruby-forum.com/t/jquery-rails-functions/155042>\
**Category:** Rails\
**Created:** [December 6, 2008, 8:51pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042 "2008-12-06T20:51:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 6, 2008, 8:51pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/1 "2008-12-06T20:51:44Z")

</div>

Hi,

I was wondering if anybody who used jQuery with rails could help me  
out. I have a droppable that fires a simple function, shown below:

$("#list").droppable({  
accept: “.item”,  
hoverClass: ‘droppable-hover’,  
drop: function(ev, ui) {  
$(this).append(“  
Dropped!”);  
}  
});

But how could I get this to fire a Rails funciton in the controller so  
that the dropped item could be changed at a database level? For  
example, when it is dropped, how would I change the updated\_at value  
to Time.now?

Thanks,

DAZ

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 7, 2008, 12:39am UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/2 "2008-12-07T00:39:36Z")

</div>

Hi,

You need to call a function in your drop handler that goes out to rails  
to  
make the changes.

We do the following in some of our jquery handlers:

var c = {};  
c[‘authenticity\_token’] = encodeURIComponent(window.\_token);  
c[‘user\_id’] = \<%= current\_user.id %\>;  
$.post("\<%= url\_for(:action =\> ‘lock’, :id =\>  
@current\_page.form\_data.id)  
%\>", c);

Cheers  
Simon

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 7, 2008, 9:27pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/3 "2008-12-07T21:27:34Z")

</div>

Thanks Simon, but I’m really new to jQuery - I think I know how to  
call a function from the drop handler:

$("#dropper").droppable({  
accept: “#dragger”,  
drop: dropped()

});

function dropped(){  
// do stuff  
}

But what do I have to put in the dropped function that actually  
accesses rails? You seem to be using $.post, but I don’t really know  
how this works. Also, I’ve seen other examples use $.load, and again,  
I don’t quite get how it works.

Is there any good documentation on this?

cheers again,

DAZ

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 8, 2008, 9:06pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/4 "2008-12-08T21:06:18Z")

</div>

Thanks for this Simon - very useful. So it seems that $.ajax is just a  
more general version of $.load and $.post - still trying to figure out  
the exact differences, but at least now I can gain access to the  
controller and start updating model attributes. I haven’t had time to  
test your code, but will have a play around.

Also … is all the authenticity\_token stuff essential/best practice  
or are you just using that as an example?

thanks again,

DAZ

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 7, 2008, 11:01pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/5 "2008-12-07T23:01:24Z")

</div>

DAZ,

[http://docs.jquery.com/Main\_Page](http://docs.jquery.com/Main_Page) is pretty good.

We use $.post because of some extra stuff we need to do, but $.ajax is  
probably the best option for you.

Something like this should work (warning, written in front of the TV and  
untested)

$(“#list”).droppable({  
accept: “.item”,  
hoverClass: ‘droppable-hover’,  
drop: function(ev, ui) {  
var c = {};  
c[‘authenticity\_token’] = encodeURIComponent(window.\_token);  
$.ajax({  
type: “POST”,  
url: “url-to-your-rails-function”,  
data: c,  
success: function(msg){  
$(this).append(“  
Dropped!”);  
}  
error: function(msg) {  
# do failed stuff here  
}  
});  
}  
});

Simon

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 8, 2008, 10:45pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/6 "2008-12-08T22:45:43Z")

</div>

That’s cool.

Depends on the query I think, but it is generally required.

Rails has some rudimentary security built in to stop things (like search  
bots I guess) hitting controller functions. You can try it without, but  
keep an eye on the logs for an invalid authenticity token error.

Simon

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 8, 2008, 9:11pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/7 "2008-12-08T21:11:00Z")

</div>

Thanks for this Simon - very useful. So it seems that $.ajax is just a  
more general version of $.load and $.post - still trying to figure out  
the exact differences, but at least now I can gain access to the  
controller and start updating model attributes. I haven’t had time to  
test your code, but will have a play around.

Also … is all the authenticity\_token stuff essential/best practice  
or are you just using that as an example?

thanks again,

DAZ

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 13, 2008, 7:54am UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/8 "2008-12-13T07:54:31Z")

</div>

Hey DAZ,

No probs.

From our code…  
$.ajax({  
url: “/form\_datas/correct/”+formId,

so, form\_datas is our controller, correct is the action, and formId is  
the  
id param passed to the action

you may be able to use rails helper methods, I don’t know, we just  
specify  
the URL as above.

cheers  
Simon

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 13, 2008, 4:35pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/9 "2008-12-13T16:35:23Z")

</div>

Thanks again Simon - your help is very much appreciated!

Here are a few things I have found out - in case anybody else is  
reading this:

- To get the authenticity tag to work you need this somewhere in your  
view:  
\<%= javascript\_tag “window.\_token = ‘#{form\_authenticity\_token}’” if  
protect\_against\_forgery? %\>

Then you can get the authenticity token by referencing window.\_token

- You can use nice RESTful urls and even fake out the PUT and DELETE  
requests, for example

$post("/tasks/1"); will go to the show page for the task with id 1  
$post("/tasks/1",{\_method: “PUT”,authenticity\_token: encodeURIComponent  
(window.\_token)});  
will go to the update action for the task with id 1

Hope that makes sense!

cheers,

DAZ

---

<div class="post-metadata">

**Author:** ![daz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/87869e/32.png) [@daz](https://www.ruby-forum.com/u/daz)\
**Post date:** [December 12, 2008, 7:22pm UTC](https://www.ruby-forum.com/t/jquery-rails-functions/155042/10 "2008-12-12T19:22:38Z")

</div>

Thanks again Simon, I’ve since noticed that all forms created by the  
form\_for helper have authenticity token code in too (albeit using some  
ugly inline javascript!) so it id definitely something I’ll look into.

On a separate note … in your example, you simply listed  
url: “url-to-your-rails-function”

How do I specify the rails functions? I guess that I can’t use any  
nice helpers such as tasks\_path? Are the links relative to the root  
directory? The actual controller action I want to access would be a  
dropped action in the tasks controller, so is the url “/tasks/  
dropped” ?

I really appreciate all the help you have given so far, it has really  
helped me get to grips with jQueary on Rails - I’m finding it a great  
way to keep the JS unobtrusive!

cheers,

DAZ