Develop Reference

Passing object to a function and accessing its properties in JavaScript

I am new to prototype model coding in JavaScript.
I am trying to access properties($owl_nav and $owl_dots) of an object(elements) by passing the object to a function(setOverflowWrapperHeight), in code
function setOverflowWrapperHeight(elem) {
var owl_dots_height = elem.$owl_dots.height();
var owl_nav_height = elem.$owl_nav.height();
$('.overflow-wrapper').height(owl_dots_height + owl_nav_height + 150);
}
function NextQ(elements) {
this.checked_input = elements.checked_input;
this.$owl_ques_carousel = elements.$owl_ques_carousel;
this.$owl_nav = elements.$owl_nav;
this.$owl_dots = elements.$owl_dots;
this.init();
}
NextQ.prototype.init = function () {
this.bindEvents();
};
NextQ.prototype.bindEvents = function () {
var _this = this;
this.$owl_ques_carousel.on('click', '.nutrition_assessment_next_quest', function (event) {
_this.$owl_ques_carousel.on('translated.owl.carousel', function (event) {
setOverflowWrapperHeight(elements);
});
});
$(function () {
var $user_meta_div = $('div.user_meta_data_div');
setOverflowWrapperHeight($user_meta_div);
/***** NextQ Object *****/
elements = {
$owl_ques_carousel: $('.owl-carousel#ques-carousel'),
checked_input: true,
$owl_nav: $('.owl-nav'),
$owl_dots: $('.owl-dots')
};
/***** Create instance of NextQ Function *****/
nextQ = new NextQ(elements);
});
But the console outputs this error:
Uncaught TypeError: Cannot read property 'height' of undefined
I want to know if this is even legal. If yes, where am I going wrong?

Error testing this function

I want to write a unit test for this function with Jasmine:
getState: function () {
var $selectState = this.$('#selectState:visible');
if ($selectState) {
return $selectState.val();
}
return null;
},
I wrote this test:
describe("function getType", function(){
it("should return value", function() {
var obj = {val: function(){return 'ok';}};
var spy1 = jasmine.createSpy("spy1").and.callFake(
function() {
return obj;
}
);
var dollar = $;
$ = spy1;
expect(view.getType()).toEqual('ok');
$ = dollar;
});
});
In my oppinion it should work, but it does not. This is the error message:
Expected undefined to equal 'ok'.
Does anybody know what the problem could be?

I solved the problem. this.$ seems to be different from $, thus changing the test function like this solved the problem:
describe("function getState", function(){
it("should return value", function() {
var obj = {val: function(){return 'ok';}};
var spy1 = jasmine.createSpy("spy1").and.returnValue(obj);
var dollar = view.$;
view.$ = spy1;
expect(view.getState()).toEqual('ok');
view.$ = dollar;
});
});

Javascript TypeError: this.init is not a function Error

This is my Javascript code
Html5Template_300x250 = function(config) {
this.config = config;
var self = this;
this.init();
Html5Template_300x250.prototype = {
// Function That Creates Element Var
d: function(id) {
return document.getElementById(id);
},
// Initialize DCO HTML5 template
init: function() {
alert("test1");
this.startAd();
},
startAd: function() {
alert("test2");
}
};
}
From the HTML file i am creating method like this
var sr_Config = {
bgColor:'#fff',
ctaText:'Learn More',
border: 'true'
};
var Html5Template = new Html5Template_300x250(sr_Config);
But i am getting Error
TypeError: this.init is not a function this.init();
I am not sure what is wrong here i have also tried self.init() but still it is not working.
I am new to javascript and learning OOPS in Javascript if anyone can tell me what i am doing wrong here that would be great. Thanks in advance

You need to assing the methods to the prototypes properties (at least thats how i do it). You also need to do so before you call the function (above).
Html5Template_300x250 = function(config) {
this.config = config;
var self = this;
Html5Template_300x250.prototype.d = function(id) {
return document.getElementById(id);
};
Html5Template_300x250.prototype.startAd = function() {
alert("test2");
};
// Initialize DCO HTML5 template
Html5Template_300x250.prototype.init = function() {
alert("test1");
this.startAd();
};
self.init();
}
Another way to do this w/o the prototype-stuff would be sth. like that:
Html5Template_300x250 = function(config) {
this.config = config;
var self = this;
this.d = function(id) {
return document.getElementById(id);
};
// and so on..
self.d('myid');
}
See this working fiddle with some sample code.
Further interesting reading on the topic OOP in JS is provided by JS-Guru Douglas Crocford ;)

Error to create namespace in jquery

I had write a code in js file
(function ($) {
var $r = $.loadaccess;
jQuery.loadaccess.page.user = {
init: function () {
debugger;
var k = 'dd';
alert(k);
}
};
})(jQuery);
var user = jQuery.loadaccess.page.user;
and I am calling it on .aspx page
$(document).ready(function () {
jQuery.loadaccess.page.user.init();
});
but it thrown error for me
"Microsoft JScript runtime error: Unable to get value of the property 'page': object is null or undefined"
on this
jQuery.loadaccess.page.user = {
init: function () {
debugger;
var k = 'dd';
alert(k);
}
};

The error is pretty self descriptive, jQuery.loadaccess is null or undefined. What do you expect jQuery.loadaccess to be? You will need to create this 'namespace' yourself. For example:
jQuery.loadaccess = {
page: {
user: {
init: function () {
debugger;
var k = 'dd';
alert(k);
}
}
}
};
I wouldn't suggest adding objects to the jQuery object though, rather create your own top level namespace.

In javascript, how do I call a class method from another method in the same class?

I have this:
var Test = new function() {
this.init = new function() {
alert("hello");
}
this.run = new function() {
// call init here
}
}
I want to call init within run. How do I do this?

Use this.init(), but that is not the only problem. Don't call new on your internal functions.
var Test = new function() {
this.init = function() {
alert("hello");
};
this.run = function() {
// call init here
this.init();
};
}
Test.init();
Test.run();
// etc etc

Instead, try writing it this way:
function test() {
var self = this;
this.run = function() {
console.log(self.message);
console.log("Don't worry about init()... just do stuff");
};
// Initialize the object here
(function(){
self.message = "Yay, initialized!"
}());
}
var t = new test();
// Already initialized object, ready for your use.
t.run()

Try this,
var Test = function() {
this.init = function() {
alert("hello");
}
this.run = function() {
// call init here
this.init();
}
}
//creating a new instance of Test
var jj= new Test();
jj.run(); //will give an alert in your screen
Thanks.

var Test = function() {
this.init = function() {
alert("hello");
}
this.run = function() {
this.init();
}
}
Unless I'm missing something here, you can drop the "new" from your code.