Javascript not showing page heading and text in heroku at all - javascript

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.

Related

jquery not working in rails

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.

Bxslider not showing up in Rails project

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).

How to properly embed script tags from 3rd party vendor into into rails view

I am using a really handy service called typecast. One of the perks is that there are licensing agreements with different font providers, myfonts, fonts.com, etc.
To access the fonts you've designed with, typecast gives you an embed link like so:
<script type="text/javascript" src="http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js"></script>
I'm developing this in a rails app (Rails 4) and to quickly see the results, I am putting the above script at the bottom of my application layout file.
<!DOCTYPE html>
<html lang="en">
<%= yield :head %>
<body class="page">
<div class="ca-root"> <!-- root element required for sticky footer -->
<%= yield :header %>
<%= yield :hero %>
<%= yield :main_content %>
<div class="ca-root-footer"></div> <!-- Need this elementfor the sticky footer -->
</div> <!-- End root for sticky footer -->
<%= yield :footer %>
</body>
</html>
<script type="text/javascript"
src="http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js"></script>
This gives me a strange 502 bad gateway error. Is it something I'm doing wrong with rails?
Have you tried adding the next line inside the body tag?
<%= javascript_include_tag 'http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js' %>
Just after <%= yield :footer %>.

Upgrading from Foundation 5.0.3 to 5.1.0 Breaks JavaScript

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>

Google CDN Jquery load not working

I currently have an ugly array of separate javascript files in one of my layouts and I'm trying to clean it up using the Google CDN.
Current state (horrible I know):
...css...
<%= yield :head %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" %>
<%= javascript_include_tag "ui/jquery.ui.core", "ui/jquery.effects.core",
"ui/jquery.effects.highlight", "ui/jquery.ui.widget", "ui/jquery.ui.tabs",
"ui/jquery.ui.progressbar" %>
<%= javascript_include_tag "jquery.ui.stars.min", "application", "rails" %>
I tried replacing the 2nd from bottom tag (with the long list of files) with:
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" %>
I am getting no luck with that - it seems as if the google file is not there at all (I checked my page source and it is loaded). What am I doing wrong here?
I don't know how to translate it into RAILS but this simple HTML should do the trick.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
if(typeof jQuery == 'undefined') {
//<![CDATA[
document.write("<script src='/includes/jquery-1.4.2.min.js' type='text/javascript'><\/script>");
//]]>
}
</script>
This would assume that your jQuery file is stored on /includes/jquery-1.4.2.min.js.
On Google's CDN failure, local copy will get fetched.
Sorry to dredge up an old post, but I'm not sure the question was actually answered.
I had a similar problem as you did, and the solution was actually quite simple: I was not including the CSS. You can do so through Google's CDN as well:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
or
<%= stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css' %>
Obviously this is for the ui-lightness theme; there are other themes available on the CDN (though not all of them). I'm sure you can find those with a quick Google search.

Categories

Resources