I have an object:
var obj = { id: $('#f_view') };
I have a function:
function switchFrom(trigger) {
trigger.id.click(function() {
this.id.toggleClass('class');
});
};
When i run the function:
switchFrom(obj);
I get :
undefined is not a function (evaluating'this.id.toggleClass('class')')
When I refer to the element explicitly, the function works.
$('#f_view').toggleClass('class');
What Am i doing wrong? Thank you for your time.
You need to convert to a jQuery object by wrapping in $(...) like
function switchFrom(trigger) {
trigger.id.click(function() {
$(this).toggleClass('class');
});
}
This is because native javascript objects do not have access to jQuery methods
Related
I have a javascript Object called aObject and a fucntion inside it is used as a jQuery Callback function like this:
var aObject = {
aVariable : 'whatever value',
test : function(e) {
// Trying to access property. But doesn't work as expected since I am getting the DOM element i.e form, not the aObject reference
var temp = this.aVariable;
}
}
$('document').ready(function(){
$('#some-html-form').submit(aObject.test);
});
When I call the test method in aObject, this refers to the form element that has been submitted. I want to access current object from the test callback function?
I tried the below code as described in this answer but it did not work for me
$(document).ready(function() {
$('#add_api_form').submit(api_cahce.handle_add_form_submit.bind(this));
});
bind with aObject then you can access the variable.
var aObject = {
aVariable : 'whatever value',
test : function(e) {
var temp = this.aVariable;
}
}
$('document').ready(function(){
$('#some-html-form').submit(aObject.test.bind(aObject));
});
I have this code:
var createAllAreSelectedClickedHandler = function(selectablesArrayGetter) {
return function() {
var array = selectablesArrayGetter();
var desiredState = array.every(function(selectable) { return selectable.selected; }) ? false : true;
array.forEach(function(selectable) {
selectable.selected = desiredState;
});
};
};
Followed by this one:
function PromoViewModel() { this.registrations = [...] }
PromoViewModel.prototype.allEventsSelectedClickedHandler = createAllAreSelectedClickedHandler(function() { return this.registrations; }));
I can't manage to set the correct value of this. The "this" value when the function is created points to Window so I can't do .bind(this). I've tried doing .bind(PromoViewModel.prototype) but it lacks all the precious instance fields set inside the constructor.
I know I could simply set this.allEventsSelectedClickedHandler in the constructor function, but I'm trying to separate the methods creation from the variables.
The problem is the call selectablesArrayGetter(); which determines the this value for the callback.
You will need to "pass" the this value that the method (i.e. the closure you are returning) is invoked on, using call:
var array = selectablesArrayGetter.call(this);
I'd recommend defining your PromoViewModel.prototype.allEventsSelectedClickedHandler method as follows:
PromoViewModel.prototype.allEventsSelectedClickedHandler = function() {
var _array = this.registrations;
var desiredState = _array.every(function(selectable) { return selectable.selected; }) ? false : true;
_array.forEach(function(selectable) {
selectable.selected = desiredState;
});
};
the function that you're passing as callback uses this, but doesn't have the PromoViewModel context. You can ensure the method has the proper context by binding this to a variable.
function PromoViewModel()
{
var me = this;
this.registrations = [...];
this.allEventsSelectedClickedHandler = createAllAreSelectedClickedHandler(function() {
return me.registrations;
});
}
Working fiddle: http://jsfiddle.net/michaschwab/coegnL5j/9/ also has Bergi's answer in there (commented out) to show that that works just as well.
Ok here is what I did.
In the prototype definition instead of directly associating it to createAllAreSelectedClickedHandler function, I actually define a function that returns the createAllAreSelectedClickedHandler function. By doing this, I can define a variable (in this case protoScope) that maps this context when defined.
When doing that, if you put a break-point in the createAllAreSelectedClickedHandler function you will see that the selectablesArrayGetter value is correct (the acutal registrations array).
PromoViewModel.prototype.allEventsSelectedClickedHandler = function (){
var protoScope = this;
return createAllAreSelectedClickedHandler(function() {
return protoScope.registrations;
});
}
I am trying to build a lib and I need to call functions dynamically depending on the variables I have in parameter like this
strategies = min
function dispatchRuleToStrategy(strategies)
{
$.each(strategies, function(index, value) {
strategy = "strategy_" + value;
});
}
function strategy_min()
{
// do something
}
How can I call the function strategy_min() from dispatchRuleToStrategy()?
I've been trying a couple of things none of which are working.
Thanks for your help
Use an Object to create a dictionary of your functions e.g. lib
var lib = {
'strategy_min': strategy_min
};
then you can invoke via the key in this dictionary Object
lib['strategy_min']();
If you've named all your functions and you don't want to re-type the names over and over, you could
var lib = {};
function addToLib(fn) {
lib[fn.name] = fn;
}
// then
addToLib(strategy_min);
// or
[strategy_min].forEach(addToLib);
Put them in an object and use the property name:
var strategy_table = {
min: function() {
// do something
},
max: function() {
// do something else
},
...
};
Then you can access them as strategy_table[value]:
$.each(strategies, function(index, value) {
strategy_table[value]();
});
Others have already suggested to create a wrapper object for the functions, however, if your strategy_min() function is in the global scope, you can access it directly:
window['strategy_' + value]();
window in browsers refers to the global object. The bracket notation is used to access properties whose keys are dynamically generated. This way you are accessing the function, which is a property of the global object, i.e. window, and calling it using the parentheses.
Finally I found the real problem. I was in a jquery document ready which is a closure. I did not knew what closures were before today.
Thanks all for your help
You can use eval() function in the following manner
$.each(strategies, function(index, value) {
strategy = "strategy_" + value;
eval(strategy+"()");
});
I'm trying to use something like pointers in javascripts, this is what I have,
I have a set of values: {chart2:6, chart3:4, chart5:7}. For example I want to write a function where I can pass to it chart2 and it will return to me the value 6.
Thank you for your help.
this is the code im using now:
function pointers(copy,paste) {
obj[copy].value = paste;
}
function getPointer(copy) {
return obj[copy].value;
}
pointers(selectedIdsArray[s],semiId);
alert(selectedIdsArray[s]);
im calling the pointers function inside a loop and alerting them too in aloop,
but it giving the following error:
ReferenceError: obj is not defined
There are no C-style pointers in javascript. Your getPointer function needs to see the obj variable to be able to access it (like in the snippet below).
var obj = {
foo: { value: "foo" },
bar: { value: "bar" }
};
function pointers(copy, paste) {
obj[copy].value = paste;
}
function getPointer(copy) {
return obj[copy].value;
}
I'm not into JavaScript OOP, so I've made an object with some fields which contains some functions to invoke.
var test = {
questions: [],
addQuestion: function(questionTitle, possibleAnwsers)
{
// not really important
},
appendQuestionToHTML: function(question)
{
// not really important
},
makeQuestionFieldsEditable: function($questionNode)
{
$questionNode.find(".questionTitle").first(function(){this.changeTextOnClick($(this));});
$questionNode.find(".questionChoice").each(function(){this.changeTextOnClick($(this));});
},
changeTextOnClick: function($spanElement)
{
// not really important
}
};
Following object in makeQuestionFieldsEditable() function looks for ".questionTitle"-class node and all of ".questionChoice"-class nodes invoke another function for them.
The problem is that using this in anonymous function references to itself, not function saved on field changeTextOnClick.
Javascript/JQuery wants to invoke this function on HTMLDivElement, which doesn't exists.
Is there any solution?
You can do the trick using a reference to your this variable :
makeQuestionFieldsEditable: function($questionNode)
{
var that = this;
$questionNode.find(".questionTitle").first(function(){that.changeTextOnClick($(this));});
$questionNode.find(".questionChoice").each(function(){that.changeTextOnClick($(this));});
},
I think all you need to do is change 'this' to 'test' (the variable you have assigned this object to).