I have a javascript code and want to extend this code now. how can I write a makeAMessenger function in global scope so that it triggers when user clicks document and alert below message
THIS. IS. SPART.
currently I have following code.
CODE HERE
Do you mean this ?
function makeAMessenger(madness, sparta) {
return madness.bind(sparta);
}
have a solution here and you don't need to pass variable along, it can be accessed in function.
function makeAMessenger(madness) {
return madness;
}
You can use Function#apply() or Function#call() to bind this.
http://jsfiddle.net/QfNbp/
Related
Can someone explain to me why this doesn't work and show me how to make it work? I've tried creating a namespace and IIFEs functions but I cannot seem to get it.
$(document).ready(function() {
alert (hi);
});
$(document).ready(function() {
var hi = "hello"
});
Thank You!
When you do this:
$(document).ready(function() {
var hi = "hello"
});
You are creating a variable named hi that is local to that callback function. It is simply not accessible outside that function. This is a feature of the language.
You can declare the variable at a higher scope like this:
var hi;
$(document).ready(function() {
hi = "hello"
});
And, then the value of that variable will be available outside the scope, but you will not necessarily know when it gets the proper value because you won't know when the $(document).ready() callback is called unless you put your code inside that callback.
It really makes little sense to try to share a variable between two calls to $(document).ready(). It would make much more sense to just put the code inside the same $(document).ready() callback:
$(document).ready(function() {
var hi = "hello"
alert (hi);
});
Not Really Recommended
If you were going to try to share a variable between two calls to $(document).ready() (something I don't really recommend because it makes your code somewhat fragile), it can be done. Callbacks to $(document).ready() will be called in the order they are attached so you will have to order things appropriately:
var hi;
$(document).ready(function() {
hi = "hello"
});
$(document).ready(function() {
alert (hi);
});
This will make sure that the first $(document).ready() callback that sets the value of hi will be called first before the second one where you try to use the value.
So, I've got my app to work. But I don't want to use a global variable.
Here's what I'm trying to do:
var AMLid;
$(".commentButton").on('click', function () {
AMLid = $(this).closest('tr').siblings().find('p.important').text();
alert("id is:" + AMLid);
});
$(".saveButton").on("click", function () {
$(".modal-body #txtAddComment").val(AMLid);
});
I want to get an ID from a selected table row, and pass the ID to the modal dialog, so I then can use the ID as a parameter when clicking a button in the modal dialog.
How do I do the exact same thing, without using a global variable? is it possible?
And what are the cons of using a global variable like this? Does it crash or target the wrong ID's if many people use it simultaneously?
Any help is appreciated.
You can wrap the whole thing in a function
(function(){
var AMLid;
$(".commentButton").on('click', function () {
AMLid = $(this).closest('tr').siblings().find('p.important').text();
alert("id is:" + AMLid);
});
$(".saveButton").on("click", function () {
$(".modal-body #txtAddComment").val(AMLid);
});
})();
You can avoid the use of a global variable by using an Immediately-Invoked Functon Expression, which would look like this:
(function() {
var AMLid;
$(".commentButton").on('click', function () {
AMLid = $(this).closest('tr').siblings().find('p.important').text();
alert("id is:" + AMLid);
});
$(".saveButton").on("click", function () {
$(".modal-body #txtAddComment").val(AMLid);
});
})();
This works because the AMLid is now private to the function; when the function is executed it creates a new execution context which includes that variable, which is then accessible to statements made in the function, but not outside it. And because this creates a closure the variable continues to be accessible by the callbacks attached to those functions. Moreover, as the function is anonymous it itself doesn't have a name polluting the namespace.
The term Immediately-Invoked Functon Expression comes from Ben Alman, and you can read his original blog post discussing the concept here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
Some cons of using a global include: hard to keep track of variables, other scripts might mess with its value (when they probably shouldn't have access to it), harder to maintain, less clean code. Your worry about it being overwritten if multiple people use it won't be an issue because it's client-side and so there will be one instance per page loaded in any given browser.
Javascript is client-side so actually I can't get the point in your "many people use it simultaneously". One browser for user, so you don't have to worry about multiple client. Each one use his own set of global variable.
If your executions are not linked in any way (they are "onclick") you can just wrap them in a function so you're actually setting a "local/global" variable.
Every function that'll need that AMLid has to be declared inside that function scope.
The only way to keep variables out of the global scope is by wrapping them in a function. If this is all the code you're using in this particular module, it doesn't really make a difference.
How can I alter the code I have to accomplish to goal of referencing the original event (or properties/methods of it) in the subsequent code.
tViz.addEventListener(tableauSoftware.TableauEventName.MARKS_SELECTION, onMarksSelection);
function onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(showMarksHelp);
}
function showMarksHelp(marks){
I want to access a method from the marksEvent variable but here I can only access
the marks variable from getMarksAsync(). I need it here because stuff will also be
based on the marks variable contained here.
}
I feel like I could restructure my JS to accomplish this or pass something in somewhere, but after reading about Promises and the Tableau documentation I'm still lost. I don't want to use any global variables.
EDIT
So I changed my code to the below:
function onMarksSelection(marksEvent) {
var marks = marksEvent.getMarksAsync().then(function(marks){
showMarksHelp(marks,marksEvent)
});
}
function showMarksHelp(marks,marksEvent){}
Is this a/the correct method to accomplish what I did? I just made it up but it seems like it works.
Using an anonymous function, you can capture the value of marksEvent and then call showMarksHelp with two arguments.
function onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(function(marks) {
// marksEvent is accessible in here
showMarksHelp(marksEvent, marks);
});
}
function showMarksHelp(marksEvent, marks) {
// content of showMarksHelp here
}
$(document).on({ready : iniciarjquery});
var validaciondeZona = true;
function iniciarjquery(){
$('#AgregarDestinoTuristico').on('keyup', '#Zona2', function(e) {
alert(validaciondeZona); // undifined
});
}
Please help me, I need to use the validaciondeZona boolean variable as a global variable, but I define the variable outside the function iniciarquery and try to use the variable within the function and global and everything works fine throws me the value assigned outside the function iniciarquery.
But the problem is when I want to use a function within an event happens anonymous when I try to use the variable and the value undifined throws me.
I already tried with:
window.validaciondeZona,
also with window ['validaciondeZona'],
also with root ['validaciondeZona']
and also with this.validaciondeZona.
Please help, how I can I use that global variable inside that anonymous function and modify, please
$(document).on({ready : iniciarjquery});
var validaciondeZona = true;
function iniciarjquery(){
alert(validaciondeZona); // true
}
I tried it with:
$(document).ready(iniciarjquery);
And it is exactly the same. I do not know what else can be done.
This doesn't seem to work :
$(document).on({ready : iniciarjquery});
FIDDLE
change to
$(document).ready(iniciarjquery);
FIDDLE
I have a function that looks like this:
function outer() {
function inner_1() {
alert('inner_1');
}
function inner_2() {
alert('inner_2');
}
function inner_3() {
alert('inner_3');
}
inner_1();
inner_2();
inner_3();
}
I need to call outer(), but I want to replace inner_1() with another function.
I have tried this:
new_outer = outer;
new_outer.inner_1 = function() {
alert('my new inner function');
};
If I try to call the newly redefined inner_1 like this:
new_outer.inner_1();
it works as expected ('my new inner function' is alerted).
But if I try to call the outer function:
new_outer();
the old version of inner_1 is called.
I want to redefine inner_1 and the call outer. How can I achieve this?
This seems like a really bad idea so I am not going to post any code. However, if you are pursuing the answer for "educational purposes only", I will just hint that although you cannot easily redefine a function from outside its scope (as per your example), there is nothing stopping you from redefining a function attached to a function object.
I do think, however, there is a better solution to whatever the problem you are trying to solve is.