Rails 4 x Bootstrap 3 Datetimepicker: replace default datetime_select with datetimepicker - ruby-on-rails

In my Rails 4 app, which already uses Bootstrap 3, I just added Datetimepicker by eonasdan.
I carefully followed the instructions offered here and there to install the plugin.
Here is my setup:
Gemfile
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/dropdown
//= require moment
//= require bootstrap-datetimepicker
//= require turbolinks
//= require_tree .
application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'bootstrap/theme';
#import 'bootstrap-datetimepicker';
#import "font-awesome-sprockets";
#import "font-awesome";
#import "simple_calendar";
#import "custom.scss";
#import "custom/**/*"
And I do have restarted my server.
Now, I am trying to use the plugin in my Posts#New and Posts#Edit views form, to replace the current datetime_select field:
<div class="field">
<%= f.label :date, "DATE" %>
<%= f.datetime_select :date %>
</div>
This is where I am after my first attempt:
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<%= f.label :date, "DATE & TIME" %>
<%= f.text_field :date, :class => "form-control"%>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
</div>
Which gives me the following elements in the view:
Although the design is far from perfect, for now, this is not what I am concerned about.
The real problem is that, when I create a post, the date attribute (which is a datetime data type) is set to nil, instead of the value chosen in the datetimepicker.
I looked for similar situations online, and the closest I have found is this Stack Overflow question.
Unfortunately, it is based on slim forms, and I don't know how to "translate" them into regular forms, to be used in a erb.html file.
Any idea of what is wrong with my code?
—————
UPDATE: I have found a way that is actually saving the date to the database when the post is created:
<div class="form-group" id="post_date_time">
<%= f.label :date, "DATE & TIME" %>
<div class='input-group date' id='datetimepicker'>
<%= f.text_field :date, :class => "form-control"%>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
However, it does not seem to work properly on the edit form, since I don't get the datetimepicker populated with the date of the post. Am I missing something here?
—————

To get the datetime populated on your edit page you can do this in the javascript setup:
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
defaultDate: "<%= #post.date %>",
format: "YYYY-MM-DD hh:mm a Z"
});
});
</script>
I have the working code here: Github - Rails Datetimepicker Example

Related

How to load a coffeescript on my views in rails?

Im stuck with a very basic stuff here at my application.
I have a form that I want to make some processing using coffeescript.
My controller/action isProfilesController#edit_profile_photos
And my view is: /profile/edit/profile_photos.html.erb
<span class="file-upload">
<div class="progress" id='progress-bar' style='display:none;'>
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%">
<span class="sr-only" id='progress-bar-text'></span>
</div>
</div>
<button type="button" class="btn btn-lg btn-outline-green trigger-file-upload">Upload a new photo</button>
<%= f.attachment_field :avatar, direct: true, presigned: true %>
</span>
So, I created a users.coffee file with this:
$(document).ready ->
alert "page has loaded!"
jQuery ->
$(document).on "upload:start", "form", (e) ->
$(this).find("input[type=submit]").attr "disabled", true
$("#progress-bar").slideDown('fast')
$(document).on "upload:progress", "form", (e) ->
detail = e.originalEvent.detail
percentComplete = Math.round(detail.loaded / detail.total * 100)
$('.progress-bar').width("#{percentComplete}%");
$("#progress-bar-text").text("#{percentComplete}% Complete")
$(document).on "upload:success", "form", (e) ->
$(this).find("input[type=submit]").removeAttr "disabled" unless $(this).find("input.uploading").length
$("#progress-bar").slideUp('fast')
Well. I dont know why my coffee file its not being loaded. Should it have the same name of the controller? (profiles.coffee)?
Thanks
you can add it to the application.js file to include it to load, I am assuming you have the standard configuration on layouts, loading application.js there.
//= require users
or you can name the file as the controller, and add this to your layout
<%= javascript_include_tag params[:controller] %>
you have a lot of options to solve it, if this doesn't help you, please add more info to the question, like application.js and layout/application.html.erb

Can't get banner image to display using Rails

When running my Rails (Blog) app, I can't get my banner image to display.
My files are as follows (the page show without error just no image):
application.js
//* require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .
application.scss
#import "bootstrap";
#import "navbar";
_post.html.erb
<div class='col-sm-6 col-lg-4'>
<div class="card">
<div class="card-topper" style='background-image:
url(https://static.pexels.com/photos/113762/pexels-photo-113762-
large.jpeg);'>
</div>
<div class="card-block">
<h4 class="card-title"><%= link_to post.title, post %></h4>
<p class="published-date">published Jan 14, 2016</p>
<p class="card-text"><%= truncate(post.description, lenght: 130)
%></p>
<%= link_to 'Read', post, class: 'btn btn-read' %>
</div>
</div>
</div>
The issue is not related to rails. The image background will appear once you have content in your DIV. if you don't have content inside the DIV, better use <img /> tag.
Reference:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
Image tag:
https://www.w3schools.com/html/html_images.asp

DateTimePicker Ruby On Rails

I am trying to add a datetimepicker to rails.....
These are the instructions http://xdsoft.net/jqplugins/datetimepicker/
So I have downloaded /jquery.datetimepicker.css and added it to my stylesheets folder…and downloaded jquery.js and /build/jquery.datetimepicker.full.min.js and added them to my javascripts folder….
Here is the code that I am using to try to display the date picker...
<div class="col-md-6">
<label>Start Time</label>
<%= f.text_field :start_time, readonly: 'true', placeholder: 'Start Time', class: 'form-control' %>
</div>
<div class="col-md-6">
<label>End Time</label>
<%= f.text_field :end_time, readonly: 'true', placeholder: 'End Time', class: 'form-control', disabled: 'true' %>
</div>
</div>
<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.css"/ >
<script src="/jquery.js"></script>
<script src="/build/jquery.datetimepicker.full.min.js"></script>
jQuery('#reservation_start_time').datetimepicker();
Do you know what im doing wrong??? It is not showing up at all!
Thanks….
Barry
not sure if you got this resolved, but...
Your jquery code should really be in a separate js file and referenced in your application.js (since you're writing in rails). But, minimally, it should be within script tags at the bottom of the file, not after them.
Try this:
<script>
$('#reservation_start_time').datetimepicker();
</script>

Rails4 and Bootstrap: responsive design doesn't work

Although I tried the code below, these contents are arranged in tandem like this;
side1
.
.
.
contents from yield
.
.
.
side2
How can I display like this?
side1... contents from yield... side2
On the other hand, class="table table-striped" works, for example.
I have been tried to modify the source created by others.
It would be appreciated if you could give me where I should check.
application.html.erb
<div class="container">
<div class="row">
<div class="col-sm-3">side1</div>
<div class="col-sm-6">
<div><%= notice %></div>
<div><%= alert %></div>
<%= yield %>
</div>
<div class="col-sm-3">side2</div>
</div>
</div>
Although I tried col-xs, I found the same result.
custom.css.scss
#import "bootstrap";
Gemfile
gem 'bootstrap-sass', '2.3.2.0'
application.css
*= require_tree .
*= require_self
Can you check if custom.css.scss has been added to application.css.scss and that application.css is loaded in the layout page?
EDIT:
According to this for the bootstrap version: bootstrap docs, perhaps you should use <div class="span4"></div> syntax.

Javascript not working - changing image to text on click

I've asked a question recently on how to change 2 icons to text on click. The solution worked for a while, but now it's not working. Is there another way to do it or is the problem in the code? I face the problem with other scripts very often.
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.ui.all
//= require jquery.turbolinks
//= require jquery_nested_form
//= require_tree .
show.html.erb
<div class="thumbsup">
<%= link_to image_tag('othericons/thumbsup_off.PNG', height: '20', width: '20', like_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>
<div class="thumbsdown">
<%= link_to image_tag('othericons/thumbsdown_off.PNG', height: '20', width: '20', dislike_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>
html output
<div class="thumbsup">
<a data-method="put" data-remote="true" href="/posts/1/comments/4/like" rel="nofollow">
<img alt="Thumbsup off" height="21" src="/assets/othericons/thumbsup_off.PNG" width="20" />
</a>
</div>
<div class="thumbsdown">
<a data-method="put" data-remote="true" href="/posts/1/comments/4/dislike" rel="nofollow">
<img alt="Thumbsdown off" height="21" src="/assets/othericons/thumbsdown_off.PNG" width="20" />
</a>
</div>
icons.js
$('.thumbsdown a, .thumbsup a').on('click', function()
{
$('.thumbsdown').before('You voted')
$('.thumbsdown, .thumbsup').remove()
})
If it was working before, the problem is likely an issue with Turbolinks:
$(document).on("click", ".thumbsdown a, .thumbsup a", function() {
$('.thumbsdown').before('You voted')
$('.thumbsdown, .thumbsup').remove()
});

Resources