kristianmandrup / formtastic_datepicker-rails3x

formtastic_datepicker for Rails 3 and above
MIT License
2 stars 1 forks source link

$("#input.ui-date-picker").datepicker is not a function #1

Open Marmolin opened 12 years ago

Marmolin commented 12 years ago

Tried to use this gem after failing using your other datepicker gems Uses rails 3.1.1 and formtastic .2.0.2 added this gem to the gemfile (no problem after moving it below the formtastic gem)

Add this to a js file $(document).ready(function(){ $('input.ui-date-picker').datepicker(); }); as described

triied to use it as <%= address.input :name ,:as=>:date_picker %>
in a sematic form block Got the error $("#input.ui-date-picker").datepicker is not a function Any suggestion ?

kristianmandrup commented 12 years ago

Well, you have to make sure that .datepicker() is added as a function on any jQuery element. This error is for sure due to the datepicker JS library not being loaded and initialized the right way. First make datepicker work standalone in a static html page in Rails, then debug from there. I actually haven't got it working yet, since I had to shift my attention to other things since then, but should be pretty close to a working solution. Disregard the ActiveAdmin integration for now, was just playing around... I wish A.A had better documentation/examples of how to extend the input types. Good luck!

PS: There are several other datepicker extensions to formtastic out there. I just tried to find the best/most up-to-date fork and work on from there.

Marmolin commented 12 years ago

Thanks for your advice

I added //= require jquery-ui to my master js file and then everything works as you intended I am very happy

The only problem is now to style the calender and to localise it

Any hints on how to achieve this


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

9 dec 2011 kl. 13.50 skrev Kristian Mandrup:

Well, you have to make sure that .datepicker() is added as a function on any jQuery element. This error is for sure due to the datepicker JS library not being loaded and initialized the right way. First make datepicker work standalone in a static html page in Rails, then debug from there. I actually haven't got it working yet, since I had to shift my attention to other things since then, but should be pretty close to a working solution. Disregard the ActiveAdmin integration for now, was just playing around... I wish A.A had better documentation/examples of how to extend the input types. Good luck!

PS: There are several other datepicker extensions to formtastic out there. I just tried to find the best/most up-to-date fork and work on from there.


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3078578

kristianmandrup commented 12 years ago

Great to hear :)

Check this: http://jqueryui.com/demos/datepicker/localization.html

Looking at the source, for swedish, I guess:

$( "#datepicker" ).datepicker( "option", 'sv' );

Should work?

Please send me a pull request where you improve the README usage guide to reflect how you made it work and how to add localization ;)

Tak!

Marmolin commented 12 years ago

Ok I will send you a pull request with improved readme

Whwrw should I pu

and $( "#datepicker" ).datepicker( "option", 'sv' );


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

9 dec 2011 kl. 14.52 skrev Kristian Mandrup:

Great to hear :)

Check this: http://jqueryui.com/demos/datepicker/localization.html

Looking at the source, for swedish, I guess:

$( "#datepicker" ).datepicker( "option", 'sv' );

Should work?

Please send me a pull request where you improve the README usage guide to reflect how you made it work and how to add localization ;)

Tak!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3079137

kristianmandrup commented 12 years ago

I think you just have to add it as another js require in your asset file:

//= require jquery-ui/i18n/jquery.ui.datepicker-sv

And then in your application.js:

$(document).ready(function(){
  $('input.ui-date-picker').datepicker( "option", 'sv' );
});
Marmolin commented 12 years ago

Hi I have now a working datepicker using your gem I willl send you a pull request about how to use your gem But how to send a pull request , by mail or how ? Have looked at you pull request page i Git but cannot find out how to create one !

I would like to add some options that the jquery plugin defines s that possible ?


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

9 dec 2011 kl. 14.52 skrev Kristian Mandrup:

Great to hear :)

Check this: http://jqueryui.com/demos/datepicker/localization.html

Looking at the source, for swedish, I guess:

$( "#datepicker" ).datepicker( "option", 'sv' );

Should work?

Please send me a pull request where you improve the README usage guide to reflect how you made it work and how to add localization ;)

Tak!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3079137

kristianmandrup commented 12 years ago

Check this page:

http://help.github.com/pull-requests/

Github has help pages for almost anything you can do on the site ;)

Sounds great if you could add some extra options!

kristianmandrup commented 12 years ago

If you wanna continue development on this gem, I recommend you do the following: From your Rails app, use the :path option on the gem statement to point to the root dir of the your local repo clone of the gem, fx

`gem 'formtastic_datepicker-rails3x', :path => '/my/repos/formtastic_datepicker-rails3x'

That makes testing it so much easier ;)

Would be cool to have formtastic support the 'chosen' library:

https://github.com/harvesthq/chosen

For demos, see:

http://harvesthq.github.com/chosen/

Would however be better with a separate gem for this integration. You could fx use jeweler to start off your own gem like I always do ;)

kristianmandrup commented 12 years ago

Would be nice with SimpleForm integration as well...

module SimpleForm
  module Inputs
    class DatePickerInput < Base
      def input
        @builder.text_field(attribute_name,input_html_options)
      end    
    end
  end
end

https://github.com/albertopq/jquery_datepicker

http://stackoverflow.com/questions/3329381/how-do-i-connect-jquery-datepicker-to-my-ruby-on-rails-form

Cheers!

Marmolin commented 12 years ago

Hi My first task would be to add to the readme file my experiences of how to install a working version of formtastic_datepicker-rails3x I have done it but had to do most of it manually and I think some could be done by the gem After reading my readme adds you should be able to answere that question

What I really need is a way to add jquery datepicker-options to formtastic_datepicker-rails3x e.g. the option of showing week number etc Any proposals?

I have forked your gem but have problem with the ssh key. I already have git locally and it seems to interact negatively with the git demanded for a pull request However I will try to solve that problem next week. If I cannot solve the problem, I will just mail my proposed additions to you


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

13 dec 2011 kl. 13.35 skrev Kristian Mandrup:

Would be nice with SimpleForm integration as well...

module SimpleForm
 module Inputs
   class DatePickerInput < Base
     def input
       @builder.text_field(attribute_name,input_html_options)
     end    
   end
 end
end

https://github.com/albertopq/jquery_datepicker

http://stackoverflow.com/questions/3329381/how-do-i-connect-jquery-datepicker-to-my-ruby-on-rails-form

Cheers!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3122400

kristianmandrup commented 12 years ago

Just added you as collaborator. That should make it easy for you ;)

kristianmandrup commented 12 years ago

Most datepicker specific options such as showWeek, should be handled from the javascript, not via some Rails options. Otherwise you need to extend this somehow:

    def to_html
      input_wrapping do
        label_html <<
          builder.text_field(input_name, input_html_options)
      end
    end

to dynamically add some javascript that executes the .datepicker() with the specified options... Then you have to look into the formtastic code base to figure out how to do this.

Marmolin commented 12 years ago

Hi I suspected that The options had to be part of some installation process, at least as a start

Another problem is localization. There are different javascript files for each language. In one application I use only one language so I could just do it as a part of the installation, but in other applications I would like to be able to switch between different languages. Any idee of how to dynamically change language i.e javascript file from rails I18n? There are gems like https://github.com/fnando/i18n-js, but datepicker localization is done as a function JQuery(function($){ $.datepicker.regional['sv'] = {clearText: 'Rensa',........}; $.datepicker.setDefaults($.datepicker.regional['sv']); that defines the local words and select language. Maybe one can load all needed language functions and just add a way to dynamically set $.datepicker.regional[I18n.locale] when rails change language i.e script type="text/javascript"> I18n.defaultLocale = "<%= I18n.default_locale %>"; I18n.locale = "<%= I18n.locale %>";

You said that you added me as a collaborator Where is that shown? How will that make it easier for me to push to your repository? Do you mean that I should push changes i my fork to your repository or should I download a local version and push from that as described in http://gitref.org/remotes/ That guides describe git push as; push you new branches and data to remote repository. My question is then what is the new branches

Sorry to bother you with there question, but I am really a newcomer concerning git and how to use it


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

14 dec 2011 kl. 00.50 skrev Kristian Mandrup:

Most datepicker specific options such as showWeek, should be handled from the javascript, not via some Rails options. Otherwise you need to extend this somehow:

   def to_html
     input_wrapping do
       label_html <<
         builder.text_field(input_name, input_html_options)
     end
   end

to dynamically add some javascript that executes the .datepicker() with the specified options... Then you have to look into the formtastic code base to figure out how to do this.


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3132908

Marmolin commented 12 years ago

Hi Here are a summary of my experiences that I can push into the readme file May be we can make a generation script that generates some of the needed files and optional files Any comments, before I push it ?

Readme .........

Configuration These configuration tips is only appropriate for a static datepicker, i.e one with a fixed set of options and a given language. How to handle a more dynamic installation may be realized later on

When the gem has been installed the datepicker should be configured as follows

  1. Add //= require jquery-ui to your js manifest directive The js file with all ui widgets will then be added
  2. Add the following ready function for datepicker to a js file in the js-tree,e.g. to datepicker.js $(document).ready(function(){ $('input.ui-date-picker').datepicker(); });
  3. Add a ready function for the localization to e.g datepicker.js For using the swedish localization add $(document).ready(function(){ $('input.ui-date-picker').datepicker( "option", 'sv' ); }); For any other language exchange the local 'sv' to the appropriate one
  4. Copy the appropriate localization file from http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ and add the content (the localization function) to the same file (datepicker.js ).
  5. Style the datepicker by adding a datepicker.css file to your css assets tree. Use the tool Themeroller (http://jqueryui.com/themeroller/) to define and download an appropriate css file and the pictures needed Add the downloaded css file to the css assets and add the downloaded images to the image assets If you do not add a second folder images, edit the datepicker css and change all image references by deleting "images/ " e.g from url(images/ui-icons_222222_256x240.png) to url(ui-icons_222222_256x240.png) (It is also possible to load only the js needed for the datepicker widget by using the js files that also are downloaded from Themeroller)
  6. Add any datepicker option defined in http://docs.jquery.com/UI/Datepicker as ready functions in the datepicker.js file e.g. add option for displaying week number and displaying a drop-down-meny of months by adding (add any other option in the same way)

    $(document).ready(function(){
       $( 'input.ui-date-picker' ).datepicker( "option", "showWeek", true );

    });

    $(document).ready(function(){ $('input.ui-date-picker' ).datepicker( "option", "changeMonth", true ); });


Hans Marmolin St: Larsgatan 50, 58224 Linköping, Sweden Phone: +46708371202


Hans Marmolin St: Larsgatan 50, 58224 Linköping, Sweden Phone: +46708371202

14 dec 2011 kl. 00.50 skrev Kristian Mandrup:

Most datepicker specific options such as showWeek, should be handled from the javascript, not via some Rails options. Otherwise you need to extend this somehow:

   def to_html
     input_wrapping do
       label_html <<
         builder.text_field(input_name, input_html_options)
     end
   end

to dynamically add some javascript that executes the .datepicker() with the specified options... Then you have to look into the formtastic code base to figure out how to do this.


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3132908

kristianmandrup commented 12 years ago

Thanks :)

Please see: https://github.com/kristianmandrup/ui_datepicker-rails3

I made a more general purpose gem and improved the README with better config explanations using what you send me as the baseline... Please let me know if this gem works for you.

kristianmandrup commented 12 years ago

https://github.com/rails/jquery-rails/blob/master/lib/jquery/rails/railtie.rb

This demonstrates how to include assets directly in the gem and have them added to the manifest. We need to then add a vendor/assets/ folder to the gem similar to how Jquery-rails does it. Would be nice to include all the localize files fx.

Marmolin commented 12 years ago

I agree, it would be nice to add all locales files

I have not been able to test the new gem yet but will do it soon However, It looks like it would workand seems vey usable

Would it be possible to add a generation of the js file needed for the different options?


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

15 dec 2011 kl. 00.00 skrev Kristian Mandrup:

https://github.com/rails/jquery-rails/blob/master/lib/jquery/rails/railtie.rb

This demonstrates how to include assets directly in the gem and have them added to the manifest. We need to then add a vendor/assets/ folder to the gem similar to how Jquery-rails does it. Would be nice to include all the localize files fx.


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3153580

kristianmandrup commented 12 years ago

Hi Hans,

A pull request is something you do from within your github page. First you must fork a project. Then you clone the repo it locally to your computer. Then you make whatever changes. Then you push back to your forked repo. Now a new button will be displayed called "pull request", since Github will see that your repo is linked to an other repo and has changes that are newer.

When you are added as contributer you can push directly to that repo. To do this however, you should again fork the repo, then add an extra remote:

git remote add kmandrup git://github.com/kristianmandrup/xyxyx.git

See the docs on adding a remote repo for git.

Now whenever you are working on your forked repo you can pull changes from the other repo like this:

git pull kmandrup master

And push to that repo

git push kmandrup marmolin (here assuming that you push to a separate branch)

I would then look at your changes and merge them into my master

git merge marmolin

Nice!

PS: I will try to add the vendored assets today. Not sure about javascript file generation. Seems like overkill to me!

Marmolin commented 12 years ago

Kristian

Thanks for the information about Git. I now see how I should do and if I can solve the problem with the ssh key I will use this process to add stuff. However I will be gone for a week, so I cannot do it until after 20 dec

I agree, that it may be overkill to generate the javascript files Much more important is to solve the problem with dynamic changes of options as language

I am thinking of the following approach.

In my applicaion I have an action called change_language If I add a js.erb file to that action that defines var I18nLocale=<%=I18n.locale %> and then exchange the locale in the javascript localization option function to that variable, e.g 'sv' to I18nLocale would that work in principle (maybe on also had to add I18n.default_locale in the same way and some other stuff)

Any comments?


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

15 dec 2011 kl. 08.57 skrev Kristian Mandrup:

Hi Hans,

A pull request is something you do from within your github page. First you must fork a project. Then you clone the repo it locally to your computer. Then you make whatever changes. Then you push back to your forked repo. Now a new button will be displayed called "pull request", since Github will see that your repo is linked to an other repo and has changes that are newer.

When you are added as contributer you can push directly to that repo. To do this however, you should again fork the repo, then add an extra remote:

git remote add kmandrup git://github.com/kristianmandrup/xyxyx.git

See the docs on adding a remote repo for git.

Now whenever you are working on your forked repo you can pull changes from the other repo like this:

git pull kmandrup master

And push to that repo

git push kmandrup marmolin (here assuming that you push to a separate branch)

I would then look at your changes and merge them into my master

git merge marmolin

Nice!

PS: I will try to add the vendored assets today. Not sure about javascript file generation. Seems like overkill to me!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3158015

Marmolin commented 12 years ago

Kristian Just another remark When I am testing datepicker It is very slow and takes a long time from focusing the date field to displaying the calender

Any thoughts about the reason for the delay


Hans Marmolin St: Larsgatan 50, 58224 Linkping, Sweden Phone: +46708371202

15 dec 2011 kl. 08.57 skrev Kristian Mandrup:

Hi Hans,

A pull request is something you do from within your github page. First you must fork a project. Then you clone the repo it locally to your computer. Then you make whatever changes. Then you push back to your forked repo. Now a new button will be displayed called "pull request", since Github will see that your repo is linked to an other repo and has changes that are newer.

When you are added as contributer you can push directly to that repo. To do this however, you should again fork the repo, then add an extra remote:

git remote add kmandrup git://github.com/kristianmandrup/xyxyx.git

See the docs on adding a remote repo for git.

Now whenever you are working on your forked repo you can pull changes from the other repo like this:

git pull kmandrup master

And push to that repo

git push kmandrup marmolin (here assuming that you push to a separate branch)

I would then look at your changes and merge them into my master

git merge marmolin

Nice!

PS: I will try to add the vendored assets today. Not sure about javascript file generation. Seems like overkill to me!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3158015

Marmolin commented 12 years ago

Hi I just had a problem with using the old datepicker verion i production mode

gem 'formtastic_datepicker-rails3x', :git => 'git://github.com/kristianmandrup/formtastic_datepicker-rails3x.git'

It seems that there are some small bug in the gem specification so it will not load

Any ideas


Hans Marmolin St: Larsgatan 50, 58224 Linköping, Sweden Phone: +46708371202

15 dec 2011 kl. 08.57 skrev Kristian Mandrup:

Hi Hans,

A pull request is something you do from within your github page. First you must fork a project. Then you clone the repo it locally to your computer. Then you make whatever changes. Then you push back to your forked repo. Now a new button will be displayed called "pull request", since Github will see that your repo is linked to an other repo and has changes that are newer.

When you are added as contributer you can push directly to that repo. To do this however, you should again fork the repo, then add an extra remote:

git remote add kmandrup git://github.com/kristianmandrup/xyxyx.git

See the docs on adding a remote repo for git.

Now whenever you are working on your forked repo you can pull changes from the other repo like this:

git pull kmandrup master

And push to that repo

git push kmandrup marmolin (here assuming that you push to a separate branch)

I would then look at your changes and merge them into my master

git merge marmolin

Nice!

PS: I will try to add the vendored assets today. Not sure about javascript file generation. Seems like overkill to me!


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3158015

Marmolin commented 12 years ago

Hi Testing the new datepicker

  1. The installation gm should be; gem 'ui_datepicker-rails3',:git => 'git://github.com/kristianmandrup/ui_datepicker-rails3'
  2. Tried to run it Got the error and could not try any more

/Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/bundler/gems/ui_datepicker-rails3-e3a481b1c1db/lib/rails/railtie.rb:4:in <module:Rails>': uninitialized constant Rails::Railtie (NameError) from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/bundler/gems/ui_datepicker-rails3-e3a481b1c1db/lib/rails/railtie.rb:3:inmodule:UiDatePicker' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/bundler/gems/ui_datepicker-rails3-e3a481b1c1db/lib/rails/railtie.rb:2:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/engine.rb:1:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/engine.rb:1:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/plugin.rb:1:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/plugin.rb:1:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/application.rb:4:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/application.rb:4:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails.rb:10:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails.rb:10:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/all.rb:1:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/all.rb:1:in <top (required)>' from /Users/hansmarmolin/Projekt/ST_forum/st_forum_1/config/application.rb:3:inrequire' from /Users/hansmarmolin/Projekt/ST_forum/st_forum_1/config/application.rb:3:in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/commands.rb:52:inrequire' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/commands.rb:52:in block in <top (required)>' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/commands.rb:49:intap' from /Users/hansmarmolin/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.1/lib/rails/commands.rb:49:in <top (required)>' from script/rails:6:inrequire' from script/rails:6:in `

'


Hans Marmolin St: Larsgatan 50, 58224 Linköping, Sweden Phone: +46708371202

14 dec 2011 kl. 22.28 skrev Kristian Mandrup:

Thanks :)

Please see: https://github.com/kristianmandrup/ui_datepicker-rails3

I made a more general purpose gem and improved the README with better config explanations using what you send me as the baseline... Please let me know if this gem works for you.


Reply to this email directly or view it on GitHub: https://github.com/kristianmandrup/formtastic_datepicker-rails3x/issues/1#issuecomment-3150293

kristianmandrup commented 12 years ago

See this example

http://jqueryui.com/demos/datepicker/#localization

    $(function() {
        $.datepicker.setDefaults( $.datepicker.regional[ "" ] );
        $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
        $( "#locale" ).change(function() {
            $( "#datepicker" ).datepicker( "option",
                $.datepicker.regional[ $( this ).val() ] );
        });
    });
<select id="locale">
  <option value="af">Afrikaans</option>
  ...
</select>

Your idea sounds good using Rails i18n. I will look at the gem bug you find. Basically, I should remove the railtie.rb I think. You can try!

kristianmandrup commented 12 years ago

I just pushed a major update with some fix. Now I have included specs to test that it works (to some extent)

Try running

bundle
bundle exec spec/config_spec.rb
``

Should have 6 examples passing ;)