Topic: [SOLVED] Calendar with Ajax / Jquery Updates Sidebar

Ok, so I've got my calendar of billable working!  Yay!

Now to make it more fun to use...

I'd like to be able to click on a date cell and update a side-bar with a nice list of billable for the day, and also show a time-entry form to create new billable for that date.

I've been plunking around with jquery and trying to follow the tuturials online but they all seem to focus on form and link_to helper stuff.  What I'm coming up with doesn't seem unobtrusive and the routes aren't working.

Here's what I have in my view:

<td class="date_cell <%=classes%>" id="<%=day%>" onclick="$.ajax({
          url: '<%= url_for :action => 'select_date' %>',
          data: 'date=<%= day %>',          
              dataType: 'script'});">
      <span class="day_number"><%= day.strftime('%d') %></span>
      <% @billables.each do |billable| %>
        <div class="billable"></div>
      <% end %>

And in my timesheet_controller.rb

  def select_date 
    @selected_date = params[:selected_date]
    @billables = current_user.billables.where(:date => @selected_date...(@selected_date +
     respond_to do |format|
                format.html {redirect_to(show_timesheet_url, :notice => "Selected date: #{d.strftime('%d%m%y')}")}
                format.js { render :partial=>"test"}

You see, I'd like to update a div on the page ("date_details") with a partial that has the billables for the date and the new billable form included.

The problem is that no matter how I set up the response, I get routing errors.  And I'm not sure how to set up the response partial (html.erb? js.erb?) and I'm not sure how these work with jquery.

Here's the routing error I'm getting:

Started GET "/timesheet/select_date?date=2011-03-22" for at Tue Mar 01 11:24:59 -0800 2011
  Processing by TimesheetController#show as JS
  Parameters: {"date"=>"2011-03-22", "id"=>"select_date"}
  User Load (0.5ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
Completed   in 45ms

ActionView::MissingTemplate (Missing template timesheet/show with {:locale=>[:en, :en], :formats=>[:js, "*/*"], :handlers=>[:rjs, :rhtml, :erb, :rxml, :builder]} in view paths "/Users/Joe/Sites/nuthatch/app/views", "/Library/Ruby/Gems/1.8/gems/devise_invitable-0.3.6/app/views", "/Library/Ruby/Gems/1.8/gems/devise-1.1.7/app/views"):

Why it's trying to render a show-action is a mystery to me.   I DO have a route to this method clearly visible when I "rake routes".

Then again, it seems strange to me that I would need to set up routes for these kinds of actions...I feel like I'm missing something here.


The answer, for me, ended up being to add a method to a new calendar.js file that the calendar view brings in.  This has a method to bind the click event for the table cell with navigation that takes me to different pages and then the dates are passed in the url as a resource.  This ended up very slick.  Then to pull up billable, create new billable and all that, I followed this tutorial:

Following this tutorial really helped me get to understanding jquery and rails interraction. … mment-3695

Then this one helped me understand js.erb response views and how to use them (note you can render html partials in them, and multiple ones in different page locations for the same response) … mment-3695

Last edited by Hamoth (2011-03-04 05:47:12)

High-Tech Creative Services