I want to call an specific array of function on my onclick.
Example JS:
var foo = [
function() { alert("Function 1!"); },
function() { alert("Function 2!"); }
];
Example HTML:
<a onclick="foo[0]" >Alert</a>
but dont understand how get it done.
You need parenthesis for calling the function. Otherwise you return the function itself, like in example 2.
<a onclick="foo[0]()" >Alert</a>
<!-- ^^ -->
var foo = [
function() { alert("Function 1!"); },
function() { alert("Function 2!"); }
];
<a onclick="foo[0]()" >Alert</a><br>
<a onclick="alert(foo[0])" >Alert, what really happens without parenthesis</a>
you should call the function . since you are getting only function using foo[0] . you need to call them by () to run the function
var foo = [
function() { alert("Function 1!"); },
function() { alert("Function 2!"); }
];
foo[0]();
foo[1]();
Related
The problem that when I click on .test it does not execute the do_alert(); function and gives me a error:
do_alert(); is not defined.
What's the problem? the main function helpers is already read when the page is loaded why can' get this function from logout_users function?
var setup_system = (function($) {
"use strict";
return {
init: function() {
this.logout_users();
this.helpers();
},
logout_users: function() {
$(document).on('click', '.test', function(e) {
e.preventDefault();
do_alert();
});
},
helpers: function() {
function do_alert() {
alert();
}
}
};
})(jQuery);
jQuery(document).ready(function() {
setup_system.init();
});
NOTE: I try to re-read the helpers function by adding this.helpers() inside logout_users function but nothing change.
It's because you've defined do_alert() within the scope of the helpers function.
To fix this you will need to move that function to within scope of the object you return. You could either put it at root level of the object (which would work fine, but could get messy if you have a lot of 'helper' functions) or you could nest it within your helpers property if you define that as another object. Personally, I'd use the latter to have some semblance of organisation. Try this:
var setup_system = (function($) {
"use strict";
return {
init: function() {
this.logout_users();
},
logout_users: function() {
var _obj = this;
$(document).on('click', '.test', function(e) {
e.preventDefault();
_obj.helpers.do_alert();
});
},
helpers: {
do_alert: function() {
alert('foo');
}
}
};
})(jQuery);
jQuery(function() {
setup_system.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Click me</div>
Note that I cached the reference to the object as _obj outside of the click handler, as within that block this will refer to the clicked .test element.
Do_alert function exist only in helpers method, so you can't access to it.
You need to declare your function directly in the logout_user method or outside, try this :
var setup_system = (function ($) {
"use strict";
return {
init: function () {
this.logout_users();
this.helpers();
},
logout_users: function() {
function do_alert(){
alert();
}
$(document).on('click', '.test', function(e){
e.preventDefault();
do_alert();
});
},
helpers: function () {
function do_alert(){
alert();
}
}
};
})(jQuery);
jQuery(document).ready(function () {
setup_system.init();
});
When helpers is invoked by the initfunction, all that is happening is that do_alert is being declared. But function declarations are hoisted to the top of their lexical scope. The lexical scope of do_alert is the scope defined by the helpers function. Therefore, do_alert is not accessible outside of helpers function.
A couple things you could do. The first one that comes to mind is: you could have the helpers method define a method called do_alert on the object being returned rather than merely declaring a function, like so:
helpers: function() {
this.doAlert = function() {
alert();
}
}
When your doAlert() is invoked by the event handler passed to jQuery, it will not work with the above solution. Instead you will need to make sure you call that doAlert on the returned object in that event handler. This is how you can do that:
logout_users: function() {
var self = this;
$(document).on('click', '.test', function(e) {
e.preventDefault();
self.doAlert();
});
I Am looking for a way to proper call this inside function now i have quick hack var that = $(this); but i am sure that there is propper way of doing it. How i can avoid this hack?
This is input field which i use to get var and inspect Typing Interval
<input type="text" data-package="pink" class="js-p-input">
this i my code:
var cCalc = (function ($) {
var s;
return {
settings: {
typingTimer: "",
doneTypingInterval: 300,
$inputs: $(".js-p-input"),
},
init: function () {
s = this.settings;
this.bindUIActions();
},
bindUIActions: function () {
//on keyup, start the countdown
s.$inputs.on('keyup', function () {
var that = $(this);
clearTimeout(s.typingTimer);
s.typingTimer = setTimeout(function() {
cCalc.doneTyping(that, that.data("package"));
}, s.doneTypingInterval);
});
s.$inputs.on('keydown', function () {
clearTimeout(s.typingTimer);
});
},
doneTyping: function ($input, packageName) {
console.log('done!');
cCalc.getValues($input.val(), packageName);
},
};
})(jQuery);
cCalc.init();
There is nothing wrong with using that "hack", it is standard operating procedure. See also here What is the difference between call and apply? for even more "hacky" stuff with "this" that is standard.
As others have pointed out, there's not really anything wrong with using a closure but you could alternatively bind "this" into the timeout function scope like so:
s.$inputs.on('keyup', function () {
clearTimeout(s.typingTimer);
s.typingTimer = setTimeout(function() {
cCalc.doneTyping($(this), $(this).data("package"));
}.bind(this), s.doneTypingInterval);
});
+function ($) {
'use strict';
var popup = {
init: function(element) {
this._active = 'products__popup--active';
this._product = $('.products__popup');
this._element = $('[data-popup-to]');
this._TIME = 500;
popup.attachEvt();
},
attachEvt: function() {
var that = this;
that._element.bind('click', popup.handlerEvt.call(that));
},
handlerEvt: function() {
console.log(this);
console.log('test');
}
};
$(window).on('load', function() {
popup.init();
});
}(jQuery);
I have this script, and is not working yet, I cant show you a working example because it is not ready, I'm organizing the code first.
And there is a problem with the attachEvt function, inside it I want to call another function of my object, this function will bind a click in the that._element, but I want pass to the handlerEvt the scope of this (the clicked element) and the that (the object), but this is not working:
that._element.bind('click', popup.handlerEvt.call(that));
I'm just passing the that scope and when the script loads, the element will be clicked without click, I want avoid this.. this is possible?
UPDATE:
Resuming:
I want be able to use the scope of the object (that) and the scope of the clicked element (this) inside the handlerEvt function, but without make the event click when the script loads.. :B
Try utilizing .bind() , with this set to that._element , that passed as parameter to handlerEvent . Note order of parameters at handlerEvent: obj: that first , evt event object second
+function ($) {
'use strict';
var popup = {
init: function(element) {
this._active = 'products__popup--active';
this._product = $('.products__popup');
this._element = $('[data-popup-to]');
this._TIME = 500;
popup.attachEvt();
},
attachEvt: function() {
var that = this;
that._element.bind('click', popup.handlerEvt.bind(that._element, that));
},
handlerEvt: function(obj, evt) {
console.log(evt, obj, this);
console.log('test');
}
};
$(window).on('load', function() {
popup.init();
});
}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-popup-to="true">click</div>
I created the new dojo application in dojo AMD module. I need to call the my button click in one script file to another script file. but when i clik the button its shows the null value error my sample code is given below:
My function file code is:
define(["dojo/_base/declare" . . .], // defaultDuration
function (declare . . ) {
var mycode = declare([ContentPane, _WidgetBase, _TemplatedMixin], {
toggle: function () {
//here my function
},
constructor: function (params /) {
},
postCreate: function () {
}
});
return mycode;
});
Button Click Event :
define(["dojo/_base/declare" . . . ],
function (declare . . .) {
var evet = declare([dijit._WidgetBase, dijit._TemplatedMixin], {
_div: null,
constructor: function (div) {
this._div = div;
},
postCreate: function () {
this.inherited(arguments);
var markbutton = new Button({
label: "Mark",
}, this.markButtonNode);
markbutton.on("click", function (evt) {
this._div.toggle(); // error here _div is undefined.
});
}
});
return evet;
});
You need to hitch the scope in order for this to work.
markbutton.on("click", lang.hitch(this, function (evt) {
this._div.toggle();
}));
well, you can store scope in a variable and access this variable inside you function....
Try this:-
var _this = this;
markbutton.on("click", function (evt) {
_this._div.toggle();
});
In this approach, no need to require "dojo/_base/lang"...
Hope this will help you..
Ok terrible title but I couldn't think of another description.
I have the following code:
jQuery( document ).ready( function( $ )
{
$.myNamespace = {
init: function()
{
$('.button').click(function() {
this.anotherFunction();
});
},
anotherFunction: function()
{
alert('insidefunction');
}
}
$.myNamespace.init();
});
As you can see I am trying to call anotherFunction from inside init and have there the two ways I tried but didn't work. So how am I able to call that function or is my concept wrong?
jQuery( document ).ready( function( $ )
{
$.myNamespace = {
init: function()
{
var a=this;
$('.button').click(function() {
a.anotherFunction();
});
},
anotherFunction: function()
{
alert('insidefunction');
}
}
$.myNamespace.init();
});
http://jsfiddle.net/ZpAtm/2/
Absolutely calling it within the click handler changes things, as this inside any jQuery event handler is set to the element that caused the event.
Instead, try using the following pattern:
jQuery(document).ready(function($) {
$.myNamespace = (function() {
function init() {
$('.button').click(function() {
anotherFunction();
});
}
function anotherFunction() {
alert('insidefunction');
}
// return an object with all the functions you want
// available publically as properties. Don't include
// any "private" functions.
return {
init: init,
anotherFunction: anotherFunction
};
})();
$.myNamespace.init();
});