Hey all I have a question. I'm writing a small Js Object to make it easier for me to manage what page I'm on in order for me to be able to load proper scripts/styles per page. I am running into a situation that I just dont understand. I have a property currentPage that will obviously enough be set to the current page but if I just set it straight from another property I previously defined, it returns a reference error, but if I put it into a function that returns the same thing, it works. I'm not sure why that is. Can someone explain this to me? I'm not a hardcore JS Developer I just figure things out as I go, so is this something specific to JS? Here's a code sample of what I mean :
var self = PageInfo = {
locationArray : window.location.pathname.toString().split("/"),
printOutPath : function(){
console.log(self.locationArray.length);
},
//ref. error to locationArray
parentDirectory : self.locationArray[self.locationArray.length -3],
currentPage : function() {
return self.locationArray[self.locationArray.length -2]; // works
}
};
When you use JavaScript object literal syntax (creating an object with the curly braces {}) the values that go with each property are expressions that get evaluated at the moment the object is created. They can't reference properties of that same object because the object doesn't exist yet.
Note that within your object's methods you can use this instead of creating the self variable. As long as you call the methods using dot syntax like this:
PageInfo.currentPage()
...within the method this will automatically reference the object so you can do this:
var PageInfo = {
locationArray : window.location.pathname.toString().split("/"),
printOutPath : function(){
console.log(this.locationArray.length);
},
currentPage : function() { return this.locationArray[this.locationArray.length -2];}
};
alert( PageInfo.currentPage() );
Further reading: https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects
When you define an object, you can't refer to the object until it has been created. By using a function, you're delaying the lookup of self.locationArray until the object has been created.
Object is assigned to self and PageInfo only after the execution of the statement.
So do it after the statement.
var self = PageInfo = {
locationArray : window.location.pathname.toString().split("/"),
printOutPath : function(){
console.log(self.locationArray.length);
},
currentPage : function() { return self.locationArray[self.locationArray.length -2]; // works
}
};
self.parentDirectory = self.locationArray[self.locationArray.length -3];
It will update PageInfo also
Use this inside functions to make it more OO
var self = PageInfo = {
locationArray : window.location.pathname.toString().split("/"),
printOutPath : function(){
console.log(this.locationArray.length);
},
currentPage : function() { return this.locationArray[this.locationArray.length -2]; // works
}
};
self.parentDirectory = self.locationArray[self.locationArray.length -3];
You can also create a function to set parentDirectory
var self = PageInfo = {
locationArray : window.location.pathname.toString().split("/"),
printOutPath : function(){
console.log(this.locationArray.length);
},
parentDirectory:"",
setParentDirectory: function() {
this.parentDirectory = this.locationArray[this.locationArray.length -3];
},
currentPage : function() { return this.locationArray[this.locationArray.length -2]; }
};
self.setParentDirectory();
Related
What am I doing wrong, and how can one pass variables to a different function within the same wrapping variable/function.
Example:
function customFunctionWrap(){
this.myVar1 = 0;
this.getCurrentPosition = function(){
if (navigation.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){});
}
},
this.doSomething = function(){ // Works
//Do something, return
this.callWithParams(); //Works
},
//If I remove passing in 'value1',calling it elsewhere works
this.doSomethingWithParams = function(value1){
//Use value1
//Return
},
this.callWithParams = function(){
var value1 = 'xyz'; //Is a variable that changes based on some DOM element values and is a dynamic DOM element
this.doSomethingWithParams(value1); //THROWS TYPEDEF ERROR: this.doSomethingWithParams is not a function
this.getCurrentPosition();
}
};
var local = new customFunctionWrap();
local.doSomething(); //WORKS
I know there is another way to do it and then directly use customFunctionWrap.callWithParams(), but am trying to understand why the former approach is erroring out.
var customFunctionWrap = {
myVar1 : 0,
callWithParams : function(){
}
}
What JS sees:
var customFunctionWrap = (some function)()
returned function is fired, because the last (), so it has to yield/return something, otherwise, like in your code it is "returning" undefined.
So your given code does not work.
The very first fix is to delete last 2 characters from
var customFunctionWrap = (some function)()
to make it return constructor.
trying to get my head around objects, methods, closures, etc... in Javascript.
Can't see why this isn't working, some fundamental flaw in my thinking I guess. I'm expecting the val variable to be passed through to the addNote() function but it isn't. I thought that any variables declared outside of a function are available to that function, as long as they're not within another function. Is that not correct?
if(typeof(Storage) !== "undefined") {
console.log(localStorage);
var $input = $('#input'),
$submit = $('#submit'),
$list = $('#list'),
val = $input.val();
var noteApp = {
addNote : function(val) {
var item = val.wrap('<li />');
item.appendTo($list);
clearField();
},
clearField : function() {
$input.val = '';
},
delNote : function(note) {
}
};
$submit.on('click', function(){
noteApp.addNote();
});
} else {
}
I'm trying to learn how the pros manage to get their code so clean, concise and modular. I figured a note app would be a perfect start, shame I got stuck at the first hurdle...
Cheers.
There are several issues with the code in the question
defining an argument named val and not passing an argument to the function
when calling clearField() inside the object literal it's this.clearField()
You're only getting the value once, not on every click
val is a string, it has no wrap method
$input.val = ''; is not valid jQuery
I would clean it up like this
var noteApp = {
init: function() {
if (this.hasStorage) {
this.elements().events();
}
},
elements: function() {
this.input = $('#input');
this.submit = $('#submit');
this.list = $('#list');
return this;
},
events: function() {
var self = this;
this.submit.on('click', function(){
self.addNote();
});
},
hasStorage: (function() {
return typeof(Storage) !== "undefined";
})(),
addNote: function() {
this.list.append('<li>' + this.input.val() + '</li>');
this.clearField();
return this;
},
clearField: function() {
this.input.val('');
},
delNote : function(note) {
}
}
FIDDLE
Remember to call the init method
$(function() { noteApp.init(); });
In your call to addNote(), you don't pass any argument for the val, so it will be undefined:
noteApp.addNote();
// ^^ nothing
Pass the input (seems you want the jQuery object not the string value because of your val.wrap call):
noteApp.addNote($input);
When you declare the val in the function, it is scoped to that function and will only be populated if the function call passes a value for that argument. Even if you have another variable in an upper scope with the same name val, they are still differentiated. Any reference to val in the function will refer to the local val not the upper scope.
I get undefined whenever I get the value of a property of an object.
function run(id){
var report = services.getReportInfo(id);
var childReport = {
id: newGuid(),
parentId: report.id, // i get undefined
reportPath: report.path // i get undefined
};
...
}
services.js
angular.module('project.services').factory('services', function(){
var reports = [
{
....
},
{
....
}
];
function getReportInfo(id){
var report = reports.filter(function(element){
return element.id === id;
});
};
return{
getReportInfo: getReportInfo
};
}
Whenever I put breakpoint on my var report = services.getReportInfo(id) it could contains the correct values for each property of the my report object. However, when I get the report.id or report.path, I get undefined value.
--Edited--
Oh, I know now where I got wrong.
The getReportInfo function returns an array and I'm accessing the properties without telling from what index should it get the values for the said properties.
function run(id){
var report = services.getReportInfo(id);
var childReport = {
id: newGuid(),
parentId: report[0].id,
reportPath: report[0].path
};
...
}
I placed static index 0, since I know that the array will always have a length of 1.
You are not returning anything from the .factory method and the getReportInfo is also not returning anything. For what you are trying to do, try to use .service method:
angular.module('project.services').service('services', function(){
var reports = [
{
....
},
{
....
}
];
this.getReportInfo = function (id){
var report = reports.filter(function(element){
return element.id === id;
});
return report;
}
}
Here is a good explanation on how to use .factory and .service:
Confused about Service vs Factory
Two immediate issues with the code I can see:
1) Your factory function needs to return a value or constructor function. Right now your code is not initializing the factory to any value.
2) Your getReportInfo function also doesn't return a value, yet you are assigning the function result to a variable.
Read more here: http://docs.angularjs.org/guide/dev_guide.services.creating_services
My entire JavaScript library is constructed in an object literal namespace. It contains each page's logic from init() to common functions, controls, validation, etc. The page's init() function gets fired based on the page's body id.
The problem I have is in my controls section. I have an object literal named AddressEntry. This object literal contains the functionality that deals with my AddressEntry ASP.NET UserControl. It works just fine with one AddressEntry control on the page, but when there's more than one, only the last one on the page works as intended.
Here's my AddressEntry object literal (trimmed down to pertinent information):
SFAIC.ctrls.AddressEntry = {
inputs : {
city : undefined,
cityState : undefined,
hidden : {
city : undefined,
state : undefined
},
},
fn : {
root : undefined,
citySelected : function($ddl) {
var $selected = $ddl.find(":selected");
this.root.inputs.hidden.city.val($selected.val());
this.root.inputs.hidden.state.val($selected.text().split(", ")[1]);
}
},
init : function(addressId) {
var self = this,
fn = self.fn,
inputs = self.inputs,
hidden = inputs.hidden;
inputs.city = SFAIC.fn.getContentElement(addressId + "_ddlCity", SFAIC.$updatePanel);
inputs.cityState = SFAIC.fn.getContentElement(addressId + "_ddlCityStateLocked", SFAIC.$updatePanel);
hidden.city = SFAIC.fn.getContentElement(addressId + "_txtCity", SFAIC.$updatePanel);
hidden.state = SFAIC.fn.getContentElement(addressId + "_txtState", SFAIC.$updatePanel);
fn.root = this;
inputs.city.change(function() { fn.citySelected($(this)); });
inputs.cityState.change(function() { fn.citySelected($(this)); });
}
};
Then, the page object literal would look something like this (again, trimmed down):
SFAIC.pages.salesProcess.Applicant = {
init : function() {
SFAIC.ctrls.AddressEntry.init("AddressGarage");
SFAIC.ctrls.AddressEntry.init("AddressMailing");
}
};
It's obvious to me that AddressMailing init overrides the AddressGarage init. What can I do to objectify the SFAIC.ctrls.AddressEntry object literal to be able to handle as many AddressEntry UserControls that I may have on the page without them overriding each other?
An object literal is by definition a single instance of an object. Maybe you should be creating a object using prototypes that way you can create multiple instances of the same object.
A HACK would be to create a second object literal that is nearly the same but with a different name.
Here's the solution I came up with:
SFAIC.ctrls.AddressEntry = function(addressId) {
var ctrl = {
inputs : {
city : undefined,
cityState : undefined,
hidden : {
city : undefined,
state : undefined
},
},
fn : {
root : undefined,
citySelected : function($ddl) {
var $selected = $ddl.find(":selected");
this.root.inputs.hidden.city.val($selected.val());
this.root.inputs.hidden.state.val($selected.text().split(", ")[1]);
}
},
init : function(addressId) {
var self = this,
fn = self.fn,
inputs = self.inputs,
hidden = inputs.hidden;
inputs.city = SFAIC.fn.getContentElement(addressId + "_ddlCity", SFAIC.$updatePanel);
inputs.cityState = SFAIC.fn.getContentElement(addressId + "_ddlCityStateLocked", SFAIC.$updatePanel);
hidden.city = SFAIC.fn.getContentElement(addressId + "_txtCity", SFAIC.$updatePanel);
hidden.state = SFAIC.fn.getContentElement(addressId + "_txtState", SFAIC.$updatePanel);
fn.root = this;
inputs.city.change(function() { fn.citySelected($(this)); });
inputs.cityState.change(function() { fn.citySelected($(this)); });
}
};
ctrl.init();
return ctrl;
};
SFAIC.pages.salesProcess.Applicant = {
init : function() {
var garage, mailing;
garage = SFAIC.ctrls.AddressEntry("AddressGarage");
mailing = SFAIC.ctrls.AddressEntry("AddressMailing");
}
};
Well, I don't know if I'm late to post a possible solution, but here I go anyway.
I don't know your DOM structure or JS objects, but what I would do something like this:
Get the all DOM elements or JS objects of type AddressEntry, by some class or special attribute. You probably would have to change something elsewhere in order to achieve this.
Cycle each element and call the "init" function using "Call". That way each object or element would be bound to the initialization you are doing.
It would look something like this (not tested!!):
SFAIC.pages.salesProcess.Applicant = {
init : function() {
$('.addresses').each(function (i) {
SFAIC.ctrls.AddressEntry.init.call(this, this.attr('id'); });
}
};
The code might be bugged or lacking few more lines to make it work, but I think the idea is clear. Hope it helps and you can apply it to your case.
Ok I'm not sure the title of this post is the correct way to refer to what I mean and I'm pretty sure I already know the answer to this question but I just wanted some clarification.
If I have an oject like this
var myObj = {
settings : {
domObj = document.getElementById('elem1');
},
myFunc1 : function () {
return this.domObj;
},
myFunc2 : function () {
return this.domObj;
}
}
myObj.myFunc1();
myObj.myFunc2();
Is the domObj cached the first time it is accessed or is the dom traversed in both functions? I am attempting to access the Dom only once but not sure if this is a possible solution.
Assuming you really meant this:
var myObj = {
settings : function() {
domObj = document.getElementById('elem1');
},
myFunc1 : function() {
return this.domObj;
},
myFunc2 : function() {
return this.domObj;
}
};
the answer is that "domObj" is a global variable because you forgot the var keyword. Now, you may have meant this:
var myObj = {
domObj: null,
settings : function() {
this.domObj = document.getElementById('elem1');
},
myFunc1 : function() {
return this.domObj;
},
myFunc2 : function() {
return this.domObj;
}
};
in which case "domObj" is just a property of "myObj". It'd get set if you call
myObj.settings();
Assuming your doing "this.domObj =" and the other corrections you've noted; yes; the DOM element is cached in this.domObj. The only time the DOM is actually traversed is when you're calling DOM traversal methods. Assigning a DOM element to a variable/object property works exactly the same as any other assignment.