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?

GeorgeNL · Accepted Answer · 2016-06-21 18:37:30Z

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:

jQuery API

edited Jun 21, 2016 at 18:37

GeorgeNL

33 bronze badges

answered Jun 14, 2010 at 15:21

Eduardo Molteni

39.5k25 gold badges145 silver badges212 bronze badges

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

2 Comments

Eduardo Molteni Over a year ago

Let me know if you need further assistance

pj4533 Over a year ago

Thanks, I think I am getting closer. However, I still am stuck on how rails fits in. I added the ajax call as above, and it calls into my controller correctly (after adding the route). But I am stuck on what to do in the controller code. I tried modeling it after my previous experience with RJS code, but that didn't seem to work (possibly cause I am using jQuery, rather than prototype?) Can you give a quick example of how to do the controller code?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related