I want to use the Togglable Tabs from Twitter's Bootstrap on a Rails app, but I can't make it work.
Here is my app/views/pages/home.html.erb :
<ul class="nav nav-tabs" id="dashboard_products">
<li class="active"> 1 </li>
<li> 2 </li>
<li><a href="#given_products" > 3 </a></li>
<li> 4 </li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="owned_products"> 1 </div>
<div class="tab-pane" id="borrowed_products" > 2 </div>
<div class="tab-pane" id="given_products" > 3 </div>
<div class="tab-pane" id="requested_products" > 4 </div>
</div>
And here is my app/assets/javascripts/pages.js.coffee :
$ ->
$('#dashboard_products a').click = (e) ->
e.preventDefault()
$(this).tab('show')
And here my app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
Where did I fail ?
You are missing the data-toggle tag.
Here is an example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8 well">
<ul class="nav nav-tabs">
<li class="active"> Home
</li>
<li>Profile
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="home">home tab content</div>
<div class="tab-pane" id="profile">profile tab content</div>
</div>
</div>
</div>
</div>
DEMO
Check if you have included bootstrap js ...and also check you include coffee script file after you include bootstrap js. and coffee script include must also be after your html. as dom must create the element before init tabs..
The example here
http://getbootstrap.com/javascript/#tabs
doesn't have a data-target attribute.
<li role="presentation" class="active">Home</li>
But when I add it
<li role="presentation" class="active">Home</li>
It all worked.
Related
I am trying to add a javascript image slider on a basic rails app. I added the JS file to assets/javascripts folder but my javascript is not executing.
I added my html file below. Can anyone one please tell me what am I missing?
<div class="slider">
<!-- Slideshow 3 -->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
});
});
</script>
<ul class="rslides" id="slider3">
<li>
<div class="banner">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner2">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner1">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
</ul>
<ul id="slider3-pager">
<li><img src="assets/device3.jpg" alt=""></li>
<li><img src="assets/device2.jpg" alt=""></li>
<li><img src="assets/device1.jpg" alt=""></li>
</ul>
<div class="clearfix"> </div>
</div>
I am kind of new towards implementing rails with angular js.
What I want is I have a listing index page which gives me all the listings using
Listing.all
My page has several filters in it.Lets say I have a filter of gender, so what I needed is when that dropdown changes the page with listings in it should also get refreshed and now only show listings with the selected gender.
Here is what I have done:-
/application.js/
//= require jquery
//= require jquery_ujs
//= require semantic-ui
//= require dropzone
//= require cloudinary
//= require angular
//= require angular-resource
//= require app.js
//= require_tree ./angular
//= require_tree .
/ListingController(rails)/
def index
#listings=Listing.all
end
/index.html.erb/
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>
<div class="ui divided items" ng-controller="ListingCtrl" ng-init="init( <%= #listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">
<div class="item">
<div class="image">
<img src={{listing.photos.first.file_name.url}} class="header"/>
</div>
<div class="content">
<%=link_to '{{listing.title}}','{{listing}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
</span>
</div>
<div class="description">
<p>
<%='{{listing.love_for_pets}}'%>
</p>
</div>
<div class="extra">
<div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>
</div>
</div>
</div>
</div>
/angular/controllers/ListingController.js/
app.controller('ListingCtrl', ['$scope', '$resource', function($scope, $resource) {
$scope.init = (listings)
{
$scope.listings = angular.fromJson(listings)
}
}]);
/app.js/
var app = angular.module("PetForLife", ['ngResource'])
/Gemfile/
gem 'angularjs-rails'
The index page gets loaded but no listings are getting displayed,also no error on the console.
Can someone please help me with this?
So Finally after struggling and lot of google searches,I found the answer,so I am posting it here so that it can help someone.
Here are the changes required:-
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="five fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
<div class="field">
<label>Pet</label>
<%=select(:listing,:pet_type,options_for_select([['Dog','Dog',{class:'item'}],['Cat','Cat',{class:'item'}],['Bird','Bird',{class:'item'}]]),{prompt:'Pet'},{:'ng-model'=>'listing1.pet_type',class:'ui dropdown pet_type'})%>
</div>
<div class="field">
<label>Breed</label>
<%=select(:listing,:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.name,class:'item']}),{prompt:'Breed'},{:'ng-model'=>'listing1.breed_type',class:'ui search dropdown disabled breed_type'})%>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<!--div class="right floated field">
<label style="visibility:hidden;">Search</label>
<div class="ui left labeled icon button filter">
<i class="filter icon"></i>
Reset
</div>
</div-->
</div>
</form>
</div>
</div>
<div class="ui page grid tabmenu">
<div class="ui secondary pointing filter menu">
<!--a class="blue item" data-tab="saved">Saved</a-->
<a class="active green item" data-tab="all">All</a>
<a class="red item" data-tab="favorite">Favorite</a>
<a class="blue item" data-tab="user_listing">Your Listings</a>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %>)" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true">
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
The only change required was creating a separate div for initialisation and a different div for ng-repeat.
Rest all remains the same.
Hope it will help someone.
I am not familiar with rails, but it appears you are trying to pass data to the view through some kind of render engine. Instead, you need to have angular fetch the data with an ajax call (or you could use websockets) and then pass it to the view with angular. You will need to load angular on the page you are using by attaching the ng-app="PetForLife" to the body tag (or html tag)
<html ng-app="PetForLife">
You attach your controller with the ng-controller attribute on the first div tag (or the body tag).
<body ng-controller="ListingCtrl">
You should look at this article, which goes over some different (good and bad) ways to pass data to angular from Ruby:
Pass Rails Data to Angular
Check the 4th method there. You can use an angular service to get the rails data, and then inject that data wherever you need to in your angular app.
I am using bootstrap from a CDN with my rails app. Most of the styling works except for the carousel on the home page. It works fine in development but not at Heroku. I don't know if this is relevant but I have defined this route in routes.rb: root "home#index" which displays index.html.erb via the HomeController. The first image in the carousel is loaded but that is it. It has no functionality. Right now I have no bootstrap gems in the gem file which I will try if necessary. I just wanted to see if anyone has seen this issue before and knows what to do. I think this file is OK since it works in development but here is index.html.erb:
<div id="myCarousel" class="carousel slide img-rounded" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<%= image_tag("nicholson2.jpg", alt:"nicholson", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("marilyn2.jpg", alt:"marilyn", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("pacino2.jpg", alt:"pacino", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("lily.jpg", alt:"lily", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("deniro2.jpg", alt:"deniro", class: "img-rounded") %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I resolved this by using https: instead of http: when linking to external resources. It works in development but evidently heroku does not allow it.
I had the same issue, in my case i had to remove the //=require jquery_ujs from the application.js file (assets/javascripts/application.js). Hopefully it will resolve the issue. :)
I have bought a twitter bootstrap theme from wrapbootstrap.
I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application.
I am new to this and I have no idea how to do it. After doing a lot of research on this, I found only a very few discussion regarding this issue. As for example I found this post: Implementing WrapBootstrap theme into Rails App
But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascripts and app/assets/stylesheets folders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.css file, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?
First check this screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.
hope it helps
EDIT:
Markup:
Check the template you downloaded, lets start with the navbar for example
Code from template:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Service</li>
<li>FAQ</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Dropdown 4</li>
<li>Dropdown 5</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Now you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like this:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
and last, do your navbar partial
_navbar.html.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active">Home</li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
That was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply your new theme.
I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.
Does somebody have the solution for me ?
PS : I currently use Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. the 1.jpg is enough!
Does your app/assets/javascripts/application.js contain a reference to bootstrap?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/pictures/1.png">
</div>
<div class="item">
<img src="/pictures/2.png">
</div>
<div class="item">
<img src="/pictures/3.png">
</div>
<div class="item">
<img src="/pictures/4.png">
</div>
<div class="item">
<img src="/pictures/WordcloudInsight.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working
check above link, also did you add this + is jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>