How to transfer a javascript value into a symbol used in Ruby on Rails

Question

I am currently using Rails 2.0.2 with Ruby 1.8.7. My Prototoype.js version is 1.7(if required). I am basically trying to integrate the calendar_date_select plugin in my app.

The link/tutorial I am referring is: http://ianli.com/site/HowTo/UseCalendarDateSelectRailsPlugin

I am trying to save the date I receive through the date select plugin and store in a rails symbol :publishing_date.

I am selecting the date using the calendar_date_select plugin. The selected date gets uploaded into the text field, but I am not sure how to transfer that returned value onto my publishing_date attribute(:publishing_date symbol) of my books table.

On manually entering a date I am able to see it reflected in the DB. I am getting stuck when I am trying to save it through the plugin.

   <%= f.text_field :publishing_date %>

On clicking on the create button I get a null value for the date selected via the calendar_date_select plugin. I am able to properly insert values for name of book and author.

My code for a new book looks like this:

<%= javascript_include_tag :defaults %>


<script src='/javascripts/calendar_date_select/calendar_date_select.js' type='text/javascript'></script> 


<h1>New book</h1>

<%= error_messages_for :book %>

<% form_for(@book) do |f| %>
  <p>
    <b>Title</b><br />
    <%= f.text_field :title %>
  </p>

  <p>
    <b>Author</b><br />
    <%= f.text_field :author %>
  </p>


<p>
    <b>Publishing Date</b><br />


 <%=calendar_date_select_tag f.text_field :publishing_date %> <!--This way of save/assigning doesn't work -->

</p>

   <br />
   <br />
   <br />
   <br />

   <p>
    <%= f.submit "Create" %>
  </p>
<% end %>

<%= link_to 'Back', books_path %>

Also once I save it perfectly, could you also please tell me how would I be able to display this date it in my index.html.erb

My current index.html.erb looks like this:

<h1>Listing books</h1>

<table>
  <tr>
    <th>Title</th>
    <th>Author</th>
    <th>Publishing Date</th>
  </tr>

<% for book in @books %>
  <tr>
    <td><%=h book.title %></td>
    <td><%=h book.author %></td>
    <td><%= book.publishing_date %></td> <!-- Will this work? -->
    <td><%= link_to 'Show', book %></td>
    <td><%= link_to 'Edit', edit_book_path(book) %></td>
    <td><%= link_to 'Destroy', book, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>
<%= will_paginate @books %>

<br />

<%= link_to 'New book', new_book_path %>

An interesting excerpt from the aforementioned tutorial link is given below:

The value of the selected date can be accessed by getting the value of the text field named calendar.

Using the Prototype Javascript Library, you can do the following to get the value.

$F('calendar')

The roadblock I am facing is how to call the $F('publishing_date') in my new.html.erb file using the rails <%=> tag and then assign that to my :publishing_date symbol which will eventually be use to update the publishing_date attribute in my books table.

Thanks for your support.

Answer 1

As far as "How to display", you are correct that

book.publishing_date

will work just fine, IF it gets set. You say you can set it just fine with a text field, right (i.e. your migrations are correct)? Doing that, then looking at your index page should confirm this.

Also, from my experience, javascript vars can't be passed to rails (though rails vars can be passed to javascript). So, you would never be able to get $F('publishing_date') into your erb file. By the time any javascript vars are set, it's not a Ruby program anymore, it's just a web page... There MUST be a default way for your plugin to handle things, and I'm a little surprised it's not working out of the box... Hrrm...wait...

I just actually glanced over the tutorial you linked to, and I THINK I see your problem:

Your plugin is not ACTUALLY a form helper (that works with "form_for).

If it WAS a form helper (and would set your form variable like you want), you'd call it with:

<% f.calendar_select_tag %>

Which would make it be a parameter passed into your form. In this case, it seems like it's just generating a calendar for you, which you can then program your own javascript to handle (like "function changeLocation(date)" in the tutorial). It has nothing at ALL to do with forms.

If you want this interface to actually work with a form, you'll have to make the form in html/javascript and NOT with the ruby helper tags. (which is more complicated).

You'd need to have a post, which contains "$F('publishing_date')" in the parameters, as well as any other javascript variables you'd want to set, and hit your create route manually, through javascript, with those post variables.... Not exactly fun.

Edit:

It's possible it MIGHT work with something like:

<%= form_tag( { :action => 'upload' }, :multipart => true ) %>
  <br />
<%= text_field "Title", "title"%>

<%=calendar_date_select_tag :publishing_date %> 



  <%= submit_tag( "Submit" ) %>
<%= end_form_tag %>

or whatever (a different way to do tags, as opposed to the "form_for" you were using)

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html

Either way, at the very least, the way you were calling it:

<%=calendar_date_select_tag f.text_field :publishing_date %> <!--This way of save/assigning doesn't work -->

is completely wrong, since you include "f.text_field" in there, which might be a typo? How can it be a select tag AND a text field? Who knows, maybe just getting rid of that will help (though it's still not associated with a form unless you do <% form_tag%>

Answer 2

Here's how to make your plugin do what you want (with javascript, like the tutorial says)

Summary:

Very complicated, not actually rails code. Requires knowledge of javascript, and use of this knowledge to write your own custom form, rather than using pre-generated Rails forms. This might not be what you're looking for, but it looks like what the plugin actually expects. Probably complicated to debug (would need to look at html source code, what routes are getting hit in the logs, etc)

Process:

Your plugin lets you do something like:

<%= calendar_date_select_tag "calendar", Date.today,
    :embedded => true,
    :year_range => 3.years.ago..0.years.ago %>

(according to the tutorial you linked to).

That is rails code. All any rails erb code does is give you a quick, simple way to generate real html... A link to, for example,

<%= link_to 'Edit', edit_video_path(@video) %>

produces html code that looks like this:

<a href="/videos/1/edit">Edit</a>

Which is what your browser actually renders. So far so good?

All rails does is take your erb file, and line by line convert it to html, which a web page can display. What this means for you, is that by the time your plugin is actually running (which is in the browser), there is NO rails code left. So you can't GIVE any javascript variables back up to your rails code UNLESS you pass it in through a route.

How rails normally handles forms, is it makes the proper html tags, and html itself handles controlling the form. Even though you set rails variables in the .erb file, those variables don't actually help data go to your rails app. Instead, when you use your form, you should see (in your logs), something like:

    Started POST "/users/sign_in" for 127.0.0.1 at 2011-02-03 14:22:42 -0500
  Processing by Devise::SessionsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"NeqeuxOpBfGVJ0qq5V4emR23vc744KkgJQDFyPluaok=", "user"=>{"email"=>"[email protected]", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"Sign in"}

In your controller (sign_in in the above case, looks like maybe create for yours?), you could access these posted parameters by saying params[:user][:email], or whatever NO MATTER HOW YOU PASSED THEM IN.

That is, yes, in your form you say things like :title, and :publishing date, but those just set the params you pass in to rails, not the actual symbol in your rails controller. You could just as easily use a command line tool (like curl) to pass the same things in, without a rails-generated webpage.

WHICH, is basically how the javascript solution works.

The tutorial says you can do things like:

<%= calendar_date_select_tag "calendar", Date.today,
    :embedded => true,
    :year_range => 3.years.ago..0.years.ago,
    :onchange => "changeLocation(new Date($F(this)))"  # <- ADD THIS LINE

%>

And then write a javascript function (NOT rails) like:

<script type="text/javascript">
    function changeLocation(date) {
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        location.href = 'http://google.com/search?q=' + year + '-' + month + '-' + day;
    }
</script>

The above script takes whatever date you chose on your calendar, and sends you to a google page with that date, as shown in the line:

location.href = 'http://google.com/search?q=' + year + '-' + month + '-' + day;

This is ACTUALLY really close to what we want to do. The difference is we want it to set the location to your create book route, and POST (not GET like location does) the book's parameters to that route. Once we do that, rails will handle it just as if it was a form it had created itself.

Are you familiar with restful routes at all? (and more importantly, are you using them?) location.href (as in the example) does a GET, while we need a POST to hit the create route with the right information.

I'm not too familiar with how standard javascript does things, but I use a library called "JQuery" for most of my POSTs (which you can include at the top of your erb file like:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Jquery lets me change the code to look like:

<script type="text/javascript">
    function changeLocation(date) {
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    if (month < 10) {
        month = "0" + month;
    }
    if (day < 10) {
        day = "0" + day;
    }

              var pdate = year + "/" month + "/" day
              $.post("/videos", {publishing_date: pdate})   //this is going to your create route, with the parameters in brackets
         }
</script>

Keep in mind this is by no means the only way to do javascript posts, it's just how I do them. Also, this assumes you want your publishing date in yy/mm/dd format like the tutorial (if you don't, create pdate differently).

So, that last should let you give publishing_date to your Rails controller action responsible for creating books. Tada! You can access it through params[:publishing_date] if you want. If you want it to look EXACTLY like rails, you'd probably have to nest it something like:

{book: {publishing_date: pdate}}

So that it looks just like something that came from a form to rails.

If you want to get the rest of your form params in there, you'll probably have to not use rails auto-creation tools, and instead build the rest of your form with javascript as well. There are some pretty good tutorials out there, but essentially, when you do that post, you want to change it to looke something like:

              $.post("/videos", {book:{publishing_date: pdate, title: book_name}})

or whatever, and have the var book_name be set in the same method by using something like:

var book_name = document.form_name.field_name.value

Where form_name is the name of the form (easily found out by viewing the source of the file) and field_name is the name of the field (same deal).

For some of my rails code it's generating something that looks like:

     <form action="/videos" enctype="multipart/form-data" method="post">  

  <p>
    <label for="video_name">Name</label><br />
    <input id="video_name" name="video[name]" size="30" type="text" />
  </p>

Which actually doesn't have a name for the form (there's probably some rails way to set this), but the name of the field would be "video[name]" (not sure how javascript would like the brackets...but only one way to find out. If javascript DOES have a problem, you can always write the form html by hand, and make all the tag names something javascript can deal with. You wouldn't need a submit button, because the javascript does the submitting for you.