Passing a function with parameter to event handler - javascript

Let's say I have the following code:
$('#from').focus(listExpand(1));
$('#to').focus(listExpand(3));
It's not working as I expected. I think that it works wrong due to the fact that I'm passing a function result but not the function itself.
So the right syntax would be:
$('#from').focus(listExpand); // no brackets and no parameters
But in this case I can not pass any parameters to a function :(
How can I implement the subject?

Wrap the call to listExpand in a separate function definition:
$('#from').focus(function(){ listExpand(1); });
$('#to').focus(function(){ listExpand(3); })

below will work. use this.
$('#from').focus(function() {listExpand(1) });
$('#to').focus(function(){listExpand(3);})
I found other cool way also that #sudher mentioned. You can check it working in http://jsfiddle.net/kvHDA/
Sample Code
$('#from').focus({x: 1},myfunc);
function myfunc( e){
alert(e.data.x);
}

If a data argument is provided to .on() and is not null or undefined,
it is passed to the handler in the event.data property each time
an event is triggered.
$('#from').on("focus" , {id:1} , listExpand);
$('#to').on("focus" , {id:3} , listExpand);
function listExpand(event){
console.log(event.data.id);
}

Related

Type error: "Not a function" using "this" keyword in a function

I have created the following function.
function showAllSelectOpts(select)
{
selectLength = select.children().length;
select.attr('size',selectLength);
select.css('height','auto');
select.focusout(function(){
select.attr('size','1');
});
}
When it is called directly on a select element like this showAllSelectOpts(mySelect); it works fine, but when called within another function, as below using the keyword "this", it returns the error. Type error: select.children not a function
$('select').on('focus',function(){
showAllSelectOpts(this);
})
Is this a scope issue or what, and how can I resolve it?
In an event handler, this is a reference to the DOM element, not a jQuery object. But your showAllSelectOpts expects its argument to be a jQuery object.
Either change the call to wrap the DOM element with $():
showAllSelectOpts($(this));
...or update showAllSelectOpts to do so itself:
function showAllSelectOpts(select)
{
select = $(select); // ***
selectLength = select.children().length;
select.attr('size',selectLength);
select.css('height','auto');
select.focusout(function(){
select.attr('size','1');
});
}
Side note: As A.Wolff points out, your function attaches a new focusout handler to the select every time it's called. You only want one.
I'd remove that part of the handler entirely, and replace it with a single focusout:
function showAllSelectOpts(select)
{
var selectLength = select.children().length;
select.attr('size',selectLength);
select.css('height','auto');
}
$('select')
.on('focus',function(){
showAllSelectOpts($(this));
})
.on('focusout', function(){
$(this).attr('size', '1');
});
Also note that I added a var for selectLength in showAllSelectOpts (although actually, you could just remove the variable entirely); without one, the code is falling prey to The Horror of Implicit Globals (that's a post on my anemic little blog). Be sure to declare your variables.
jQuery event listener callbacks set this as the HTMLElement that the event was fired on.
In your callback you are expecting a jQuery object, but you have the HTMLElement.
You can pass the HTMLElement to a jQuery constructor and pass it into the showAllSelectOpts function
$('select').on('focus',function(){
showAllSelectOpts($(this));
})
Try this one -
$('select').on('focus',function() {
showAllSelectOpts($(this)); })
Try this:
var myselect = $('select');
$('select').on('focus',function(){
showAllSelectOpts(myselect);
})
A better way could be:
$('select').on('focus',function(event){
showAllSelectOpts($(event.target));
})
Why your code not working?
$('select').on('focus',function(){
//Here `this` is bound with the dom html element, not the $('select') object.
showAllSelectOpts(this);
})
These previous answers fix it. I'd just add here to create it as an extension since $(this) refers to a prototype of one method call.
$.fn.showAllSelectOpts=function() {
$(this).on('focus',()=>{
$(this)
.css('height','auto')
.attr('size',$(this).children().length)
.focusout(()=>{
$(this).attr('size','1');
});
});
};
$('select').showAllSelectOpts();

How do I use a function as a variable in JavaScript?

I want to be able to put the code in one place and call it from several different events.
Currently I have a selector and an event:
$("input[type='checkbox']").on('click', function () {
// code works here //
});
I use the same code elsewhere in the file, however using a different selector.
$(".product_table").on('change', '.edit_quantity', function () {
// code works here //
});
I have tried following the advice given elsewhere on StackOverflow, to simply give my function a name and then call the named function but that is not working for me. The code simply does not run.
$(".product_table").on('change', '.edit_quantity', function () {
calculateTotals() {
// code does not work //
}
});
So, I tried putting the code into it's own function separate from the event and call it inside the event, and that is not working for me as well.
calculateTotals() {
// code does not work //
}
So what am I doing wrong ?
You could pass your function as a variable.
You want to add listeners for events after the DOM has loaded, JQuery helps with $(document).ready(fn); (ref).
To fix your code:
$(document).ready(function() {
$("input[type='checkbox']").on('click', calculateTotalsEvent)
$(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
});
function calculateTotalsEvent(evt) {
//do something
alert('fired');
}
Update:
Vince asked:
This worked for me - thank you, however one question: you say, "pass your function as a variable" ... I don't see where you are doing this. Can you explain ? tks. – Vince
Response:
In JavaScript you can assign functions to variables.
You probably do this all the time when doing:
function hello() {
//
}
You define window.hello.
You are adding to Global Namespace.
JavaScript window object
This generally leads to ambiguous JavaScript architecture/spaghetti code.
I organise with a Namespace Structure.
A small example of this would be:
app.js
var app = {
controllers: {}
};
You are defining window.app (just a json object) with a key of controllers with a value of an object.
something-ctlr.js
app.controllers.somethingCtlr.eventName = function(evt) {
//evt.preventDefault?
//check origin of evt? switch? throw if no evt? test using instanceof?
alert('hi');
}
You are defining a new key on the previously defined app.controllers.somethingCtlrcalled eventName.
You can invoke the function with ();.
app.controllers.somethingCtlr.eventName();
This will go to the key in the object, and then invoke it.
You can pass the function as a variable like so.
anotherFunction(app.controllers.somethingCtlr.eventName);
You can then invoke it in the function like so
function anotherFunction(someFn) { someFn();}
The javascript files would be structured like so:
+-html
+-stylesheets
+-javascript-+
+-app-+
+-app.js
+-controllers-+
+-something-ctlr.js
Invoke via chrome developer tools with:
app.controllers.somethingCtlr.eventName();
You can pass it as a variable like so:
$(document).ready(function() {
$('button').click(app.controllers.somethingCtlr.eventName);
});
JQuery (ref).
I hope this helps,
Rhys
It looks like you were on the right track but had some incorrect syntax. No need for { } when calling a function. This code should behave properly once you add code inside of the calculateTotals function.
$(".product_table").on('change', '.edit_quantity', function () {
calculateTotals();
});
$("input[type='checkbox']").on('click',function() {
calculateTotals();
});
function calculateTotals() {
//your code...
}
You could just condense it all into a single function. The onchange event works for both the check box and the text input (no need for a click handler). And jQuery allows you to add multiple selectors.
$('input[type=checkbox], .product_table .edit_quantity').on('change', function() {
console.log('do some calculation...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product_table">
<input type="checkbox">
<input class="edit_quantity">
</div>

JavaScript: calling a function by name on hashchange

I'm trying to call a function given the function name in the hash string. I have the following code:
$(window).on('hashchange', function() {
//alert(location.hash.substring(1, location.hash.length));
window[location.hash.substring(1, location.hash.length)];
});
function test() {
alert('123!');
}
The funny thing is, when I uncomment the alert call, everything works as expected. When the alert is commented, however, it doesn't work.
Any ideas?
window[location.hash.substring(1, location.hash.length)];
doesn't call a function.
If you want to call the function whose name is location.hash.substring(1, location.hash.length), you may do
window[location.hash.substring(1, location.hash.length)]();
Side note :
location.hash.substring(1, location.hash.length)
can be shortened in
location.hash.slice(1)

The 'e' parameter in function's prototype method doesn't work

I want use e parameter to stop javascript bubble
here is my code:
function test(){}
test.prototype.method=function(parameter,e){
console.log(parameter)
e.preventDefault();
}
var t=new test();
$(function(){
$('.node').click(function(){
t.method($(this).attr('id'),e);
});
});
however,it doesn't work,the firebug tell me the "e is not defined"
How can I solve this problem?
At the call site
t.method($(this).attr('id'),e);
there is no symbol named e in scope; therefore, the browser complains. Since symbols do not magically appear, you want to tell the browser that e is the first argument passed in your click handler:
$('.node').click(function(e){ // ADDED FORMAL PARAMETER
t.method($(this).attr('id'),e);
});
You know that there will be a parameter passed to the handler because the docs say that your handler will be given an eventObject -- but of course you are free to name the parameter as you prefer.
Change this :
$(function(){
$('.node').click(function(){
t.method($(this).attr('id'),e);
});
});
To this (you forgot to put the e in your function)
$(function(){
$('.node').click(function(e){
t.method($(this).attr('id'),e);
});
});
Made it a bit prettier.
Using $(this).attr('id') is a waste of resources by the way. You can simply get the id like I did in the code belove.
$(function(){
$('.node').on('click',function(e) {
t.method(this.id,e);
});
});
In your method you should expand your code with the following:
if (e.preventDefault)
e.preventDefault();
else
e.stop();

Creating an arguments and adding it to a click event

Hi I'm pretty new to javascript looking for some help on creating an argument and adding it to a click event in jquery
Heres a demo: http://jsfiddle.net/zidski/8VwAy/1/
Can someone help example what I have to do?
Thanks
First: Do not use arguments as a variable name, since every function already defines the arguments object.
Your code does not work, because you have injected the JavaScript through the onload setting in JSFiddle. This runs code after the document has loaded.
In the body section, you're calling a function which is not defined yet.
What happens?
Definition:
window.onload = function () {
// Defines window.demo.Alert...
}; ...
window.demo.Alert();
Calling order:
window.demo.Alert(); // Error: 'demo' is not defined.
window.onload = ...
Change onload to nowrap (head) to get your code to work: http://jsfiddle.net/8VwAy/7/
You can actually pass data to the event handler as the first parameter
$(".js-link").click("myne", function(e) {
alert(e.data);
alert("Hello world");
});
fiddle here http://jsfiddle.net/8VwAy/8/

Categories