Pass variable value from one javascript to another - javascript

I have created Master Page EXAMPLE1.Master for my .net web application. Their I am storing value in JavaScript variable. I want to retrieve that variable in another JS File.
EXAMPLE1.Master:-
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var pageAccess = '<%=Session["UserAccess"]%>';
masterPageLoad();
});
</script>
<script language="javascript" type="text/javascript" src="JS/pageActions.js">
</script>
pageAction.js
//Retrieve pageAccess variable here.
Definition of masterPageLoad(); is present in pageAction.js file

declare your pageAccess variable, before $(document).ready(function() {
like
var pageAccess = '<%=Session["UserAccess"]%>';
$(document).ready(function() {
masterPageLoad();
});

Move your variable declaration outside the function
var pageAccess = '<%=Session["UserAccess"]%>';
$(document).ready(function() {
masterPageLoad();
});
This variable should now be visible in any JS file.

It would be preferable if you could do something like this:
$(document).ready(function() {
masterPageLoad('<%=Session["UserAccess"]%>');
});
And then update your pageActions.js accordingly:
function masterPageLoad(pageAccess) {
...
}
But if you need to work with an external variable, the reason it's currently not working is that it's defined within the scope of the DOMReady handler. You should either extract the variable declaration to be outside of the DOMReady handler, or you should create a global variable:
window.pageAccess = '<%=Session["UserAccess"]%>';

Related

Howto use a (global) variable from a module inside jQuery's document ready function?

According to SO question Global javascript variable inside document.ready, I should be able to use global variables inside jQuery's document ready function. How can I do the same when my variable is declared inside a module?
<script type="module">
import settings from './config/settings.js';
var DAPP_VERSION = settings.version;
</script>
<script type="text/javascript">
var OTHER = 4;
</script>
<script type="text/javascript">
$(document).ready(function() {
console.log(OTHER);
console.log(DAPP_VERSION);
});
</script>
The above gives me:
Uncaught ReferenceError: DAPP_VERSION is not defined
config/setting.js contains:
export default {
version: "1.1",
rounds: 3,
cars: 20,
lapLenght: "short"
}
When you use the type="module" declaration the variables are not attached to the global scope automatically but to the module scope (that is different).
You have to attach them explicitely to window in order to avoid ambiguity and make them visible across the whole application.
window.DAPP_VERSION = settings.version;
http://jsfiddle.net/R6FNs/572/

Call variable from another script in HTML

I currently have a HTML file that has one script that is declared as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
code.......
var a = "hello"
});
</script>
I am trying to add another script within the HTML file that will call on this variable "a". Right now, I am doing something like this:
<script type="text/javascript">
alert(a);
</script>
But it is not alerting anything. If I replace a with a string like "hello", I do get alerted. Am I calling the variable wrong? I've tried searching for solutions but all of them say you should be able to easily call variables from another script assuming that script is declared and initialized before. Thanks.
Move the a declaration outside of the function.
E.g.,
var a;
$(document).ready(function() {
code.......
a = "hello"
});
And then later on...
alert(a);
Remember that variables are function-scoped, so if you define it inside of a function, it won't be visible outside of the function.
Update based on comments:
Because you now have a timing issue when trying to interact with the a variable, I would recommend introducing an event-bus (or some other mechanism) to coordinate on timing. Given that you're already using jQuery, you can create a simple bus as follows:
var bus = $({});
bus.on('some-event', function() {});
bus.trigger('some-event', ...);
This actually lends itself to some better code organization, too, since now you really only need the bus to be global, and you can pass data around in events, rather than a bunch of other random variables.
E.g.,
var bus = $({});
$(document).ready(function() {
var a = 'hello';
bus.trigger('some-event', { a: a });
});
And then in your other file:
bus.on('some-event', function(e, data) {
alert(data.a);
});
JSBin example (obviously not spread across multiple files, but the same principles apply).
Replace your code as
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var a="";
$(document).ready(function() {
a = "hello";
});
</script>
Now you can access the variable a as below.
<script type="text/javascript">
alert(a);
</script>
The problem with your code was that, you was declaring the variable a inside $(document).ready() which made it local to the ready().
When you write a inside function block you make it a local variable, you can move variable declaration outside of the function block as other answer say or you can use:
$(document).ready(function() {
window.a = "hello";
});
and later:
alert(a);
In both cases you are declaring a as a global variable and that is not recommended.

method is not defined in Javascript when I use Web Logger for iOS

It's really strange when I try to dump logs to the Web page.
I have basic application (in xcode) with Web plugin that allows me to pull logs from iPhone to web page.
But, somehow, when I try to call method placed in other js file, I get:"method" is not defined.
xcode-Web structure:
Snippets of socket.html:
<script type="text/javascript" src="src/js/script.js"></script>
<script type="text/javascript">
$(document).ready(main);
// Run when document.ready fires
function main() {
$('#btnClear').click(function() {
clearTable();
});
}
....
</script>
The clearTable is method defined in src/js/script.js file and I know its loaded because onLoad method has called.
Snippets of script.js:
$(function() {
....
function onLoad(){
....
}
function clearTable(){
....
}
onLoad();
});
Does someone know the reason?
I coped this project to linux and all work fine. All dependences work good.
Thank you,
It is because of scoping issue, clearTable is defined within an anonymous function so it will be available only within that scope.
You are trying invoke it from another scope where it is not available.
The solution is to define the clearTable in the global scope. ex
$(function() {
// ....
function onLoad() {
// ....
}
window.clearTable = function() {
// ....
}
onLoad();
});
Problem: Fiddle
Solution: Fiddle
Another solution
var clearTable, isAutoScroll; //Declare these as global variables
$(function() {
// ....
function onLoad() {
// ....
}
//note this is a function variable and there is no `var`
clearTable = function() {
// ....
}
//note there is not `var` used while defining the variable
isAutoScroll = false;
onLoad();
});

jquery pass value into function AFTER function?

I am new to javascript & jQuery. I'm trying to create a feature for my site that let's people display badges they have earned on their own site (and I would supply a bit of code they could just copy/paste). I had someone help me with the javascript and I have it working perfectly, but I can't find any jQuery documents that explains it to me?
<script type="text/javascript">
(function(id) {
// include js via php file with the id in as a parameter
})("myid");
</script>
The id is passed in the area labeled "myid", in jQuery can you pass in a static variable this way? When I try to delete ("myid") and change it to var id = 'myid', the function no longer works.
The occurrence of "myid" in the code you are showing is not a static variable. It is a string literal that is being passed as an argument to an anonymous function. The anonymous function is declared and then is immediately getting called.
If you are wondering why the programmer wrote the JavaScript the way they did. The following might help.
Both of the examples below will display "myid" in an alert:
Example 1:
<script type="text/javascript">
var id = 'myid';
alert(id);
</script>
Example 2:
<script type="text/javascript">
(function(id) {
alert(id);
})('myid');
</script>
The first example declares "id" as a variable. It is a global variable and is actually added as a property to the window object. The second example defines an anonymous function and immediately calls it, passing in 'myid' as the value of the "id" parameter. This technique avoids using a global variable.
Of course, you could also avoid the global variable by doing the following:
<script type="text/javascript">
(function() {
var id = 'myid';
alert(id);
})();
</script>
If you stick "myid" in a variable and then pass in that variable, it'll work. Like this:
var memberID = "myid";
(function(id) {
// include js via php file with the id in as a parameter
})(memberID);
If you say this...
(function(id) {
// include js via php file with the id in as a parameter
})(var id = 'myid');
...you're attempting to stick a variable declaration in a function call, which won't work. That's why declaring the variable above and apart from the function call won't throw any errors.

On page I declared a js variable, include js file can't seem to access it?

<script type="text/javascript">
$(document).ready(function () {
var SOME_ID= 234;
});
</script>
<script type="text/javascript" src="<%= HtmlExtension.ScriptFile("~/somefile.js") %>"></script>
The .js file just uses the SOME_ID value, but I'm getting an error saying SOME_ID is not defined.
Shouldn't this work in theory?
You've declared a local variable within the anonymous function. If you want it to be a global variable, use window.SOME_ID = 234; instead, or move it out of the anonymous function.
E.g., either:
<script type="text/javascript">
$(document).ready(function () {
window.SOME_ID= 234;
});
</script>
or
<script type="text/javascript">
var SOME_ID= 234;
$(document).ready(function () {
});
</script>
Either way, the external file can access it as either SOME_ID (unqualified) or window.SOME_ID, because global variables are properties of the global object (which is window on browsers).
You have declared a local variable inside an anonymous function which will be accessible only inside this function. You need to declare it outside:
var SOME_ID = 0;
$(function () {
SOME_ID = 234;
});
Your variable is defined inside the scope of your anonymous function. Move it outside of the ready handler and it ought to work.
This variable is scoped to the Function Expression (FE) passed to the ready method - it will not be available outside this scope.
You need to make the var global if you want other scripts to be able to access it:
var SOME_ID;
$(document).ready(function () {
SOME_ID = 234;
});

Categories