We Keep Coding

How to get current object reference inside a jquery callback function?

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));
});

Calling object method within the object—error: cannot read property of undefined

I'm trying to call getQuestions() inside the same object it is a method of. But when I try to read the quizz.config.allQuestions property, I get an error message reading "Uncaught TypeError: Cannot read property 'getQuestions' of undefined." Is there something I am missing here?
var quizz = {
config: {
urlJSON: 'questions.json',
allQuestions: quizz.getQuestions()
},
getQuestions: function() {
$.getJSON(quizz.config.urlJSON, function(questions) {
return questions;
});
}
};

When you're trying to assign to allQuestions the quizz object isn't done being initialized yet. So you'd have to do it after creating the object.
var quizz = {
config: {
urlJSON: 'questions.json'
// don't declare allQuestions
},
getQuestions: ...
};
quizz.allQuestions = quizz.getQuestions();
The problem with that though is that $.getJSON is an asynchronous function, meaning it won't return that value immediately. That's why it has a callback in it. Instead, you might try defining getQuestions like this:
getQuestions: function(callback) {
$.getJSON(quizz.config.urlJSON, callback);
}
Then you can get the values like this:
quizz.getQuestions(function(questions) {
quizz.config.allQuestions = questions;
});

Javascript: getValueProperty of null?

I am trying to write a single function to move an element, but I am encountering this error:
Uncaught TypeError: Cannot call method 'getPropertyValue' of null
function Mover() {
this.move = move;
// Name of the moving element, property to change, endPoint - where to end the movement
function move(element, property, endPoint) {
var element = document.getElementById(element);
// Get value of the desired property and turn it into number so that it can be incremented
var propertyValue = window.getComputedStyle(element).getPropertyValue(property);
var propertyValueInt = parseInt( propertyValue.substr(0,propertyValue.length-2) );
// This is where error starts: for some reason it says the aforementioned error
var moveit = function() {
propertyValueInt = propertyValueInt + 1;
element.style.property = propertyValueInt + "px";
};
window.setInterval(moveit, 500);
}
}
Where could the error be? I realize that it somehow rewrites the element property so that it is null, but why?
Thank you

The error comes from getComputedStyle(element).getPropertyValue(property);, since element can't be recognized as a HTML element. You've to fix the value of element to refer an existing HTMLElement. There's a typo/wrong text in the function call, or an element with the said id doesn't exist at the time this function is executed.
There's also an error in moveit(). When property is a variable name, this doesn't do what you expect:
element.style.property = ...
You need to use bracket notation:
element.style[property] = ...

Retrieving the value of a variable through a closure

I have the following module pattern in the javascript for a webpage:
var swf_debugger = swf_debugger || {};
(function($, swf_debugger) {
swf_debugger.pageSetup = (function() {
var
swfType = null,
formData = {},
// ... unimportant code continues ...
initChangeEvents = function() {
$.each(formElements, function(index, $el) {
if ($el.hasClass("swfToLoad")) {
// THIS EVENT IS WHERE I MAKE THE ASSIGNMENT TO 'swfType'
$el.change(function() {
swfType = $("option:selected", this).val();
console.log("swfToLoad has triggered");
console.log(swfType);
});
return;
}
// NO ISSUES HERE WITH THESE EVENTS...
switch($el.prop("tagName")) {
case "SELECT":
$el.change(function() {
formData[$el.attr('id')] = $("option:selected", this).val();
});
break;
case "INPUT":
switch ($el.attr('type')) {
case "text" :
$el.change(function() {
formData[$el.attr('id')] = $(this).val();
});
break;
case "checkbox" :
$el.change(function() {
formData[$el.attr('id')] = $(this).prop("checked");
});
break;
default:
}
break;
default:
}
});
},
init = function() {
$(function() {
addFormComponents();
populateDropdowns();
initCachedData();
initChangeEvents();
});
};
init();
return {
swfType: swfType,
formData: formData
};
}());
}($, swf_debugger));
Essentially I am attaching an event to a series of jquery selected elements, with the callback simply storing the contents of a particular form element (specifically select, text, and checkbox elements) in a variable or an object.
I know my events are attaching properly because when I add console.log statements to them I can see them firing. Also, whenever I call swf_debugger.pageSetup.formData in the console I see valid contents of the object that each of those events are populating, so those events are doing what they're supposed to.
My troubles are happening whenever I try to access swf_debugger.pageSetup.swfType it always returns null and I am not understanding why. I know that the particular event feeding this value, is firing and I know that at least within the function scope of the callback, swfType is valid because of what is returned in my console.log statements. However, whenever I try to access the contents of swfType through the closure, (i.e. typing swf_debugger.pageSetup.swfType in the console), It always returns null.
I am guessing that I am running into the difference between an objects reference being passed and a variables value being passed, but I am not sure. Can someone please help me along here and explain why swfType is always returning null through the closure.

why is swfType always returning null
Because that's the value which you assigned to the property (gotten from the swfType variable which had that value at the time of the assignment). A property is not a reference to the variable assigned to it - you can only assign a value.
What you can do:
make the object property a getter method which returns the value of the local swfType variable whenever it is called
don't use a variable but assign to the property of the swf_debugger.pageSetup object each time

Javascript: previous property is undefined

Why is it saying that "lbp is undefined" on the line of "creditText"? How do I refer to previous properties in a config file such as this?
var lbp = {
// Pertinant page properties, such as Author, Keywords, URL or Title
page: {
theURL: window.location.toString(),
},
// Configurable user defaults
defaults: {
creditText: lbp.page.theURL
}
}
Thanks in advance for your help

You don't. lbp won't exist in the current scope's symbol table until the object is closed out.
var lbp = {
// Pertinant page properties, such as Author, Keywords, URL or Title
page: {
theURL: window.location.toString(),
}
}; // NOW you can reference lbp by name
lbp.defaults = {
creditText: lbp.page.theURL
};

You just can't, your lbp variable is not defined since the last parenthesis of the declaration is closed.

I would guess that the contents of the object you are defining are being interpreted before the value is assigned to the lbp variable. I don't think there's any way to do what you want without assigning the values in a separate instruction.
var lbp = {};
// Pertinant page properties, such as Author, Keywords, URL or Title
lbp.page = { theURL: window.location.toString() };
// Configurable user defaults
lbp.defaults = { creditText: lbp.page.theURL };