Below is my sample js in which everything is defined inside doDomReady function their are multiple function their.
`
YAHOO.namespace("YAHOO.User");
YAHOO.User = (function() {
Event.onDOMReady(UserData = function() {
.......
function save(){}
..........
});
})();`
From the above js file I want to call the save method from outside(from other js file) like this ->YAHOO.User.save(resultset) but I am not able to call it since it is not visible.
Anyone tell me how to call the functions in above case.
window.save == function(resultset){ ... }
This puts it in the global scope, so you could just call save() from another script. To namespace it under YAHOO.User, I suppose it would be:
window.YAHOO.User.save = function(resultset){ ... }
... then you can call YAHOO.User.save(resultset) from outside.
Related
I have javascript file called screener.js
function ScreenerPage() {
function onScreenListChange() {
do stuff
};
}
from the index.html file I include the javascript file like this:
<script type="text/javascript" src="./js/screener.js"></script>
Then later in the head section of index.html I instantiate the screenerPage object like this:
<script type="text/javascript">
$(document).ready(function () {
screenerPage = new ScreenerPage();
}
</script>
Then down in the body section there is a select with onchange event that calls
<select id="screenList" onchange="screenerPage.onScreenListChange()">
but the browser shows error:
Uncaught TypeError: screenerPage.onScreenListChange is not a function
What am I doing wrong?
The way javascript works is it has objects and the way of which they are created matter!
Here is the way i've found that works for this kind of thing
screener.js
var ScreenerPage = function() {
this.onScreenListChange = function() {
//do stuff
console.log("test")
}
}
Later on
var a = new ScreenerPage();
a.onScreenListChange();
if you have any questions on how it works feel free to try to message me!
The reason it does not work is that you're having a scope issue.
The function ScreenerPage is defined in the global scope, meaning it is accessible anywhere. Now inside that function you define a local function called onScreenListChange.
You are able to do that, but that function only exists within the scope of the function you defined it in.
When I look at your function, I think you want to use classes. A class is a single name that can have multiple variables / methods to do a specific task.
class ScreenerPage {
constructor(text){
this.onScreenListChange(text) // Call this "method" on object creation.
}
onScreenListChange(text) {
console.log(text ? text : 'do stuff');
};
}
var a = new ScreenerPage('hi'); // now watch your console log.
a.onScreenListChange();
I have a really simple function:
function loading (text, id) {
console.log("test");
$('#loadingsts').append('<div id="loader"></div>');
}
that is defined in a javascript file which is loaded with the html via:
<script src="js/loader.js"></script>.
I want to execute that function in another js file so I need to have the function be global, right?
If I execute is like this, the console.log() works but the but the append doesn't. If I put the function into a $(function() {}); it says loading() not defined.
I also don't want the function to be executed on loading but only when called.
How can i make it work.
I looked at these questions already but they didn't help
Question1
Question2
Question3
A method created outside any other method is global by nature. If you are creating a method inside another method, you can make it global by attaching it to the window object if you like, or another object that is global itself, in which case you'd have to access it by thatObject.yourMethod()
var objectOutsideAnyMethod = {};
(function(){
function ImNotGlobal(){}
window.IAmGlobal = function() {};
objectOutsideAnyMethod.meToo = function(){};
})();
IAmGlobal(); //valid
objectOutsideAnyMethod.meToo(); //valid
ImNotGlobal(); //error
I current have some code that looks like this:
// when the document is ready
execute myFunction();
(function($){
function myFunction()
{
// code
};
})(jQuery);
The console is saying that myFunction is not defined...why?
It's not accessible because you've put your function inside another self-invoking function, and the call to it is outside that.
Your comment states that you want the call to myFunction() to happen on load, which if your current code worked, would not be the case anyway. It would call the function before DOMReady.
To get the behaviour you want, place the function call within the SIF:
(function($){
myFunction();
function myFunction() {
// code
};
})(jQuery);
I have the external js file which has more functions.
I need to call these functions from angular controller.
For example: external.js
...
...
function fun() {
...
...
}
...
...
Controller: acccountController.js
myApp.controller('AddAccountController',function ($scope,AddAccountLoginServices,$location,localStorageService,$compile,toaster){
....
....
$scope.getLoginForm = function(siteId,name) {
...
...
fun(); // This function from external.js file
});
...
...
});
I have imported external.js before the acccountController.js. But it doesnt calling that function. And also i have not get any console error for this.
How to achieve this... Thanks in advance.
EDIT: gave wrong answer, my bad. the following example works.
your external file should like this:
var doSomething = (function () {
"use strict";
return {
test: (function () {
return 'test';
}()),
test2: (function () {
return console.log('test 2');
})
};
}());
and in your controller you call your scripts function:
console.log(doSomething.test);
or
doSomething.test2();
i learned something too, thanks ;)
As mentioned by #nilsK, you define a self invoking function. And then reference to it via window object. For example -
(function functionName(){
Do Something Here...
})();
And then,
window.functionName();
And if your are using AngularJS,
$window.functionName();
I have similar situation and I did not have to make it self invoking function. Including the external js file into the html and it worked fine.
Where is you call $scope.getLoginForm()?. I think you never call it. So fun() is not called, so you not see any thing. You need call $scope.getLoginForm(). Two way to call
In HTML <button ng-click="getLoginForm()"></button>
Or in Javascript $scope.getLoginForm()
Good luck !
You need to create a global instance of the function.
Add a line:
var abc= new funcName();
at the end of the File and you can use this line (var abc= new funcName();) in your controller to invoke any methods from this file by using abc.methodName.
I am using a plugin JS and need to call a function in it.
It is having functions inside a variable like,
var win = window;
var Page = function(pageOptions, callback) {
function abc(){
--------
}
function xyz(){
------
}
};
win.Sales = {
Page: Page
};
Now, I need to call a function abc(). How can I call it.
Already tried with win.Sales.page.abc();.
Please help me out on this. Thanks in advance.
You cannot do that with your configuration because the functions are local or private.
You should make them accessible globally like:
var Page = function(...) {
...
};
Page.abc = function() {
...
};
That way, abc is a property of Page, and you can then access it like Page.abc and execute it like Page.abc(). Functions are basically also objects so they can have properties too.
You cant call function abc since it is declared as a private member of the function referenced by variable Page.
If you want to call the function You have to make it as a property of the variable Page.
var Page = function(){
.........
.........
.........
}
Page.abc = function(){
}
But there is another problem of variable scoping like if there is another variable x defined in function Page and used inside function abc, it will not work.
Anyway since you've said it is a js plugin I do not think it will be possible for you to change the function Page. So the answer will be No you cannot do that.