pj4533 pj4533 - 5 months ago 19
jQuery Question

How to use a JQuery datepicker in a simple Rails app?

I am a newbie when it comes to Ruby On Rails (and web programming in general). I come from a typical desktop programming background. I have written a couple simple rails applications, but this is my first try at using Rails3, and my first usage of jQuery.

I am having trouble understanding how to connect my jQuery datepicker to my Rails application. I am sure that I am just not understanding something basic, so please correct anything you see wrong in my code, or point me to a good reference explaining this.

My application displays data from the database using the index function, without any modification from the default rails code. In the sidebar, I put 2 jQuery datepickers that I want to use to filter this data based on the date. I want the page to update when I select the date in the date picker, not when I click some button in a form.

The datepickers show up fine, but I can't figure out how to correctly connect them to my rails application. Here is the code:

<script type="text/javascript">
$(function() {
$("#from_filter").datepicker({
showOn: 'both',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
onSelect: function(date,inst) {
}
});

$("#to_filter").datepicker({
showOn: 'both',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
onSelect: function(date,inst) {
}
});
});
</script>
<div id="sidebarwindow">
<div id="sidebarwindowheader">Date Filter</div>
<table id="hor-zebra">
<tr>
<td><label for="from_filter">From:</label></td>
<td><div id="datepicker"><%= text_field_tag 'from_filter' %></div></td>
</tr>
<tr>
<td><label for="to_filter">To:</label></td>
<td><div id="datepicker"><%= text_field_tag 'to_filter' %></div></td>
</tr>
</table>
</div>


I have googled quite a bit, but I get lost quickly as most examples of jQuery -> Rails seem to focus on using forms, and here I don't want to. I verified with an alert() that the onSelect() is working correctly, but I don't know how to call my Rails controller from that function.

Basically, I want to choose a date, and then re-render the partials on the page that I know need to be updated. Maybe I just dont fully understand AJAX/jQuery/Rails?

Answer

Basically your problem is that you don't know what to put inside the OnSelect function.

In there I would call the ajax jQuery function to call your controller, and then use the callback function to add the HTML code needed.

$.ajax({ url: "/mycontroller/myaction", context: document.body, success: function(){
        $(this).addClass("done");
      }});

More info: