I'm working in a Node.js app and I'm having trouble with a specific html page. All the pages I've done to this point are simply html and css, but in this case I have a multistep page that runs a script to move through the steps (showing diferent forms). In my case it won't load this script so the page doesn't work at all. The get request looks like this:
router.get("/reservaAula", eToken, (req, res) => {
jwt.verify(req.token, keyDocente, (err, data) => {
if (err) {
res.sendStatus(404);
} else {
res.render("reservaAula.html");
}
});
});
And the page is (the important part):
<!DOCTYPE html>
<html lang="en" id = "html">
<head>
<title>Reserva de Aula</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/script.js"></script>
<script src="js/reservarAula.js"></script>
</head>
<body>
...
I've placed the script in the public folder, just like I placed my css, but no matter what I try it won't work. In the rest of the pages loads the other scripts in js folder correctly (like reservarAula.js), but not with script.js.
CSS and JS should be in the static folder and in your sub-folder. It should then work.
Example file location
/static/css/stylesheet.css
How to refer to it
/css/stylesheet.css
(You can do the same with JS)
Related
I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.
I am working on an express js project. I configured a webhook and I am receiving it's post request on my index.js file. Now what I want is to update the index view with the received payload. I have tried res.render and even tried to redirect to another test view but it didn't work.
Is there a way to do it? Or do I have to store it to db and retrieve it again?
Any help would be appreciated.
Here is a snippet from my index.js file
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { message: 'Testing-initial'});
});
//capture webhooks
router.post('/', function (req, res) {
msgText = req.body.messages[0].text;
console.log('meg received from channel' + msgText);
res.render('index', { message: msgText });
});
following is my layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>...</title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="alt-menu sidebar-noneoverflow">
{{{body}}}
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function () {
App.init();
});
</script>
<script src="assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/js/apps/mailbox-chat.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
</html>
I guess I don't have issues with it as I can GET the home with the text Testing-initial injected into it.
One last note: I have tried earlier to achieve this through WebSockets and it worked but I faced another issue which is missing payloads that come while there is no socket connection. Therefore, I am trying to do it without socket.io
I have reached the final point with one error remaining to construct a sample dashboard with charts using dc.js. I have encountered an error.
Unexpected token < on line 1 for loadash.js.
loadash.js is valid but for somehow Chrome shows it in my root app directory next to index.html and has the exact copy of the source content as my index.html. In other words, my loadash, has html content in it. I am running this app inside AngularJS.
What is going on here, and how do I fix this?
Script Tags at bottom of index.html above closing body tag
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/js/universe/src/lodash.js"></script>
<script src="/app/app.js"></script>
index.html Snippet
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
Actual correct loadash.js file
Non actual loadash.js file showing up in Chrome (contents are the html of my home page and AngularJS url is localhost/loadash#!/main, why is this loadash in my url???)
Replacing './lodash' with './app/js/universe/src/loadash' so that I use absolute paths instead of "relative" path since AngularJS thinks ./loadash is /loadash#! for some reason I don't know why.
Top of universe.js file
'use strict'
var module;
var _ = require(['./app/js/universe/src/lodash'], function(module){
});
and commenting out <script src="/app/js/universe/src/lodash.js"></script>
like so
at the bottom of index.html
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<!--script src="/app/js/universe/src/lodash.js"></script-->
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/app.js"></script>
Eliminated all errors present!
I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)
In Play Framework, it's usually have main.html with code like:
<html>
<head>
<title>#{get 'title' /}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen"
href="#{'/public/stylesheets/main.css'}" />
<link rel="shortcut icon" type="image/png"
href="#{'/public/images/favicon.png'}" />
</head>
<body>
#{doLayout /}
</body>
</html>
So when I have a view such as index.html, it's usually start with
#{extends 'main.html' /}
And the index.html only contain the body part ( #{doLayout /} in main.html ).
I want to add javascript depend on page loaded (in page coffee.html I want to load water.js for example). Now I have to add it in main.html and loaded it all over the application.
1/ How can it be loaded from extended view (index.html)?
2/ In addition, how can I get the baseUrl value (like Zend framework) to pass to javascript variable?
You can do this with set and get tags.
If your main.html is like this
<title>#{get 'title' /}</title>
#{get 'moreScripts' /}
Then in your different views you can set different JS. For example, index.html may have no JS, but coffee.html will have
#{set 'moreScripts'}
<script src="#{'/public/javascripts/yourscript.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}