I'm new to Javascript,
When I have these two files in one directory in Desktop, It works fine,
But when i put them in the Web Server Directory /var/www/html it doesn't work
I know JS is a client side thing, but if we are building a website these .js files will be in some web server directory and should work while they are placed there
I use apache 2.4 on ubuntu 20.4
Javascript.js code :
/*global document, console */
var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
console.log(myid.value);
mydiv.innerHTML = myid.value;
}
.html code:
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script src="javascript.js">
</script>
</body>
</html>
Let's assume this is your public_html directory /var/www/html and for better code organization create a directory for javascript files as js You can do this for CSS, images and so on. So Your public directory become like this
public_html
js
myjscodehere.js // copy your javascript code to this file.
css
images
index.html
As for the index.html. Set a directory path to your javascript file.
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script type="text/javascript" src="/js/myjscodehere.js"></script>
</body>
</html>
Your javascript files will work on client-side upon sending a get request to your web-server using Chrome, Mozilla and on
Separation of js code gives you many benefits such as caching to your js files and better organization if you are building a larger project it will be a problem to update your code so it is better of putting your js files into dir but it does not mean that you can not run your javascript script code inline. Yes, you can do it as following.
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script type="text/javascript">
var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
console.log(myid.value);
mydiv.innerHTML = myid.value;
}
</script>
</body>
</html>
And since javascript code runs on the client-side. You can run it in your windows machine using a web browser and you do not need web-server. The purpose of pushing your js file or the whole project to the web-server is that your clients or people who visit your web site to use your online app in their local machines.
At http://emberjs.com/ I am try to get the auto-updating and handlebars templates example working, it is the first one. When I run it, my html page look like:
Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!
It is just plain text, it is not like how it looks on the ember website.
This means I am not loading my javascript files right? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>EmberDemo</title>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/handlebars-1.1.2.js" type="text/javascript"></script>
<script src="./js/ember-1.5.1.js" type="text/javascript"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</body>
</html>
Here is my path in Eclipse for where my javascript files live. /EmberQuickstart/src/main/webapp/js/
My path for my index.html is /EmberQuickstart/src/main/webapp/index.html
Can anybody tell me what is wrong? I am really stumped. I should not need a webserver and a war file to get javascript to work right?
Update
Malik I changed my paths to what you said and I appear to be on the right track, but it is still not working.
Here is my console output in Chrome's developer tools:
DEBUG: ------------------------------- ember-1.5.1.js:3521
DEBUG: Ember : 1.5.1 ember-1.5.1.js:3521
DEBUG: Handlebars : 1.1.2 ember-1.5.1.js:3521
DEBUG: jQuery : 1.10.2 ember-1.5.1.js:3521
DEBUG: ------------------------------- ember-1.5.1.js:3521
Ember Debugger Active
Remove the ./ part in your src="".
You should write it as:
src="js/jQuery "
I figured it out. I am 100% new to handlebars and ember so I did not realize that I need a tag to surround my topmost . Now it works!
I recommend to use Ember-Cli to start is easy and super complete Ember-Cli
Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.
Here's my tree:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.js
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
$scope.title = "Home";
});
home.html
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
When i go on the home.html page, my header, nav and footer are not appearing.
You're doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by #DRiFTy.
Change
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
to
<div ng-include src="'partials/structure/header.html'"></div>
<div ng-include src="'partials/structure/navigation.html'"></div>
<div id="view" ng-view></div>
<div ng-include src="'partials/structure/footer.html'"></div>
If this is not working, check the browser console if there are any 404's
I had a similar problem with a simple ng-include not rendering:
<div ng-include="views/footer.html"></div>
I wrapped the file path in single quotes and it now renders:
<div ng-include="'views/footer.html'"></div>
i had a similar problem that landed me here.
ng-include was not populating the contents of my partial, but there were no console errors, nor 404's.
then i realized what i did.
fix for me: make sure you have ng-app outside of the ng-include! so obvious. the price of being an Angular noob.
I also came across this issue. And this is what worked for me.
So instead of writing this:<div ng-include="'html/form.htm'"></div>
You want to add ng-app="". So it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>
I was struggling with the same issue and have done almost all what was advised in different stacks but it didn't work for me. On Console, I was getting the Error:
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.
Please be careful of the above error message. Chances are you are not using a local web server to run you website.
I just figured this one out!
For me, I was using a CDN for importing my angular.min.js file that apparently wasn't working. I switched to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
and included ng-app="" in my body tag:
<body ng-app="">
<div ng-include="'testfile.html'"></div>
and it's working fine now. Cheers!
Yes, without the '', ng would try to evaluate the contents inside the ng-include("")
This evaluation is another reason why you don't put {{}} inside these directives.
ng-include is not working in chrome as well as in explorer but works in Firefox, so this could be compatibility issues. To be sure, try generating the report in Firefox or Edge or another browser.
I Too had similar issue: Silly mistake was causing IT , I had below textArea
EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
Wasn't closed properly Corrected below :
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" ></textarea>
<div ng-switch="vm.frmDOA.isGenerateDebitNote">
<ng-include src="vm.showupload()"></ng-include>
</div>
Thought to post it may help any one I digged hours to solve ....
the ng-include file works for files fetched from the web server only (needs something like http://mywebsite/myinclude.html link).
It does not work if you fetch file from local folder directly (c:\myinclude.html will not work)
The ng-include directive should just work normal if you're viewing your file via some server (localhost or online) and NOT viewing your file directly under file system like (file:///yourpath/index.html).
This example from w3schools should work fine.
Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>
I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)