I doing a modal like this:
Link that shows the modal:
<%= link_to "versão resumida", resumed_rep_life_animal_path(animal, :partial => true), 'data-toggle' => 'modal', 'data-target' => '#myModal', 'data-no-turbolink' => true %>
Modal html itself:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fechar</button>
</div>
</div>
But, the data-no-turbolink dont work as expected. If I refresh the page, it works ok, but, when I browse the pages with turbolinks, looks like the data-no-turbolink is just ignored.
Am I doing something wrong? I have some modals like the example in my app, don't want to remove them and dont want to remove turbolinks neither...
Thanks in advance.
As davydotcom said, the reason the modals aren't working is because they are bound to $(document).ready instead of $(document).on('page:change'), which is what turbolinks uses.
The jquery-turbolinks gem will make it so that ready calls will also respond to turbolink's page:change calls.
Step 1: Add gem jquery-turbolinks to your Gemfile.
Step 2: Add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
Step 3: Restart your server. Boom!
data-no-turbolinks is not the issue here...
It appears bootstrap js out of the box monitors only document.ready, and bootstrap JS may need modified to check for page:load as well
Look at line 222
This will only fire on the first request in which bootstrap is included. It needs modified to fire on page:load as well.
One suggestion I can make is to use gem 'twitter-bootstrap-turbo' for getting bootstrap. This is a fork of twitter-bootstrap-rails , with the addition of turbolinks handlers.
Related
Modal content displays fine when triggered by a clicking button via Ajax. However, instead of the modal popping up and making the entire page behind it grey and inactive the modal content appears within the HTML content and pushes the other contents down. I had run a similar modal on a different framework (Shiny) other than rails and it worked fine. I came across a similar question: Twitter Bootstrap modal pushes html content to the left. The working solution was do this in CSS: html{overflow:hidden;height:100%;} and
body{overflow:auto;
height:100%;}
which I tried but did not work. Other similar posts conclude that issues are due to bugs in Bootstrap and suggest to modify bootstraps source code but I suppose they were fixed since the posts date like more than 2 years ago.
My code:
/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require_tree .
app/views/indicators/index.html.erb
<%= link_to 'Add release', new_release_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
/app/controllers/indicators_controller.rb
def new_release
respond_to do |format|
format.html
format.js
end
end
app/views/indicators/new_release.js.erb
$("#modal-window").html("<%= escape_javascript(render 'indicators/indicator_modal') %>");
$("#modal-window").modal('show');
/app/views/indicators/_indicator_modal.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
Could it be a Rails specific issue? How can I make the modal pop-up?
It looks like you're missing some markup that the modal requires (see the Bootstrap docs)
You have:
<div class="modal hide fade" ... >
<div class="modal-header" ... >
<div class="modal-body" ... >
<div class="modal-footer" ... >
But you need:
<div class="modal hide fade" ... >
<div class="modal-dialog" ... >
<div class="modal-content" ... >
<div class="modal-header" ... >
<div class="modal-body" ... >
<div class="modal-footer" ... >
If your using bootstrap gem try to add following line to /app/assets/javascripts/application.js
here are the https://github.com/twbs/bootstrap-sass
//= require bootstrap-sprockets
or else if manually using boostrap by using source code try to add below file to javascript directory in your application
bootstrap/js/modal.js
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
I am struggling getting a simple modal dialog to display in my rails app. Here are the relevant files...
Gemfile
group :assets do
...
gem 'bootstrap-sass-rails'
...
end
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require "bootstrap"
//= require "bootstrap/modal"
//= require_tree .
app/assets/stylesheets/application.css
#import "bootstrap";
#import "bootstrap/modal";
app/views/tasks/index.html.erb
<%= link_to 'Modal', new_task_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
...
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
app/views/tasks/_new.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
app/views/tasks/new.js.erb
$("#modal-window").html("<%= escape_javascript(render 'new') %>");
So this is just a simple app with a single model that I am trying to get my feet wet with. Right now the link will respond. The page fades, but I am not getting any content.
I've spent the last week messing around off and on trying to get this working wihtout much luck. Thanks in advance for any help.
You need to call modal() on $("#modal-window"). Update app/view/tasks/new.js.erb as:
$("#modal-window").html("<%= escape_javascript(render 'new') %>").modal()
This is a follow up question to my post
javascript stops working after link_to in rails 4
I found this solution Making jQuery works with Turbolinks and the one that was suggested on my previous question
I added the following code to my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
$(document).on('page:load', function() {
$( ".draggable" ).draggable();
});
now draggable is not working at all on my page
<div class="draggable">
<p><strong>Title:</strong>
<%= task.title %></p>
<p> <%= link_to 'Show', task, :class => 'text' %>
</div>
Draggable should still work if you click a link and update the page by Turbolinks, but it won't work in initial loading because you havn't set it.
To make it work, you need to set it on both document ready and page:load.
$(document).on('page:load', function(){
$(".draggable").draggable();
});
$(document).ready(function(){
$(".draggable").draggable();
});
In my Rails application, I have the following code for a dropdown menu:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<% if signed_in? %>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
In my application.js file I have the following code:
//= require bootstrap
I have no idea why the dropdown menu isn't working, and I have no idea how to fix it. A few days ago, it was working fine, and now it no longer functions properly. Thanks for any help!
I figured out the answer from this previous StackOverflow question:
twitter bootstrap drop down suddenly not working
I had to put //= require jquery below my line of code that required bootstrap, and then it worked!
I tested your HTML code and it worked fine.
First of all, make sure you are loading jQuery first:
//= require jquery
//= require bootstrap
Also, you have to call the dropdown via javascript:
$('.dropdown-toggle').dropdown()
The solution lies in the order you import the javascript dependencies.
This is what I had initially in my application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree
When I removed bootstrap-sprockets i my dropdown worked. However, I did not want to remove bootstrap-sprockets. So My new order looked like this;
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
Then, to be safe, I had to clean and pre-compile assets by running the following;
rake assets:clean
bundle exec rake assets:precompile
This worked for me.
I've got in the same problem with default Rails and twitter-bootstrap-rails gem installation.
Direct call of dropdown initialisation works indeed, but it looks like kind of a workaround for me. So, I continued to search for the answers and was able to find the one that looks more appropriate:
I have solved this issue.
I add following code in users.js.coffee:
jQuery ->
$('.dropdown-toggle').dropdown()
Solution was found here. Thus, I added this code to app/assets/javascripts/bootstrap.js.coffee, so the final code in it looks like the following:
jQuery ->
$("a[rel~=popover], .has-popover").popover()
$("a[rel~=tooltip], .has-tooltip").tooltip()
$('.dropdown-toggle').dropdown()
And right after this dropdown in navbar started to work exactly as expected.
I have had this issue for the whole day but was finally able to fix it.
I applied the solution above (changing the order) and the dropdown worked. However, I noticed in the console there were errors (Uncaught ReferenceError: jQuery is not defined) due to the fact that bootstrap-sprockets was called before jQuery.
I have found a solution that worked for me here
Basically, I have included the following code below the required items in application.js as:
//= require jquery
//= require tether
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});
For me this worked like a charm. Hope that helps somebody!
I ran into the same issue and removing //= require bootstrap from my application.js worked for me. I hope this too helps someone!