Cannot save the dates

[louposk]

Hello, when i add a new record, i the dates are not saved at all...

Also, if i insert the dates manually and try to edit, browser stops working and i get the following error :

An action script on this page may be busy, or has stopped responding. You can stop the script now, or continue to see if the script will complete. Script: http://127.0.0.1:3000/assets/bootstrap-datepicker/core.js?body=1:666

How can i fix this? I have included the gem in my gem file and i also followed all the instructions.

Thank you

[Nerian]

Hi Konstantinos,

/assets/bootstrap-datepicker/core.js?body=1:666     <-- The Devil introduced this bug!

Kidding :)

I am not sure that I understand. You select a date in the calendar and the input box doesn't reflect that date?

I need more info. Show me the javascript where you activate the Datepicker and also the javascript manifest file. Oh and the HTML fragment where you define the calendar input.

[louposk]

Hahaha i'm sure its the devil in my pc! :)

I have reinstalled the gem running the bundle install, also i restarted my server and the error is gone.

But i have another problem. I have followed all the instruction about the gem installation (adding the required lines in the application.js and application.css), but the datepicker is not shown in my input fields. Here is the form i am using:

<%= form_for @domain, :html => { :class => "form-horizontal" } do |f| %>

    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :registration %>
    <%= f.text_field :registration , :tabindex => 70, :id =>"datepicker" %>

    <%= f.label :expiration %>
    <%= f.text_field :expiration, :id =>"datepicker" %>

    <%= f.label :renewal %>
    <%= f.text_field :renewal, :id =>"datepicker" %>

     <br /><%= f.submit "New", class: "btn btn-nedium btn-primary" %>
    <% end %> 

Do i have to insert somewhere the following javascipt code?

$('#datepicker').datepicker();

Thanks for your time!

[Nerian]

I see a couple of things that could go wrong in that HTML code. Let's fix them one by one:

The ID attribute of a HTML element should be always unique. Yet you have the registration and expiration and renewal element with the same id ( 'datepicker' ). I think you just followed the example in the readme and didn't really understood it. Let me explain in detail:

'#datepicker' is a css selector. It means 'select all html elements with the id = 'datepicker'. But we said that ID are unique, so we should not really use an ID but a class selector.

'.datepicker' is a class selector. It means 'select all html elements that with the class = 'datepicker'. That's what we need here.

So the HTML code should be:

<%= form_for @domain, :html => { :class => "form-horizontal" } do |f| %>

    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :registration %>
    <%= f.text_field :registration , :tabindex => 70, :class =>"datepicker" %>

    <%= f.label :expiration %>
    <%= f.text_field :expiration, :class =>"datepicker" %>

    <%= f.label :renewal %>
    <%= f.text_field :renewal, :class =>"datepicker" %>

     <br /><%= f.submit "New", class: "btn btn-nedium btn-primary" %>
    <% end %> 

And we will use '.datepicker' so select all those elements. To select all those element we would use jQuery.

$('.datepicker');

Next step. We don't just want to select those elements. We want to apply something to all of them. In this case, we want to make it a Datepicker.

$('.datepicker').datepicker();

That is the jQuery code that you need. We would need to execute this piece of code once the HTML is all rendered and ready. We would do it like this:

$(document).ready(function() {
    $('.datepicker').datepicker();
}

That piece of code will go for example to app/assets/javascripts/main.js. You will need to add that file to the javascript manifest; like this //= require main

And then it should work.

Also, there is a typo in the submit button. it says 'btn-nedium' when it should say 'btn-medium'. You are using Bootstrap, right? Check out Formtastic and Formtastic-bootstrap.

[louposk]

Hi Nerian, i now understands whats going on. I have added the class in each input field, an i have added this

$(document).ready(function() {
    $('.datepicker').datepicker();
}

into a file i named it domain.js file. Then i have added the domain.js file into the manifest application.js:

//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker
//= require domains
//= require_tree .

but the datepicker does not shown.. Any ideas??? Thanks

[Nerian]

Compare the name of the file required in the manifest file with the name of the actual file :)

[louposk]

I have found the problem. There was a ...}); missing at the end of the javascript... :)

Although it does work while in "New" action, it does not work in the "Edit" action and i get the same error as i have told you in the beginning

An action script on this page may be busy, or has stopped responding. You can stop the script now, or continue to see if the script will complete.
Script: http://127.0.0.1:3000/assets/bootstrap-datepicker/core.js?body=1:667

I get this in Firefox, while in Chrome the Browser stops running and its stack...

My form code for the edit function is the same as the new:

<%= form_for @domain, :html => { :class => "form-horizontal" } do |f| %>

    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :registration %>
    <%= f.text_field :registration, :class =>"datepicker" %>

    <%= f.label :renewal %>
    <%= f.text_field :renewal, :class =>"datepicker" %>

    <%= f.label :expiration %>
    <%= f.text_field :expiration, :class =>"datepicker" %>

All my other files are the same (the application.js and the application.css).. Is seems very weird...

Do you have any idea? Thanks!

[Nerian]

Hi,

And when does that happen exactly? When you load the page? When you click on the input field?

[louposk]

When i load the Edit page..

[Nerian]

That's this line:

https://github.com/Nerian/bootstrap-datepicker-rails/blob/master/vendor/assets/javascripts/bootstrap-datepicker/core.js#L666

[Nerian]

@eternicode This may be a bug.

I am guessing that code just never finishes that While loop.

[louposk]

Is there anything i can do to fix the problem???

[eternicode]

Yes, we've found a couple of instances where certain format/value pairs cause an infinite loop in that while loop. It's in progress at eternicode/bootstrap-datepicker#95 .

[eternicode]

@louposk / @Nerian I don't know the inner workings of this gem (or ruby gems in general ;) ), so I don't know how the field value and JS format are generated, but can one of you say what the input's initial value and datepicker format are for this case?

[Nerian]

@louposk We needed you to show us the HTML that is generated and the JavaScript file where you call the date picker.

[forcryingoutloud]

@louposk I had the exact same issue as you today. On my 'Edit' page, line:666 would cause my browser to crash. After a bit of head banging, I figured out that I forgot to add the date format to the input elements:

data-date-format="yyyy-mm-dd"

Hopefully your issue is just as simple.

[Nerian]

This should be fixed now with the last version of this gem. Try it and reopen this issue if it still doesn't work.

[louposk]

I have tried the @forcryingoutloud sollution and it worked fine. Thanks