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 using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this
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 trying to make a slideshow using multiple photos that users uploaded through carrierwave.
This is my post/show.html.erb
<div id = "carousel-example-generic" class= "carousel slide" data-ride= "carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% #photo_attachments.each do |p| %>
<div class="item active">
<%=image_tag p.avatar_url.to_s%>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<% end %>
</div>
.....
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>
I cannot figure it out the way to list one photo per slide:( It is still listing all the photos that I have to scroll :(
You are applying active class to all photos that you use
div class="item active"
but it should be
div class="item"
and add this into your javascript
$( '.item:first' ).addClass( 'active');
How to include carousel (component of twitter bootstrap) when i've already installed the twitter bootstrap in my rails application.? i ve less file in my stylesheet and bootstrap.js.coffee in assets pipeline. i wanted to use carousel in my application. how to do that?
As tdubs answer indicates the Twitter Bootstrap documentation is the best place to start. I find that looking at the examples page source really helps.
This is how I would implement the carousel:
home.js.coffee
$('.carousel').carousel()
view
<!-- carousel -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="htpp://someimagepath.com" alt="foo">
<div class="container">
<div class="carousel-caption">
<h1>CAPTION FOO BAR</h1>
</div>
</div>
</div>
<div class="item">
<img src="htpp://someimagepath.com" alt="foo">
</div>
<div class="item">
<img src="htpp://someimagepath.com" alt="foo">
</div>
<div class="item">
<img src="htpp://someimagepath.com" alt="foo">
</div>
<div class="item">
<img src="htpp://someimagepath.com" alt="foo">
</div>
<div class="item">
<img src="htpp://someimagepath.com" alt="foo">
</div>
</div>
</div><!-- /.carousel -->