jquery datebox There is no mode by that name loaded / mode not given

Question

I need a time picker in my rails application , and the jquery datebox seems perfect, but i can't make it work.

In my application.html.haml i have

%link{:href => "http://code.jquery.com/mobile/latest/jquery.mobile.min.css", :rel => "stylesheet", :type => "text/css"}/
%link{:href => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css", :rel => "stylesheet", :type => "text/css"}/
%script{:src => "http://code.jquery.com/mobile/latest/jquery.mobile.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js", :type => "text/javascript"}

And my haml code

%label{:for => "mydate"} Some Time
%input#mydate{"data-options" => "{\"mode\" => \"flipbox\"}", "data-role" => "datebox", :name => "mydate", :type => "date"}/

This gets translated as shown here http://cl.ly/image/1Y0t210L3a3c

The error i always have is http://cl.ly/image/1a0l3A20471r

I tryied different box types from datebox but only calbox works .

Thanks

Answer 1

Well, part of your issue may be the line here:

%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js", :type => "text/javascript"}

This is loading only the 'calbox' mode. If you want to use flipbox, as in your haml code above, you'd need either/also:

%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js", :type => "text/javascript"}

Your next issue is (maybe) in the translated code snippet - the data options are surrounded by double quotes, as are each of the items in the object - depending on the browser, it will cause a problem with javascript parsing them. You could decide not to use data-options, and use long options instead... i.e.:

data-datebox-mode="calbox"

(Note: I've not tested the long options in a little while, and don't totally remember how that works - let me know if it fails.)

Otherwise, it might require messing with however haml parser to make it play nice - which is probably more trouble than it's worth (Not sure, I'm not terribly familiar with the product)

Answer 2

The data-options part needs to be enclosed in single quotes. Using double quotes didn't work for me

data-options='{"mode":"datebox"}'