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

Question

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 1

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:

• 5 Ways to Make Ajax Calls with jQuery
• Beginners Guide to Using AJAX with jQuery