Call function from variable in another js file - javascript

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);
});
});

Related

How do I load a selectable javascript in html header

I'm looking for a way to select and load a javascript from the html file arguments. The html file is called as follows:
OSM_Map.html?year=2017 or OSM_Map.html?year=2018
In the OSM_Map.html file there is the following code in the header:
<head>
.....
<script language="JavaScript" type="text/javascript" src="LatLonDB_2017.js"></script>
<script language="JavaScript" type="text/javascript" src="LatLonDB_2018.js"></script>
....
</head>
There is no problem to get the year argument from the argument list, but how can I load depending on the year argument just one of these .js files?
As somebody said, "yes, you can":
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js"></script>
<script>
var myparameter = new URL(location.href).searchParams.get("year");
loadjs( "LatLonDB_" + myparameter +".js" );
</script>
</head>
<body>
<h1>Titulo</h1>
</body>
</html>
Been the URL something like: http://test.html?year=2018
BUT! not sure if this will work in every browser.... the "searchParams" is not universally compatible.
Thanks to #spencer.sm in this question How to get the value from the GET parameters?
and of course, loadJS function.
The LatLonDB_xxxx.js script still doesn't load. I'm not sure why not. Cannot you load a .js file from another directory than where the .html file is? Otherwise the load may be too late. Scripts following the LatLonDB_xxxx.js script use this DB.
The original code is like this:
<html>
<head>
...
<script language="JavaScript" type="text/javascript" src="../DataBases/LatLonDB_20xx.js"></script>
<script language="JavaScript" type="text/javascript" src="../DataBases/LatLonDB_utils.js"></script>
<script language="JavaScript" type="text/javascript" ...more scripts using the LatLonDB_20xx.js></script>
...
</head>
...
</html>
The intention is to replace the 20xx by the correct year: 2000, 2001, etc. There is no problem to get the correct year from the query parameters.

JavaScript : Issue in Function being called from one Js file to another

I am working with ASP.net and JQuery.
In one Aspx page i have many Js pages included.
Now i added one more Js file(say page1.js) and i was calling a function from page1.js to another js file(page2.js) which was also included in the same Aspx page.
When i tried calling the method(Page1Func) from page2.js i was getting undefined error message.
ASPX Page:
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page1.js") %>" type="text/javascript"></script>
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page2.js") %>" type="text/javascript"></script>
Page1.js
function page1Func(){
//Some code
}
Page2.js
function page2Func(){
//Some code
page1Func(); // giving undefined error message
}
so i did this:
function page2Func(){
var someFunc = Page1Func; //it worked
someFunc();
}
And it worked.I'm not sure why this message was coming.i have also tried to change the order to include of Js file in ASPX page.
it would be great if someone can help me in explaining this behavior.
P.S : I have checked on internet and didn't get the proper answer for it.
Thanks.
The function could be called as if it was in the same JS File as long as the file containing the definition of the function has being loaded before the first use of the function.
I.e.
File1.js
function alertNumber(number) {
alert(number);
}
File2.js
function alertOne() {
alertNumber("one");
}
HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
If your code is something like this then there is no chance of giving undefined at all
Here is Plunker implementation

Caman was used before it was defined

In my HTML I have the following scripts in the header:
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="js/caman.full.js"></script>
and in my Javascript file (scripts.js) I tried to do the following code snippet:
Caman("#myImage", function () {
this.brightness(5);
}
As the title says, I get the error Caman was used before it was defined. I'm not sure if there's something obvious that I'm missing or doing incorrectly, but any advice would be appreciated.
The Caman script needs to be included first like this:
<script type="text/javascript" src="js/caman.full.js"></script>
<script type="text/javascript" src="scripts.js"></script>
Then in your script you are missing the last );:
Caman("#myImage", function () {
this.brightness(5);
});
If that doesn't work there may be something else in your code that is causing problems.

Properly use custom angularjs service, function not defined error

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()')};
});

how to refer the jquery function from the aspx page?

I have the j-query function test() in (chart.js) another solution file which is added the reference of main projects. Now i want to call the test() method from default.aspx page.
This is my code.
chart.js
function test(){
//for Example
}
default.aspx
<script>
test(); //call chart.js function
</script>
If i call the test method() from default.aspx page it is "undfined". how to call the j-query method which is located in another solution file but the same is added reference to the main project. Anyone could help on this..
Thanks,
Bharathi
you should put reference to tht perticular js file at starting of the page like below :-
<script type="text/javascript" src="chart.js" />
<script>
test(); //call chart.js function
</script>
Try this
<script type="text/javascript" src="chart.js">
$(document).ready(function()
{
test();
});
</script>
It seems like you are using a JS.page and that you are trying to call it with a script.
If you want to have your chart.js called into the default.aspx page do it like this.
<script src="assets/chart.js"></script>
place this in the head sections
In the head section of your aspx page add this:
<script type="text/javascript" src="chart.js" />//add reference of the chart.js file
<script type="text/javascript" language="javascript">
test(); //call chart.js function
</script>
You have to add that js file (chart.js) before your script block, may be in head tags of page. like following
<script type="text/javascript" src="chart.js" />
and Make sure your jQuery file is added even before it. so it should be like following
<script type="text/javascript" src="jQuery.js" />
<script type="text/javascript" src="chart.js" />
<script type="text/javascript">
test(); //call chart.js function
</script>

Categories