1

There has been some discussion of how it is possible to convert a Rails UTC DateTime into a Javascript date value, like here. However, I am seeing errors when I try to go a step further and make that DateTime dynamic.

In the end, I am trying to make a JS countdown timer that will show the remaining seconds between Time.now (Rails) and a set UTC time called game_start. I am using this scrappy method for passing a Rails object (like a DateTime from a table) into Javascript.

So currently, I am doing the following: 

 // This is the scrappy way I am storing a temp value for DateTime
 <%= content_tag :div, class: "temp_information", data: {temp: @tempquiz} do %>
    <% end %>

 <div id="timer"></div>

 <script>
   $(document).ready(function() {
     var dt = $('.temp_information').data('temp');
     alert(dt);
   });

This returns a UTC string as an alert, like 2016-02-18T23:07:00.000-08:00. So I am successfully passing that Rails data into JS. T

he issue is when I try to combine it with some Javascript, like: 

 $(document).ready(function() {
    var data = $('.temp_information').data('temp');
    var dt = new Date (<%= data.ToJavaScriptMilliseconds() %>);
    alert(dt);
    });

If I am going to make a timer that counts down, I am going to need to capture the game_start time (temp is doing that) and convert it to JS Milliseconds (that is breaking). However, when I do that (code is based on this answer), I get this error: 

   undefined local variable or method `data'

I don't get it at all, since I am defining data in the line before within the $(document).ready as the UTC string we saw in the alert. If it knows what data is and can return the alert in the first instance, how is it unable to produce it in the second instance?

Community
  • 1
  • 1
darkginger
  • 652
  • 1
  • 10
  • 38
  • You are mixing javascript and ruby code. `data` is a JS-Variable but you are trying to use it as a Ruby Variable in the `<%= data ...%>` block. – Martin Schneider Feb 18 '16 at 08:26
  • @MartinSchneider Dang it. I thought that was weird. I saw another example online that did it, and it didn't make a lot of sense to me why it would not require the controller if it was in the – darkginger Feb 18 '16 at 08:28
  • Ok, getting closer. So I remove the Ruby variable and try something like: `var dt = new Date (data);` but it returns "Invalid Date." Is there still some conversion that has to be done before I can use `Date` in JS? – darkginger Feb 18 '16 at 08:44

1 Answers1

3

Passing data to a tag in ruby, will render a data attribute on the html tag. The tag is <div> class='temp_information' data-temp='2016-02-18 09:38:41 +0100' </div> in the above case.

UPDATE: however this is a format which can't be parsed by all browsers. The most reliable method is to convert the time to a unix timestamp.

Also the ISO 8601 format should be supported by all browsers now. This format is used by GitHub Api for example.

The ruby Time object can be converted to javascript date like this

ruby

Time.at(1644394891).to_i
=> 1644394891

require 'time'
Time.at(1644394891).utc.iso8601
=> "2022-02-09T08:21:31Z"

javascript

new Date(1644394891 * 1000)
=> Wed Feb 09 2022 09:21:31 GMT+0100 (CET)

new Date("2022-02-09T08:21:31Z")
=> Wed Feb 09 2022 09:21:31 GMT+0100 (CET)

So for your code it's

new Date($('.temp_information').data('temp'));

you have to call @tempquiz.utc.iso8601 before rendering

dre-hh
  • 7,840
  • 2
  • 33
  • 44
  • Good catch. I think we're close, but it's being strange. So if I convert the line to: `new Date ($('.temp_information').data('temp'));`, it shows an alert for `Invalid Date.` If I remove the `new Date` though and make it `var temp = $('.temp_information').data('temp');`, the alert will show the UTC string, like `2016-02-18T23:07:00.000-08:00`. Do I need an intermediary step to convert the UTC string to milliseconds before I can add it to `new Date` maybe? – darkginger Feb 19 '16 at 03:17
  • Forgot to tag you @dre-hh. If you have any feedback on how to work with that, I think this is the answer I am looking for. – darkginger Feb 19 '16 at 09:34
  • Does this work? `new Date("2016-02-18 09:38:41 +0100")` returns "Invalid date" for me. – Adam Bohannon Feb 08 '22 at 23:07
  • On chrome its returns a valid date. Where are you running this? – dre-hh Feb 09 '22 at 08:07
  • https://techtalkbook.com/javascripts-new-date-does-not-work-on-ie-and-safari/ Turns out this format is not supported accoss all browsers – dre-hh Feb 09 '22 at 08:13
  • 1
    @AdamBohannon i have updated the answer to use a utc iso8601 string – dre-hh Feb 09 '22 at 08:43