I'm new to Jade and I'm really strugling with it, I created a simple drag and drop table system, but for some reason I can't use my script file in jade. I have a css and a JS file and I linked both to the jade file, for some reason only the css is connected correctly...
script(src='routes/dragdrop.js' type='text/javascript')
This is the reference to the "dragdrop.js" file, I put it at the end of the body tag. The console log gives me the following:
GET /routes/dragdrop.js 404 20.949 ms - 507
What's possibly wrong here?
If you have your file index.jade located in /sample/views/index.jade and dragdrop.js in /sample/routes/dragdrop.js then if you want to call dragdrop.js from index.jade you should call it in this way script(src='../routes/dragdrop.js' type='text/javascript').
If you'd need to go back two folders you should use ../.. three ../../... and so on.
Related
I'm trying to make a chat application using socket.io and Node.JS. In my html file called index.html, I am trying to use a script tag to point to a script file called bundle.js that contains a browserified set of variables and functions.
The problem is, despite referencing the proper path in my src attribute, the tag seems to include a bundle.js within my localhost:3000.
Oddly enough, when viewing this bundle.js with developer tools, the content seems to be identical to that of my index.html file. This creates a syntax error as the JavaScript file contains html syntax from my html file. Any ideas why this might be?
<script src="bundle.js" type="text/javascript"></script>
This is how the script tag appears in my html file.
This is a link to a screenshot of my developer tools (New here so not enough rep to post the actual pic)
As we can see bundle.js is open in developer tools is Html code, not js that's why error is shown in first line, or there is something wrong in webpack configuration.
In the network tab of the developers tools, my external javascript file is being read as a json file instead even though it is saved as javascript. I am not sure how to go about fixing this.
EDIT:
Don't have enough rep to post images here, but the link to the left shows that my file is saved as a javascript but the file type says json.
EDIT #2:
function hello(){
alert("Hello, World");
}
just trying to use that lil bit of code to try to get the file itself to work.
EDIT #3:
So i changed the src path as mentioned by user onetwo12 said but the file is still getting a 404 error.
Alright, thanks for your guy's help but after looking where the css files were at, it looks like the scripts and anything else I make will be called from the static directory first and then into whatever I call in the src. So i moved the js directory from outside static directory into the static directory and got things working.
One of my html file needs to include a script file, as it often happens, and no matter what I do, the browser doesn't seem to get it.
following this answer: How to include css files into compojure project?
I created a public folder in my resource folder. The structure looks like this:
resources
|-public
|-views
| |-myview.html
|-scripts
|-my.script.js
Inclusion of the file in myview.html looks like this:
<head>
<script src="/scripts/my.script.js"></script>
</head>
When I request myview.html from the server I get it, but all of the types in my.script.js are unknown. The html works as expected when I just load it in the browser (I have to adjust the path to the script file to be relative, of course, and no, that doesn't work either when I request it from my server).
So how do I get my script files (and later css files) to be found by the html in a typical compojure setup?
Turns out I was just missing
(route/resources "/")
in my routing. As that wasn't the problem with the topic I looked at, I didn't figure it out for a while.
Turns out sometimes you should read the code in the question just as carefully as the answer...
I was learning Express/Node/Jade and now in the Jade file I want to include a javascript file from the public folder just for the page.
For example, in jade file I type this:
script(src='/javascripts/test.js')
and inside test.js I have a function
function check_test(){
return "It's working!"
}
then I try to call the function in Jade by
- var test_response = check_test()
than I got the error saying that "undefined is not a function" and test.js isn't load at all.
Apparently Jade doesn't load the file, they only transform into HTML code.
I look someone else's question and this is the closest one I can found but it doesn't provide a clear answer of what to do.
In Jade, how can you call a function in an external Javascript
So my question is: In this case what should I do to make it work?
I don't want to load the file in layout.js since I only want test.js only be use by this page.
Well... In the first instance, it is different what happens in the browser of what happens on the server. So Jade is a rendering of HTML, therefore if you are in the browser. It's what ExpressJS shipping, ie rendering Jade. If you want to call, your HTML Javascript (Rendering of Jade), should show you where the Javascript. For exmaple
in Server.js
// Get the Javascript in the browser
app.use("/javascripts", express.static("./outJavascripts"));
// Get the URL
app.all("/", function(req, res){
// Render the Jade and Send for the client (Browser)
req.render("myTemplate.jade");
});
In myTemplate.jade
script(src='/javascripts/test.js')
In "./outJavascripts/test.js"
function check_test(){
console.log("It's working! :D");
return "It's working!";
}
If you do this, you will realize that it is run, the file "./outJavascripts/test.js" in the browser. And the function "check_test" never run in the server.
Or put all folders in a common folder, for example public
public
-javascripts
-stylesheets
-images
and then expose that public folder
app.use(express.static(path.join(__dirname, 'public')));
which means you can
script(src='/javascripts/script.js')
link(rel='stylesheet', href='/stylesheets/style.css')
Save your JS file and link it in your Jade file as:
script(src="filepath/yourJSfile.js")
Then call the function, I'm using a button here for example:
button(class="btn", onclick='functionName()')
I have a problem with mvc4 application.
I have created a masterpage with "bundleconfig" for css and js file.
so far so good ... everything works, such as "localhost1234:/Admin/Index" I see everything correctly.
The problem is when I go to the page "localhost1234:/Admin/Edit/2" (2 is user id por update) here does not find references in the file main.js
The file main.js is this:
`
head.js("../assets/js/skin-select/jquery.cookie.js");
head.js("../assets/js/skin-select/skin-select.js");
head.js("../assets/js/clock/date.js");
`
In the error console of the browser says that not found the reference:
404 Not Found - localhost:1234/Admin/assets/js/jquery.cookie.js"
jquery.cookie.js
404 Not Found - localhost:1234/Admin/assets/js/bootstrap.js"
Why he put the name of the view (Admin) front the path in the main.js file ???
Can you help me?
Use Url.Content helper to generate the right path from the relative path like this:
head.js('#Url.Content("~/assets/js/skin-select/jquery.cookie.js")');
Currently it is trying to find in the Admin folder assets--> js-->jquery.cookie.js.
After using Url.Content() it will first get the RootDirectory and the address will be like : http://localhost/assests/js/skin-select/jquery.cookie.js