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.
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'm working on Rails layout for pdf (using Pdfkit) and I need to include my javascript assets with absolute paths (full urls) because wkhtmltopdf doesn't see relative.
this:
= javascript_include_tag 'application'
is converted to this:
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<!-- MUCH MORE :) -->
How can I get the same script tags with full urls?
// edit
= (javascript_include_tag 'application').gsub('="', "=\"#{ root_url }").html_safe
This should work
javascript_include_tag('application').delete("\n").gsub('="', "=\"#{ root_url }")
I think it will be the best solution for this case
<%= javascript_include_tag 'application', host: request.base_url %>
I have a partial called _index.html.erb
<% metric_objects.each do |metric_object| %>
<% if metric_object.histogram.has_key? 0 %>
<%= javascript_include_tag 'iterative_metric_graph.js', metric_object %>
<% else %>
<!--Another type of graph-->
<% end %>
<% end %>
It is supposed to generate a D3 bar graph for each metric_object. When I open the page, I get the error "D3 is not defined" in the console.
iterative_metric_graph.js is a file in my app/assets/javascripts/active_admin folder.
It consists of the javascript code from this page: http://bl.ocks.org/mbostock/3943967 Nothing more than what is inside the script tags right now.
The issue is that D3 is not being included in iterative_metric_graph.js. I could resolve the error by putting the javascript graph code (from the link above) straight into _index.html.erb, and adding <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>, but I would much prefer to render a partial. How can I include D3 (from the web or from a file) in my javascript file?
To include D3 you can just download it and stick it in you app/assets/javascripts directory. Then add the following to your application.js file:
//= require d3.v3.min
Alternatively you could try to put it in vendor/assets/... but there's a little more work involved in getting that to play nice with the asset pipeline. (more info here: Rails asset pipeline: Standard way for including all /vendor/assets/javascripts/?)
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 %>.
I am using the following partial to render the editor for the Create and Edit pages:
PersonEditor.ascx
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyProj.ViewModels.PersonEditorViewModel>" %>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript" />
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript" />
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
{
%>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>
<%= Html.EditorForModel()%>
<p>
<input type="submit" value="Save" />
</p>
<%
}
%>
I believe I have followed the instructions correctly on Scott Gu's blog post (see "Enabling Client-Side Validation"), but when I load this page in a browser, the entire editor form vanishes. If I remove the two scripts and Html.EnableClientValidation(), everything is back to normal again (except, of course, there is no client-side validation).
I have tried putting the script tags in the master page, but that made no difference.
Any ideas how I might be able to fix this?
Update
If I put the two script tags in Site.Master instead of the partial, everything disappears. It basically makes my app completely invisible. No errors, though. It just loads a blank page.
Your script tags are:
Different than what is in the blog post you reference, and
Incorrect.
They should be:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>