Bundler update for the entire application caused a very specific issue with the <link> being returned from <%= stylesheet_link_tag 'application', media: 'all'%>
Instead of returning the usual <link rel="stylesheet" href="assets/application.css"> , it now returns <base href="/">
If I edit the HTML to manually add the <link>, the css shows up correctly which indicates that there is no compiler issue. Also, some answers that fixed somewhat similar problems did not work with this specific issue including (but not limited) to the following solutions:
# Enable the asset pipeline
config.assets.enabled = true
# Fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# Serve Static Assets.
config.serve_static_files = true
Also, switching ENVs and clearing cache with rake tmp:cache:clear and rake assets:clean did not had any effect on the issue...
To make things weirder, the ember stylesheet and script are working as expected:
<%= include_ember_stylesheet_tags :frontend %>
<%= include_ember_script_tags :frontend %>
<link rel="stylesheet" href="assets/frontend.css">
<script src="assets/frontend.js"></script>
Issue is possibly related to one of this gems:
Rails (4.2.5)
Sprockets (3.5.2)
You can view the complete Gemfile.lock or the entire Source Code on Github.
Another possible root cause is a new route configuration where somehow mount_ember_app :frontend, to: "/" relates to the lack of <link> being returned and <base href="/"> being returned instead since both maps to "/". However, I could certainly be wrong about it...
This is all the information that I was able to gather since I could not see any useful information on the logs including the browser's output.
This problem showed up after several upgrades around, especially after mount_ember_app was created. The way to fix it is to have a similar structure to the following:
Ember-Cli-Rails Initializer
EmberCLI.configure do |config|
config.app :frontend, build_timeout: 30
end
Routes.rb
mount_ember_app :frontend, to: "/", controller: "application"
App/views/application/index.html.erb
<%= render_ember_app :frontend do |head| %>
<% head.append do %>
<%# Rails Asset Pipeline%>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_include_tag 'application' %>
<%# Ember-cli-rails Pipeline - Frontend Stylesheet is not used.%>
<%= include_ember_script_tags :frontend %>
<% include_ember_stylesheet_tags :frontend %>
<%# META Stuff %>
<%= csrf_meta_tag %>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<% end %>
<% end %>
Frontend/App/index.html
<!DOCTYPE html>
<html>
<head>
<title>Frontend</title>
{{content-for 'head'}}
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
{{content-for 'body-footer'}}
<%= render partial: "layouts/shared/analytics" %>
</body>
</html>
This will solve most, if not all assets issues. <base href="/"> apparently is normal as I now believe that it simply refers to the mount point for the Frontend.
I also had issues with #mixins after most of the SCSS came back to life, but later I found out that they were tied to a totally different issue, and therefore will not be discussed in this answer.
Related
I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923
I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />
I want to embed a variable amount of text files (AngularJs templates) at a specific point of a given text file (./WEB-INF/app.html) but except modifying the file saving it as another file (./index.html?.
The files I want to embed all have file names ending with *.ng.html and are all in a subfolder of ./assets/templates/.
Also I want to write text before and after the embed file (To make AngularJS recognise that they are templates). This text should consist of both static text and the file names relative to the working directory.
This is a possible structure of a working directory:
(index.html) (generated after building)
--assets
--templates
--general
about.ng.html
contact.ng.html
home.ng.html
--users
userlist.ng.html
--WEB-INF
app.html
Can this be done using Ant? If not, how could I do this at build-time in Eclipse?
To further illustrate my intentions, here are examples:
./WEB-INF/app.html
<!doctype html>
<html><head>
#INSERTION_POINT#
</head><body></body></html>
./assets/templates/general/about.ng.html
This is a test.
./assets/templates/general/contact.ng.html
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
./assets/templates/general/home.ng.html
Welcome.<br>
Click a link to explore.
./assets/templates/users/userlist.ng.html
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
After building, I want ./index.html to look like:
<!doctype html>
<html><head>
<script type="text/ng-template" id="/assets/templates/general/about.ng.html">
This is a test.
</script>
<script type="text/ng-template" id="/assets/templates/general/contact.ng.html">
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
</script>
<script type="text/ng-template" id="/assets/templates/general/home.ng.html">
Welcome.<br>
Click a link to explore.
</script>
<script type="text/ng-template" id="/assets/templates/users/userlist.ng.html">
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
</script>
</head><body></body></html>
I figured out that I can get a list of the files I want to embed using:
<fileset dir="war/assets/templates">
<include name="**/*.ng.html"/>
</fileset>
When I have the final string, I could replace my placeholder and save the output to a new file probably like this:
<copy file="WEB-INF/app.html" tofile="index.html">
<filterset>
<filter token="INSERTION_POINT" value="??foo??"/>
</filterset>
</copy>
But how do I get the string I want to have to pass as a value?
definitely not what you're looking for... sorry... but might look into a Javascript oriented build tool (Grunt) and integrate that with eclipse (or even run it from ant if you're trying to keep your builds the same in java and javascript.)
Though this may not be exactly what you're looking for, you're guaranteed lots of community support if you stick to the standards.
I'm touching an old WebForms project but I'm long gone from it and I'm now to used to MVC. I'm trying to refractor the project and come up with a simple issue that is making me crazy...
What would be the best way to include an .aspx file within another?
I don't want to end up having a lot of Master Files just for this, all I'm after is something like #Html.RenderPartial("MyFileName") kind'a thingy or
it's that hard to include a file in some existing files?
Use UserControl Tutorial on UserControl. They are files with .ascx extension and you can include them in your pages
//UserControl1.ascx
<% # Control Language="C#" ClassName="UserControl1" %>
<div>
My Custom Control: I can use any Server controls, html tags etc
</div>
Include it in your .aspx page
<%# Page Language="C#" %>
<%# Register TagPrefix="uc" TagName="MyCustomControl" Src="~/Controls/UserControl1.ascx" %>
<html>
<body>
<form runat="server">
<uc:MyCustomControl id="MyPartialView"
runat="server" />
</form>
</body>
Ok so I'm fairly new to dojo and I'm trying to make a really simple sample mobile app. I'm using eclipse to run the code which uses an android emulator to install/run the app. The problem I'm having is that I keep getting Uncaught Reference Errors for either "require is not defined" or "dojo is not defined", causing my app to appear as plain text instead of formatted like an android app using dojox.mobile widgets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<title>PhoneGap</title>
<!-- DOJO -->
<script src="/assets/www/lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad:true">
</script>
<link rel="stylesheet" href="/assets/www/lib/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="/assets/www/cordova-1.6.0.js"></script>
<script>
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
</script>
</head>
<!-- END DOJO -->
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accHelp" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Accident</h1>
<div class="text">If you are in an accident, you should first move to a safe
location. Below are some additional actions you can take:</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Exchange Driver Info</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Record Accident Location</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Take Photos of Accident</li>
</ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accInfo">
<h1 data-dojo-type="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
onClick="console.log('Going back');">Driver</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
</html>
Does anything appear wrong with the code itself? Especially where I'm using the script scr... to point to the dojo.js and where I'm using require to call the dojo.mobile functions. I was under the impression that as long as the src pointed to the right location in the package tree, it didn't much matter where I copied the file in.
I have tried using the Google CDN to call dojo.js, but the emulator throws errors when I do so, possibly because it doesn't utilize an internet connection?
Any help would be great!
Try removing /assets/www/ from your local URLs
Your require statement looks like this:
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
And it should look something like this:
require([
"dojo/mobile",
"dojo/mobile/parser"
],
function(mobile, parser) {
// your code here;
});