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).
Related
I have a site here https://thatdevlevi.herokuapp.com/. When the page loads you might notice a huge grey blank area. That area is supposed to have a h1 and some text that fades via javascript removing the hidden class from the elements. Why is javascript not working? I have tried putting my javascript inside the asset pipeline (homepage.js) and on the view inside script tags and neither work, but if I run
Alert("test");
that works fine.
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>PortfolioSite</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
I changed the cdn I was using to get jquery to https instead of http and it fixed the issue
I would like to make a little apology to #PaoloMangia as he essentially suggested I do this to fix it and I fairly rudely blew him off on his suggestion.
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'm working on a Rails application which was using Foundation 5.0.3. This had a few issues with Rails 4, but I had it working with no issues. I am not using TurboLinks.
I've just updated to Foundation 5.1.0, and all Foundation JavaScript has stopped working. As far as I can tell, nothing else has changed, there are no resources returning 404, and there are no JavaScript errors coming out of the browser console.
I don't know if the problem is Foundation, the asset pipeline, or my project setup and page structure, but I've tried everything I can think of to debug this with no effect.
Here's my basic page structure in case the error is in how I've set it up, but this was working fine for Foundation 5.0.3.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<%= favicon_link_tag "favicon.png" %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag params[:controller] %>
<%= stylesheet_link_tag "site_area_specific/#{params[:site_area]}" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag params[:controller] %>
<%= csrf_meta_tags %>
<script>
$(function() {
$(document).foundation();
});
</script>
</head>
<body>
<%= render "shared/topnav" %>
<%= yield %>
<%= render "shared/footer" %>
</body>
</html>
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>
I'm using Rails 3.0. I want to add a Javascript file show_javascript.js that is in /public/javascripts/ to a view show.html.erb.
The show.html.erb file takes the <head>...</head> part from the template application.html.erb
I'm wondering how I should add it.
Assuming you have a generic stylesheet layout you could add the following to application.html.erb:
<%= javascript_link_tag 'show' if params[:action] == 'show' %>
You could even use content_for params plus yield in the <head> section like so:
layout.html.erb
<head>
<%= yield(:header) if #content_for_header %>
</head>
product/show.html.erb
<% content_for :header do -%>
<%= javascript_link_tag 'show_product' %>
<% end -%>