jQuery plugin function call to its own method? - javascript

I am using the following code below and essentially it takes an element as input (i.e.):
$(#someDiv).Calculator();
but the problem is that I want to call this plugin's function within itself, but I don't know how to get an object/handle to itself to call the function. caching off "this" does not have the proper reference.
(function ($) {
jQuery.fn.Calculator = function () {
var selectedObjects = this;
var control = $(selectedObjects[0])[0];
$("#btnCalculate").click(function(){
// this is where calculate needs to be called
someObject.calculate(...);
});
return {
calculate: function (value) {
// do some code
return selectedObjects;
}
};
}
})(jQuery);
Any ideas/direction would be of great help! Thank you all!

Try
(function ($) {
jQuery.fn.Calculator = function () {
var selectedObjects = this;
var control = $(selectedObjects[0])[0];
$("#btnCalculate").click(function(){
// this is where calculate needs to be called
calculator.calculate(...);
});
var calculator = {
calculate: function (value) {
// do some code
return selectedObjects;
}
};
return calculator;
}
})(jQuery);

Related

Aframe pass variables between functions in component

I’m trying to stop the throttledFunction from running unless the “fly” event listener has been emitted. But I can’t change the “this.ballhit” variable from inside the eventlistener.
I don’t know how to pass variables between functions within the component.
AFRAME.registerComponent('ballflyact', {
init: function () {
var el = this.el;
this.ballhit = '';
el.addEventListener('fly', function () {
this.ballhit = true;
});
},
tick: function (t, dt) {
if (!this.ballhit) { return; }
this.throttledFunction(); // Called once a second.
},
});
When you create a function, this becomes different.
You can use self-binding function el.addEventListener('fly', () => { // ... });
Or like var self = this; el.addEventListener('fly', function () { self.ballHit = true; });
The following works. Thank you. Now the throttle function will only run for ~10,000 milliseconds after the “fly” event, not constantly in the background.
AFRAME.registerComponent('ballflyact', {
init: function () {
var el = this.el;
this.ballhit = '';
var self = this;
el.addEventListener('fly', function () {
self.ballhit = true;
// more code
setTimeout((e)=>{
self.ballhit = '';
}, 10000)
});
},
tick: function (t, dt) {
if (!this.ballhit) { return; }
this.throttledFunction(); // Called once a second.
},
});

self-executing anonymous functions and call it again

I want to do something like this:
var build= (function(){
//my function body
})();
function test(){
//somthing then call build
build() //i want to call build function again in my code
}
How can I do this?
I tried this in angular:
var buildRoot = (() => {
$SubNode.get({
TypeID: vendorAdminService.NodeType.Category
}, function(data: vendorAdminService.IGetNodeParameters) {
$scope.ProductTree = data.TreeNodeModelItem;
$scope.AjaxLoading = false;
}, function(err) {
// alert(err)
})
})();
$mdDialog.show(confirm).then(function() {
$Category.Remove(node.ID)
buildRoot
}, function() {
});
but it does not work.
Anybody can guide me??
You need to return a function in your IIFE.
If you IIF is not trivial and has many functionalities you could also consider using Reveal Module Pattern.
var build = (function() {
var f = function() {
console.log('hello');
};
f();
return f;
})();
function test() {
build();
}
test();
Just use a named function.
Your IIFE needs to return a function, for later calling. But then is no need for an anonymous function.
function build() {
//my function body
}
or
var build = function () {
//my function body
};
var build = (function() {
var init = function() {
// magic code
};
return {
init: init
}
}());
function test() {
build.init()
}
test();
You include all your functionalities inside your build object, and you'll be able to call them as soon as you return them from inside that object. This effectively is called the revealing module pattern
For more information, read this
I see that there are missing semi-colons ";"
$mdDialog.show(confirm).then(function() {
$Category.Remove(node.ID);
buildRoot();
}, function() {
});

Invoking javascript built-in objects constructor using call and apply

I am trying to invoke date object constructor on a click event using call/apply, but the constructor is not giving me the output. Here is the code snippet:
function invokeCommand(cmd) {
var parts='';
return cmd.call(this, parts);
}
YUI().use('node','event-base', function (Y) {
Y.on('domready', function () {
Y.one('#myconsole').on('submit', function () {
var cmd = Y.one('#cmd_input').get('value');
alert(invokeCommand(cmd));
});
});
});
Here I am trying to invoke the constructor and get the output or return the definition. Any thoughts?
I replaced the cmd.call with Date.call and I can able to see the output, but when Date is store in cmd var and invoked its not giving the output,
function invokeCommand(cmd) {
var parts='';
//return cmd.call(null);
return Date.call(null);
}
YUI().use('node','event-base', function (Y) {
Y.on('domready', function () {
Y.one('#jsconsole').on('submit', function () {
var cmd = Y.one('#cmd_input').get('value');
alert(invokeCommand(cmd));
});
});
});

System unique id of a function passed as a parameter (javascript)

This is probably not possible but maybe some of the stackoverflow geniuses can find a solution :)
W would like to have a function like this:
var myCrazyFunc;
myCrazyFunc = function (param1, callback) {
var funcId;
// I would like to get an Id of the function passed by callback
// which will be different for those two calls in example below
funcId = getFuncId(callback);
callback();
};
myCrazyFunc("param1", function () {
dosomething1;
});
myCrazyFunc("param1", function () {
dosomething2;
});
Please don't ask why I need that :) Simply it would simplify my code if that was possible.
Here is the function I made:
var myCrazyFunc;
var latestID = 0;
var funcToID = {};
function getFuncId(f) {
if (f in funcToID) {
return funcToID[f];
}
funcToID[f] = ++latestID;
return latestID;
}
myCrazyFunc = function(param1, callback) {
var funcId;
// I would like to get an Id of the function passed by callback
// which will be different for those two calls in example below
funcId = getFuncId(callback);
console.log(funcId);
callback();
};
myCrazyFunc("param1", function() {
'a';
});
myCrazyFunc("param1", function() {
'b';
});
this example would log:
1
2
I you run it with the same function code you get the same id, like here:
myCrazyFunc("param1", function() {
'a';
});
myCrazyFunc("param1", function() {
'a';
});
Ouput:
1
2
I hope that's ok.

JavaScript - Return from anonymous function (varScope)

<script>
var sample = function() {
(function() {
return "something"
})();
// how can I return it here again?
}
</script>
Is there a way to return the returned value from the anonymous function in the parent function again or do I need to use a defined function to get the returned value? Thanks! :)
Just put the return statement at the point where you call the function.
<script>
var sample = function() {
return (function() { // The function returns when you call it
return "something"
})();
}
</script>

Categories