I have an app and different javascript files.
From HTML I want to be able to access var from those different javascript files.
How should I do that??
EXAMPLE JAVASCRIPT:
var one = {
att1: 'myString1',
att2: 'myString2'
...
};
var two = {
att1: 'myString3',
att2: 'myString4',
...
};
EXAMPLE HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="js/idiomas.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery-1.11.0.js"/></script>
......
EDIT:
Sorry, missed one part. This is where I try to access the data:
<script type="text/javascript">
var atrib1 = document.getElementById("idAtr1");
var atrib4 = document.getElementById("idAtr4");
.....
atrib1.innerHTML = one.att1;
atrib4.innerHTML = two.att2;
....
</script>
You have to maintain hierarchy. For example.
<script src="file1.js"></script>
<script src="file2.js"></script>
then you can able to access file1.js variables on file2.js but can't access file2.js on file1.js. Rules is javascript read files sequentially. So, if you try to access function/variables/object before they are available will get error.
Otherwise, If you want to access both files variable, you may try followings:
<script src="file1.js"></script>
<script src="file2.js"></script>
<!-- import your js files that contain those variable -->
<script>
var atrib1 = document.getElementById("idAtr1");
var atrib4 = document.getElementById("idAtr4");
//import your js files above and then call it.
atrib1.innerHTML = one.att1;
atrib4.innerHTML = two.att2;
</script>
If you have still doubt. Mention that on comment. We'll try to help :)
Simply add those js files in your HTML, and access those variables normally.
<!-- Your script containing the variables -->
<script type="text/javascript" charset="utf-8" src="js/idiomas.js"></script>
...
<script type="text/javascript">
console.log(one); // Access the variable normally
</script>
Related
Is it possible to replace library call in HTML by library call in JS ?
For example here, is it possible to delete <script type="text/javascript" src="../node_modules/projet/libs/libraryexample.js"></script> from HTML and call it JS file instead ?
<head>
<title>pagetest</title>
<script type="text/javascript" src="../node_modules/projet/libs/libraryexample.js"></script>
<script lang="javascript" src="./myjs.js"></script>
</head>
and the JS file:
var myObject = new ObjectFromMyLibraryExample();
var myPart = myObject.addText("hello");
I have tried import "libraryexample" but it didn't work and I don't know how to do.
I have this codes
//first.js
var site = {};
//and functions are declared like that
site.functionNames = function(){
//some codes
};
//second.js
$("#element").click(function(){
//more codes
site.function;
site.function();
console.log(site);
});
How can I access/call first.js functions from the second.js click event?
Tryed the ones above but all say site is undefined. Dont know if is the right way.
:Edit:
Files are already declared in order, second.js comes after some others.
<script src="first.js" type="text/javascript"></script>
<script src="second.js" type="text/javascript"></script>
As long you declare the javascript file in order you should be able to use it.
<head>
....
<script src="first.js" type="text/javascript"></script>
<script src="second.js" type="text/javascript"></script>
....
<head>
If you invert the order, wont work
<script src="second.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.
A function cannot be called unless it is in the same or greater scope then the one trying to call it.
You declare function fn1 in first.js, and then in second you can just have fn1();
1.js :
function fn1 (){
alert();
}
2.js :
fn1();
index.html :
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
Source: Calling a javascript function in another js file
The browser is reading script tags in the order they are written, unless async is true. so just place your script tags the way you want and the browser will execute the second one after the first one.
Edit:
Maybe there's an error loading the js file. Check in the browser dev tools.
this is a working example
Test.html
<!DOCTYPE html>
<html class="html" lang="es-ES">
<head>
<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="tfirst.js" type="text/javascript"></script>
<script src="tsecond.js" type="text/javascript"></script>
</head>
<body>
<div class="fieldwrapper" name="field1" id="field1" />
First name: <input type="button" name="first" onclick="site.functionNames('html')"><br>
Last name: <input type="button" name="second" id="other"><br>
</div>
<body>
</html>
tfirst.js
var site = {};
//and functions are declared like that
site.functionNames = function(v){
alert("hello " + v);
};
tsecond.js
$(document).ready(function(){
$("#field1").on('click', '#other', function () {
site.functionNames('second.js');
console.log(site);
});
});
I created my own service for some util methods. The idea was to simply inject the utilsservice into the modules where I need the methods. The Problem is I get an ReferrenceError: myFunction is not defined.
I think it has to do with the wrong injecting of the service, but i can't figute out myself what's wrong with my approach.
The service i made:
angular.module('utils',[]).service('UtilsService',function(){
this.myFunction = function(){};
});
In my app.js file i have following structure:
(function(){
angular.module('utils',[]);
angular.module('translation',[]);
var app = angular.module('myApp',['translation','utils']);
app.controller('myController',['$http',function($http,UtilsService){
UtilsService.myFunction();
}]);
});
The order I included the scripts in my .html file:
<script type="text/javascript" src="../Libraries/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-js/services/utilService.js"></script>
<script type="text/javascript" src="../js/angular-js/app.js"></script>
<script type="text/javascript" src="../js/angular-js/translate.js"></script>
I already tried to change the order but it doesn't make any difference.
I am thankfull for any advice you may have!
Please try the below. You will need to change the script references to point to the files where you have them. Once the index.html file has loaded, you should see the output "you called myFunction()" in the console window. That is being printed from within the service which shows it's being called correctly. I've also created a fiddle
index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Directives</title>
</head>
<body>
<div ng-controller="myController"></div>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="utilsService.js"></script>
</body>
</html>
app.js (I have moved the code out of the function you created since it wasn't working. Also, you had a typo for spelling anguar on the line that begins with var app. I have also removed the dependency for translation in my code since I didn't create any module by that name):
(function(){
//angular.module('utils',[]);
//angular.module('translation',[]);
});
var app = angular.module('myApp',['utils']);
app.controller('myController',['$scope', 'UtilsService',function($scope,UtilsService){
UtilsService.myFunction();
}]);
utilsService.js:
angular.module('utils',[])
.service('UtilsService',function(){
this.myFunction = function(){ console.log ('you called myFunction()')};
});
I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);
So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.
Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
I'm having trouble trying to use a function in a javascript file I've included in another file upon starting up the page.
Within the file design.js I want to do var x = new canvasManager(); And canvasManager is defined in canvasManager.js.
However when I try this I get some 'uncaught type error undefined is not a function'. What gives? Below is the relevant code on my html file that I enter into the browser:
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/kinetic.js"></script>
<script type="text/javascript" src="designManager.js"></script>
<script type="text/javascript" src="canvasManager.js"></script>
<script type="text/javascript" src="gateManager.js"></script>
<script type="text/javascript" src="wireManager.js"></script>
<script type="text/javascript" src="toolbarManager.js"></script>
<script type="text/javascript" src="objectDrawing.js"></script>
<script type="text/javascript" src="util/mouseEventManager.js"></script>
<script type="text/javascript" src="util/hotkeyManager.js"></script>
<script type="text/javascript" src="util/htmlUtils.js"></script>
<script type="text/javascript" src="design.js"></script>
<script type="text/javascript">
$(document).ready(function(){
initializeDesign();
});
</script>
//in design.js...
function initializeDesign() {
var canvasManager = new canvasManager();
}
Thank you for any help.
The name canvasManager in new canvasManager() is referring to the canvasManager in var canvasManager, not the canvasManager that you have defined in other JS file. The declaration of canvasManager in initializeDesign() shadows the other declaration.
Change the name of your variable in:
var canvasManager = new canvasManager();
When you define that local variable, it supercedes the global function with the same name so that new canvasManager() just refers to your local variable not to the global function. Thus, since the value of the local variable is still undefined, you get the error you see.
Change it to:
var theCanvasManager = new canvasManager();
or something like that and it should work fine.
Though I wouldn't recommend this (because I think it's not super readable code and could lead to other accidental errors), you could also do this:
var canvasManager = new window.canvasManager();
Here you are explicitly referring to the globally-scoped function so it's distinct from the local variable.