• From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Topic: Jquery datepicker and Rails 3.1.3 SOLVED

Hi,

I am using rails 3.1.3 and ruby 1.9.3-p0 as well as postgresql 9.1.

I am trying to use Jquery' datepicker and I do have it working but just not to my satisfaction.

Here is what I have:

     in my download file I have: css
                                              development-bundle
                                              js
                                              and an index.html file that tells me all that I downloaded. I choose the LeFrog theme.

    In the css folder we have LeFrog and under it we have the jquery-ui-1.8.16.custom.css file which i moved to the app/assets/stylesheets directory and then in the application.css file I have
       *= require_self
       *= require_tree .
       *= require jquery-ui-1.8.16.custom.css ... this line I added.
Also under the LeFrog directory we have an images folder and I moved it's contents into app/assets/images.

   in app/assets/javascripts/application.js I added these lines:
    $(function() {
    $('#employee_birth_date').datepicker();
    $('#employee_hire_date').datepicker();
    $('#employee_term_date').datepicker();
});

also I did add the //= require jquery-ui line.

I gathered all of this from researching online and the datepicker does work but it is translucent and it does not refelect the theme that I downloaded.
Furthermore I am not sure what I should do, and where I should put the host of other files that came with the download.
For instance, in the js folder in the download directory we have jquery-1.6.2.min.js and jquery-ui-1.8.16.custom.min.js

Does anyone know where I should put these two files?
Reading the index.html file it seems that they have all of the information related to the theme I downloaded.

Lastly, can someone tell me what I do with the development-bundle that came with the download?

I have done a number of days of reading and researching but I am no clearer today than what I was a couple of days ago, well, not true ... I did learn how to get the datepicker to work but just not the theme that I choose.

Thanks for any help, suggestions or pointers or even further research you could point me towards.

fuzzy.

Last edited by fuzzytom (2012-03-23 16:16:37)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Jquery datepicker and Rails 3.1.3 SOLVED

I'm on Rails 3.1.2 and ruby 1.9.2.

All I did was put query-ui-1.8.16.custom.min.js in:

app/assets/javascripts

And my theme is here:

app/assets/stylesheets/jquery-ui-theme.css

And all the images for the theme:

app/assets/stylesheets/images/ui-blahblah.png

I didn't touch application.js or application.css.

You have to remember to pre-compile the assets once you move to production.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Thanks Brad,

I have tried to do as you did, namely, put jquery-

ui-1.8.16.custom.min.js in:

app/assets/javascripts

And I put my theme in:

app/assets/stylesheets/jquery-ui-theme.css and as you I put all the images related to the theme in:

app/asset/images

but I cannot get the datepicker to reflect the theme I downloaded.

I did put the Jquery function for datepicker in the application.js since I do not know where else to put it?

Maybe that is causing the problem?

Any thoughts?

Thanks,

fuzzy.

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Jquery datepicker and Rails 3.1.3 SOLVED

I normally put query widget initialization directly in the view source via

<script type 'text/javascript'>
  $(document).ready(function() {
    $('#employee_hire_date').datepicker();
  });
</script>

But that isn't your problem, if the date picker is working,  just not themed.

Has you assigned class="ui-state-default" to the element?

Also, I think it also has to have "ui-widget" on the outer most element containing any query-ui stuff.

Do you have firebug or some other page debugger?  Check to see that you have the proper query-ui css classes assigned.

Last edited by BradHodges (2012-01-04 17:09:31)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Wow,

Thanks again Brad ... you have given me enough here to go to school on for a while.

I do have firebug and so I will be checking into the query-ui-classes and also using google to get a better understanding of the guidance you have shared with me.

Thanks again,

fuzzy.

  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Hey Brad,

Just an update on my research. I still cannot get the theme to work....If I look at my server it seems that the theme is not being served.

On the jquery ui page they have a section called quick start guide, and in that section they suggest that the following needs to be on all your pages:

    <link type="text/css" href="css/themename/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

So I put these files in my partial _stylesheets.html.erb which comes from my site layout, application.html.erb.

Using firefox I was able to see that the link type, and the two script types did not work.

So, upon more researh I read that one should try instead the hosted themes on google. So I added this to my partial _stylesheets.html.erb:

     <link type="text/css" rel="stylesheet"
                                     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/le-frog/jquery-ui.css" >

Again, using firefox, I found that this did not work.

So I removed everything and started from scratch and at your suggestion moved the jquery function out of the application.js file and put it in the employees.coffess.js file which was automatically created at the time I created the employee model.

app/assets/javascript/employees.coffee.js

    $ ->
       $("#employee_birth_date").datepicker()
       $("#employee_hire_date").datepicker()
       $("#employee_term_date").datepicker()

And in my app/views/employees/new.html.haml file I have:

     = f.label :name, "Birth Date"
       %br/
     = f.text_field  :birth_date, :size => 12, :class => "ui-state-default"

The :class => "ui-state-default" I added at your suggestion.

I then served up the new employees page and the jquery datepicker works without having to download datepicker and it is of the translucent, light blue style that I mentioned in my first post.

No matter what I try .... the theme does not work.

Just in passing, I also noticed that in my custom css file, that I have the exact same error when I try to serve a background image to my server. For instance:

body {
    background:     #666 url("images/bg_diagonal.png") repeat 0 0;
    color:               #fff;
}

The error is that the image cannot be found and that their is no route etc etc which is the same error message that the link and script types got, that is, they are the three files that need to be on every page as suggested by jquery, that suggestion is the one  which I started this post with.

If you have any thoughts as to where I should turn to next in order to resolve this issue, they would be appreciated.

Thanks for your help.

fuzzy.

Last edited by fuzzytom (2012-01-08 15:13:18)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Jquery datepicker and Rails 3.1.3 SOLVED

If you are on Rails 3.1.  and you use the assets pipeline, 

You'd have to change

body {
    background:     #666 url("images/bg_diagonal.png") repeat 0 0;
    color:               #fff;
}

to

body {
    background:     #666 url("/assets/bg_diagonal.png") repeat 0 0;
    color:               #fff;
}

and you'd have to put bg_diagonal.png in app/assets/images

Just see if you can get that to work.

Once the above works,  you know the assets pipeline is set up correctly.

Then make sure that your custom theme is in:

app/assets/stylesheets

and make sure all the images that go along with the custom theme are in

app/assets/stylesheets/images.

The theme images would look like this for example

ui-bg_highlight-hard_75_b2c3d2_1x100.png

That's an example from my theme,  yours would be ui-bg???????_??_??????_1x100.png  for the image that defines a a background, it's a 1 wide by 100 pixel tall png.  There should also be an icon file that looks like

ui-icons_??????_256x240.png

Give that a whirl!

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Thanks Brad ... changing to  ("/assets ... .png") instead of ("images/ ... .png") did it ... the asset pipeline works.

I then applied that same solution to the links in the _stylesheet partial and here instead of href="css/etc etc" I used href="assets/etc etc" and the same for src="assets/etc etc".

I now have the problem of the jquery-ui-1.8.16.custom.css styling overiding my date inputs and thereby moving them out of their current position.

I will do some research to see how to fix it but if I cannot find a solution I will make a new posting for this issue.

Thanks again,

fuzzy.

Last edited by fuzzytom (2012-01-09 18:07:01)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Jquery datepicker and Rails 3.1.3 SOLVED

If you've set up the asset pipeline correctly,  the only thing you need to do to bring in ALL your css is

<%= stylesheet_link_tag    "application" %>

That assumes a simple css layout,  when all your css is included on every page.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Thanks again Brad,

I created a new images folder underneath the stylesheets folder, as you advised, and put all of the jquery images in it. Now all the jquery images are being served.

As for the date fields being pushed onto a new line all by themself due to the jquery-ui-1.8.16.custom.css styling overriding my custom styling, I just made sure that the date fields were cushioned in between two other fields and thereby insured that they did not spill over onto a new line all by themselves.

I guess that is not the best solution but it is the only way I could get it to work since I am not sure how to make my custom styling be the styling that governs the styling for the page whilst the jquery-ui-1.8.16.custom.css styling be responsible for the date input fields.

fuzzy.

Last edited by fuzzytom (2012-01-11 15:56:54)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Jquery datepicker and Rails 3.1.3 SOLVED

You just have to get the hang of it.  You can edit the query-ui-X.X.X.custom.css file,  but if you look at it, it's mostly color, font-family, font-size , borders, background, etc.  You just have to learn to NOT deal with those css style elements in your own css.

As a general rule jquery-ui does nothing with <div>,  and the only jquery-ui css class you'd ever assign to a div is ui-widget,  all the rest tend to go on input elements.  I tend to use it like so:

<div class="ui-widget">
  <ul class="myULstyle">
    <li class="myLIstyle">
      <%= f.text_field :name , :class=>"ui-state-default" %>
    </li>
  </ul>
</div>

So MYstyles control the spacing between input fields, etc.,  and jquery-ui handles font-size, color, background.   And they normally don't collide with each other.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Northern Wisconsin
  • Registered: 2010-09-08
  • Posts: 52

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Cool ... thanks a bunch Brad. I am going to apply that rule to my css.

fuzzy.

  • Smily
  • Ticketholder
  • Offline
  • Registered: 2012-05-22
  • Posts: 2

Re: Jquery datepicker and Rails 3.1.3 SOLVED

fuzzytom wrote:

Cool ... thanks a bunch Brad. I am going to apply that rule to my css.

fuzzy.

I was looking for this for over 30 minutes now, thanks a lot Brad and I'm glad that I have found this website!

Last edited by Smily (2013-02-02 16:36:40)

  • Registered: 2013-04-22
  • Posts: 1

Re: Jquery datepicker and Rails 3.1.3 SOLVED

Thanks, it was very helpful to me. Doradca kredytowy