Passing parameters to event handler in jquery [duplicate] - javascript

This question already has answers here:
Javascript event handler with parameters
(9 answers)
Closed 7 years ago.
I need to send parameters to the on change event of a dropdown which is generated on runtime. How can i accomplish such thing like:
$(options.host_element).find('select').on('change',(graph_widget.draw_graph).bind(options));
options is the parameter i want to send to the function draw_graph, the function is linked but not the parameters

Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:
$(options.host_element).find('select').on('change',function(){
graph_widget.draw_graph(options);
});
Bind is used to change the value of this that will be used in the function, not quite what you're looking for.
I made a small fiddle to demonstrate:
Fiddle

jQuery.on has an optional parameter called data:
$(options.host_element).find('select').on('change', options, graph_widget.draw_graph);
Later in your event handler, you may access data using e.data:
function draw_graph(e) {
var options = e.data;
}

Related

Do I have to address JavaScript function variables in order? How to do it? [duplicate]

This question already has answers here:
Skip arguments in a JavaScript function
(9 answers)
Closed 9 months ago.
How do I send one or more variables in a JavaScript function without sending null values to unused arguments?
I have a function:
function setProjectParameters(trigger, pp_ts, pp_t, pp_bs, pp_dg, pp_ll){alert("the rest of the code is here doing something");}
Sometimes I want to call this function and only send a value to pp_bs, now I do it like this:
setProjectParameters(null,null,null,"8");
Can I do it something like this?: (It doesn't work so I guess not...)
setProjectParameters(pp_ts="44");
What is the proper way to do it?
The easiest I think is to have the parameters in the function as an object and have defaults for them if you need to. Then you can target a specific parameter.
function setProjectParameters({trigger = 'if you need defaults add them like this', pp_ts, pp_t, pp_bs, pp_dg, pp_ll}){alert("the rest of the code is here doing something");}
Then use the function like this
setProjectParameters({pp_ts="44"});

Why not to use parentheses in front of name of an external function while calling it from addEventListner method in JavaScript [duplicate]

This question already has answers here:
Why do I have to omit parentheses when passing a function as an argument?
(2 answers)
Closed 4 years ago.
I am new to javascript and unable to understand one concept-
Why don't we use parentheses in front of name of an external function, while calling it(that particular function) by addEventListener method, in JavaScript.
For Example-
.addEventListener('click', myExternalFunction);
and not-
.addEventListener('click', myExternalFunction());
Whenever you are adding Event Listeners in any of the language you provide the delegates / Function Pointers.
They are not the actual function call they just point to the function and when the event actually occurs it will call that particular function.
This is how Delegates / Function Pointers works.

Use a variable as function in jquery [duplicate]

This question already has answers here:
Javascript dynamically invoke object method from string
(5 answers)
Closed 8 years ago.
I want to use a method in which i will pass a function_name as parameter to another function.
On the other function, the parameter will be treated as a function
here's my code example
<div class="btn_crt_acct" onclick="toggle_object('register_div','slideDown');">
CREATE AN ACCOUNT
</div>
whch will call a function like this
function toggle_object(obj,fun)
{
$('#'+obj).fun('slow');
// fun => slideDown
// so $('#'+obj).fun('slow'); => $('#'+obj).slideDown('slow');
}
but i am doing something wrong as it states an error in console, $fun(..) is not a function.
How can i make it work perfectly??
Thanks
You'd do that with bracket notation
$('#'+obj)[fun]('slow');
FIDDLE
But why not use a proper event handler, and slideToggle if you intend to toggle it
$('.btn_crt_acct').on('click', function() {
$('#register_div').slideToggle();
});

how to rebind the onclick property in javascript [duplicate]

This question already has answers here:
jQuery equivalent of JavaScript's addEventListener method
(7 answers)
Closed 8 years ago.
I have the below code where I successfully disable the properties
.prop("onclick", null)
.prop("onmouseover", null)
.prop("onmouseout", null);
Now if I want to rebind the click event what should I do.
For adding events back to a element use the bind function.
$("YourElement").bind("event",function(){
//Do what you want.
}
You can do it with many ways. I don't use to call the prop() method, but I think you just have to use it and set as your second parameter the name of your function.
function yourFunction()
{
// The job with onclick
}
DOMElement.prop("onclick", "yourFunction");
You can also use anonymous functions.
Use this documentation to work : http://api.jquery.com/prop/
I suggest you should use removeProp() instead of prop("yourprop", null) !

jQuery function vs handlers [duplicate]

This question already has answers here:
what is the difference between calling function in JavaScript with or without parentheses ()
(4 answers)
Closed 9 years ago.
A simple question from someone trying to learn:
I have this:
$(function(){$("#topFlag").hover(changeFlag, setFlag ); });
function changeFlag(){
//some code
};
function setFlag(){
//somecode
};
And it's all working (now). But what I expected to use was:
$(function(){$("#topFlag").hover(changeFlag(), setFlag() ); });
What's the difference? Why doesn't changeFlag() (with the parens) work? Isn't this a function call? What if I wanted to pass a parameter to the function?
Thanks for any insights (or pointers to documentation I can read). I've already checked out:
http://api.jquery.com/hover/
http://www.w3schools.com/js/js_functions.asp
changeFlag is a function.
changeFlag() calls that function.
You need to pass the function. You don't need to call the function and pass its return value.
When you add braces after a function name , it executes the function
setFlag() ; // calls the function
But you want the function to fire , when you hover over the element
And not at the time of attaching the event
In javascript the functions are also variables, when you pass it as a parameter you want to send the function to execute, if you write this yourFunc() you would be sending the result of that function instead.
To send parameter I use this:
$(function(){$("#topFlag").hover(function(){changeFlag(param1, param2,...)}, function(){setFlag(param1, param2,...)}); });
this creates an anonym function that call your functions.

Categories