All I have in the public folder, index.html file of my rails is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="jstester.js">
</script>
</body>
</html>
and all I have in the assets->javascripts folder is that I added a jstester.js file in it and all it has for now is just one line of code:
alert("fffsdfasdsad");
Everything else is just coming from the Rails defaults.
Now when I run the rails server, should I see a message box? Because I don't see anything.
What is missing?
Assets served via the asset pipeline always come from /assets. The path to a JavaScript file served from the asset pipeline is /assets/<file>.js, not just <file>.js. Fix your src attribute:
<script src="/assets/jstester.js"></script>
Related
So, below is a snippet of code that I have in my application.html.erb file.
<doctype></doctype>
<html>
<head>
<title>Test Title</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
The Issue: For some reason rails is taking this code and adding it to the body. (see below) When, if i'm not mistaken, it should create the html based off of this code. I've never run into this problem before with rails, and can't seem to find a solution. It's not turbolinks or anything else i've been working with. What could the issue be?
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<doctype></doctype>
<title>Test Title</title>
<h1>Hello</h1>
</body>
</html>
P.S. This is not my original code, i've broken it down to the bare minimum to show you what the problem i'm running into is.
the doctype looks off. try:
<!DOCTYPE html>
<html>
<head>
head tags
</head>
<body>
body tags
</body>
</html>
with no closing tag for the doctype
I am point the href of css link to a php script. Works good in all browser. When i try the same in iOs its not working.
If I put the manual entry instead of programtic entry it works.
The source that works
<html>
<head>
<link rel="stylesheet" href="http://localhost/assets?action=writeCss&cssId=38">
</head>
<body>
</body>
</html>
The source that not works
<html>
<head>
<link rel="stylesheet" href="http://localhost/assets?action=writeCss&cssId=<?php echo "38"; ?>">
</head>
<body>
</body>
</html>
Thanks in Advance.
Are you trying to use PHP in a UIWebView? I think you can't run PHP on the iOS, PHP runs on the server and not on the browser.
Read this and this.
When trying to insert a html file for a webcomponent into the views directory in my application library, the web_ui compiler throws the message
FileIOException: Cannot retrieve full path for file 'lib\src\view\entity\base\packages' (OS Error: The system cannot find the file specified.
Is this to be expected? If not, what should I do to fix the error?
Since I don't see your code or project, this is just a hunch. I believe your web component HTML file imports some components the wrong way.
Try the follow this structure:
/lib/src/view/foo/foo.html
/lib/src/view/foo/foo.dart
/lib/src/view/bar/bar.html
/lib/src/view/bar/bar.dart
And inside foo.html:
<!DOCTYPE html>
<html>
<head>
<link rel="components" href="../bar/bar.html" />
</head>
<body>
<element name="x-foo" constructor="FooComponent" extends="div">
<template>
...
</template>
<script type="application/dart" src="foo.dart"></script>
</element>
</body>
</html>
Note that I'm not using packages in foo.html.
I have few questions on partials and overriding templates.
For that i used the following folder structure.
projectRoot
dust-core-0.6.0.min.js
jquery.js
test.html
partial.tl
main_without_override.tl
The content of partial.tl:
{+greeting} Hola {/greeting}
{+world} World {/world}
The content of main_without_override.tl:
{>partial/}
The content of test.html:
<!DOCTYPE html>
<html>
<head>
<script src="dust-core-0.6.0.min.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$.get('main_without_override.tl', function(){
console.log(arguments);
})
</script>
</html>
In the index.html when i try to get the main_without_override.tl its saying 404. But im sure that the file is there. The path that firebug is showing is correct.But browser says 404.
I want to know
How to get this main_without_override.tl
Apply templating for main_without_override.tl and render in the browser.
I searched in google most of the examples give only the syntax. Can somebody help me in rendering the main_without_override.tl template.
In order to compile templates on the client (which is probably not a really good idea), you need to include dust-full instead of dust-core. This is because dust-core does not include the Dust compiler.
The reason that compiling templates on the client is probably not a good idea is that Dust compiles to JavaScript and as #monshi mentioned, you can compile the templates and then serve them as JavaScript. It is possible to get .tl files through AJAX if you include dust-full, but it is a better idea to compile that template beforehand and then make a dynamic request for that .js file when you need.
You can include your dust template as a JavaScript file by using <script> tag, but you need to compile it first, which is explained here
Then add following templates (scripts) to test.html:
<script type="text/javascript" src="partial.js"></script>
<script type="text/javascript" src="main_without_override.js"></script>
And in you JavaScript render the template by dust.render method:
dust.render('main_without_override', your_json_object, function(err, out){
your_dom_element.innerHTML = out;
});
Related question:
how to use dustjs-linkedin as client side templating?
Through my journey of dart, I stumbled upon a "blocker" in terms of loading a component.
While having my component defined as followed:
<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
<template>
<button type="button" class="btn {{classes}}"> {{text}} </button>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
String classes = '';
String text = '';
class FooComponent extends WebComponent {
}
</script>
</element>
and referencing the component as followed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
<link rel="components" href='foo.html'>
</head>
<body>
<h1>example</h1>
<p>Hello world from Dart!</p>
<x-foo></x-foo>
<script type="application/dart">void main() { }</script>
<script type="text/javascript" src="dart.js"></script>
</body>
</html>
and my build script not creating a html file (output folder: foo.html.dart), I'm not sure to which file I have to reference.
The manual is also not declarative enough to solve my issue:
http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components
Referencing to either the definition of the component (foo.html) or it's generated output (foo.html.dart) is not working. I've also double checked the paths of both files through inspection, which just downloaded both files with chromium.
My concluding question:
Is this reference (link element href) pointing to an internal intelligence or to a "physical" available file at runtime? And if secondly, which one (generated (html/dart) or source)?
To avoid misunderstandings, I've added a list of my repo:
foo
packages
examples
assets
dart.js
example.html
web
out
foo.html.dart
foo.html
build.dart
Component file (foo.html) is missing the <html><body>...</body></html> tags:
<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>
Both files (examples.html and foo.html) must be in the same base directory:
web
examples.html
foo.html
...
Then, examples.html need be used as argument inside build.dart:
build(new Options().arguments, ['web/example.html']);
And, finally, foo.html (that is, web/foo.html) must be the one to be linked:
<link rel="components" href='foo.html'>
The way you have it in your main HTML file is correct. You reference foo.html because the referencing HTML document needs to be compiled with dwc. dwc will take the main HTML file and compile it and all the the components it includes. The component are completely compiled to Dart and they .html files won't be used anymore.
If you're trying to edit example.html to include your component, you'll need to compile example.html, and not foo.html. You'll still generate foo.html.dart, but also example.html.dart and a bootstrap script to load everything up.