I am trying to start using Twitter Bootstrap for Rails. The popover() function is not working at all. Nothing happens.
layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-buttons.js" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js" %>
<%= csrf_meta_tags %>
<script>
$(function () {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
Here is my a part of my views/test/test.htlm.erb:
<li>
<a data-placement="below"
class="btn danger span2"
data-content="This is a test"
href="#"
rel="popover">+ Test</a>
</li>
Part of my Gemfile:
gem 'rails', '3.1.3'
gem 'jruby-openssl'
gem 'json'
group :assets do
gem 'sass-rails', '~> 3.1.5'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
end
I also tried to copy/paste the twipsy.js and popover.js in my application.js file and to call it in my layouts/application.html.erb with:
<%= javascript_include_tag "application" %>
What am I missing? Any ideas?
The issue is with your selector you're using:
$("a[rel=popover]")
That jQuery selector matches the entire rel attribute, and according to a Bootstrap bug report, Rails adds additional attributes to the rel tag, like nofollow.
Try using this selector instead:
$("a[rel*=popover]")
Related
I've read many pages about using jquery in rails and still can't seem to get it to work.
I have the 'jquery-rails' gem, and I installed.
I have the require statements in the application.js file.
Here is a test page I keep running:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script>$(document).ready(function(){
$(".bg-info").click(function(){
$(this).hide();
});
});</script>
</head>
<body>
<center>
<h1 class="bg-info"><%= yield(:title)%></h1>
</center>
</body>
</html>
But when I click on the "bg-info" text in the browser I get no response.
Here's what you should have:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
$(document).on("click", ".bg-info", function(e){
$(this).hide();
});
Here's what I'd do for the layout (to test):
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="bg-info"><%= yield(:title)%></div>
</body>
</html>
If the above doesn't work out the box, you'll probably have an issue with your development environment (OS) -- most likely with ExecJS.
To confirm this, you'll need to debug your developer's console:
To access the dev console, right-click > inspect element > console.
This shows you any errors with your JS & your front-end environment. If any errors appear, they may tell you what the issue is.
If no errors appear, you should try installing NodeJS on your system, as this ensures Rails can use the appropriate JS executable.
I am following the Rails guide: http://guides.rubyonrails.org/getting_started.html
and I have the following line in my index.html.erb:
<%= link_to 'Destroy', team_path(team), method: :delete, data: { confirm: 'Are you sure?' } %>
But it doesn't work; it just goes to the show page.
For your information, this is my routes.rb:
Rails.application.routes.draw do
get 'bets/index'
root 'bets#index'
resources :teams
end
My controller:
def destroy
#team = Team.find(params[:id])
#team.destroy
redirect_to teams_path
end
My application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree
//= require jquery
//= require jquery_ujs .
My application.html.erb:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'defaults', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
Please note that I have tried changing <%= javascript_include_tag 'defaults', 'data-turbolinks-track' => true %> to <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>, but this gives me the following error:
Showing C:/Sites/BettingSite/app/views/layouts/application.html.erb where line #6 raised:
TypeError: Object doesn't support this property or method
(in C:/Sites/BettingSite/vendor/cache/ruby/2.1.0/gems/turbolinks-2.5.3/lib/assets/javascripts/turbolinks.js.coffee)
Line 6 is the line: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Can someone please help me?
So it seems like the problem is that Windows is not working well with CoffeeScript. According to this question, add this gem to your gemfile:
gem 'coffee-script-source', '1.9.1'
That, or remove all CoffeeScript from your code by renaming your .coffee or .js.coffee files to regular .js files (and, of course, changing your CoffeeScript code to regular JavaScript). You would also have to remove any CoffeeScript gems from your gemfile.
BTW, when you update your gemfile, you must run bundle install and then restart your server.
Recently, I added a bxslider (http://bxslider.com/examples/manual-show-without-infinite-loop) to view galleries in a rails project. I have followed the instructions here (https://github.com/stevenwanderski/bxslider-4) to the best of my understanding, but my gallery images are showing up in a list rather than within the slider. I have attached my code below, and would like to know how I solve this strange behavior.
\app\views\galleries\show.html.erb
<div id="embed_gallery" >
<%= render :partial => 'projects/embed', :collection => #projects, :as => :project%>
</div>
\app\views\galleries\embed.html.erb
<% title h(#gallery.name) %>
<% #section = "explore" %>
<%= javascript_include_tag :defaults %>
<div id="embed_gallery">
<ul class="bxslider">
<%= render :partial => 'projects/embed', :collection => #gallery.projects, :as => :project %>
</ul>
</div>
\app\views\layouts\embed_layout.html.erb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<%= javascript_include_tag 'jquery.bxslider.min' %>
<%= stylesheet_link_tag 'jquery.bxslider'%>
<!-- jQuery library (served from Google) -->
<%= javascript_include_tag 'ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' %>
<script type="text/JavaScript">
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
</html>
app\assets\javascripts\embed_scripts.js
//= require jquery
//= require js/jquery.bxslider.min.js
//= require lib/jquery.bxslider.css
I have the js/jquery.bxslider.min.js and lib/jquery.bxslider.css files included in my project, but still for some reason, the bxslider is not appearing on my page! What am I missing?
The output of your code should be similar to http://jsbin.com/veyexaki/2/edit?html,output. It also makes sense to check if there is no any javascript errors in your code (click F12 to run dev tools in the browser and check console).
I'm making an app using Rails 4.0.1 with Ruby 2.0 and I'm running into trouble installing the "Rambling slider" image carousel from here.
Here's the portion of the gemfile:
...
gem 'paperclip'
gem 'rambling-slider-rails', :git => 'https://github.com/gonzedge/rambling-slider-rails'
gem 'uglifier', '>= 1.3.0'
...
I ran bundle install and, following the instructions, put a reference to jquery.rambling.slider in my manifest files.
My app/assets/javascripts/application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.rambling.slider
//= require_tree .
My app/assets/stylesheets/application.css file:
/*
*= require jquery.rambling.slider
*= require_self
*= require_tree .
*/
I included the link tags in app/views/layouts/application.html.erb like so:
...
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag 'jquery.rambling.slider' %>
<%= javascript_include_tag 'jquery.rambling.slider' %>
<%= csrf_meta_tags %>
...
Then added some dummy images and the invoking javascript in the actual view accordingly:
<div id="slider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
<script>
$(window).load(function(){
$('#slider').ramblingSlider();
});
</script>
But all that appears a simple 1'2'3 on the page.
I know that the images are referenced correctly because when I comment out the script in the view file, the 3 images appear with no problems.
The developer tools in Chrome only show that there is a single warning saying "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." at jquery.js?body=1:5375. (I can show this line too if you need it) This warning only appears when the script is uncommented. As soon as I comment it out, the warning goes away.
Any help would be much appreciated. Thanks in advance!
The problem you mentioned(1,2,3 links) occurs because the theme effect was not included, You can include this by adding a div with "theme-default" class, present in the .css file of rambling-slider. For this to work you also need to add the themes folder in stylesheet & images folder of your application
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="ramblingSlider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
</div>
</div>
When I have this as my javascript_include_tag in the head section application.html.erb:
<%= javascript_include_tag :defaults %>
I can successfully use disable_with on submit_tag, but when I change it to:
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"%>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" %>
<%= javascript_include_tag "application" %>
..in order to use a jQuery calendar I cannot use disable_with anymore. It doesn't work anymore.
Any ideas?
You're missing rails.js add that as well to your includes
<%= javascript_include_tag "rails" %>