Develop Reference

Javascript Protractor - Seeing outside functions as undefined

In specs/Test.js is a test definition: "regex2"
In pages/TablePage.js is a page object
in regex2 there is a try to use a function from TablePage.js
it('regex2', function(){
table_page.matchPriceRegex(table_page.workingBalanceField)
});
it is saying table_page.matchPriceRegex is not a function
The function itself from TablePage.js:
var TablePage = (function () {
function TablePage() {
this.workingBalanceField = element(By.xpath('//*[#id="root"]/main/section/div/div/div[5]/div/div[1]'));
}
TablePage.prototype.matchPriceRegex = function (locator) {
this.text = locator.getText();
expect(this.text).toMatch("\d{0,3}?,?\d{0,3}?\.?\d{0,3}?");
};
});
module.exports = TablePage;
The require's are incorporated with the spec file so it should see it
var TablePage = require("./../pages/TablePage");
var table_page = new TablePage();
var protractor = require("protractor");
var jasmine = require("jasmine-node");
var browser = protractor.browser;
var number = 0;
When in my IDE(WebStorm) I hold ctrl and click on the function name it redirects me correctly, as it sees it
The typeof the functions or variables form TablePage is undefined
Do you know where is the problem?

The error comes from TablePage.js, it should be.
var TablePage = (function () {
function TablePage() {
this.workingBalanceField = element(By.xpath('//*[#id="root"]/main/section/div/div/div[5]/div/div[1]'));
}
TablePage.prototype.matchPriceRegex = function (locator) {
this.text = locator.getText();
expect(this.text).toMatch("\d{0,3}?,?\d{0,3}?\.?\d{0,3}?");
};
return TablePage; // return the class as outer function return value
})();
// `(function(...){})` return a function, you should use `()` to execute the
// return function to get the returned class: TablePage.
module.exports = TablePage;

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?

Function inside an object gets wrong context

I have a constructor:
var ProfileDialog = function (containerObj) {
this.init = function () {
this.container = containerObj;
let content = document.createElement('div');
content.innerText = 'Dialog here';
this.container.appendChild(content);
this.container.style.display = 'none';
};
this.init();
};
Then I am extending the prototype of the constructor like this:
ProfileDialog.prototype.open = function () {
this.container.style.display = 'block';
}
var dlg = new ProfileDialog(document.body)
dlg.open();
This works fine, but if I try to put .open() inside an object like this:
ProfileDialog.prototype.actions = {
open: function () {
this.container.style.display = 'block';
}
}
var dlg = new ProfileDialog(document.body)
dlg.actions.open();
It fails with an error
functional.js:25 Uncaught TypeError: Cannot read property 'style' of undefined(…)
because of the wrong context passed to the function.
How do I make sure that independently of the nesting, context would be always the instantiated object?

Can you try binding 'this' to actions.open

Maybe you save this to that before and take it as a closure for the init function.
var ProfileDialog = function (containerObj) {
var that = this;
this.init = function () {
that.container = containerObj;
let content = document.createElement('div');
content.innerText = 'Dialog here';
that.container.appendChild(content);
that.container.style.display = 'none';
};
this.init();
};

Cannot init an object in jquery document.ready

I have an javascript object named concept:
function concept() {
this.ConceptId = 0;
this.Name = "";
}
I am trying to initiate it in jQuery document.ready:
$(document).ready(function() {
var concept = new concept;
});
It returns an error:
Uncaught TypeError: concept is not a constructor
If I move the object inside the document.ready, it is working.
$(document).ready(function() {
function concept() {
this.ConceptId = 0;
this.Name = "";
}
var concept = new concept;
});
I am still new on javascript, as far as I understood document.ready is run when DOM is completed. I don't understand why it cannot access the object which is defined out of the document.ready scope.
Here it is the fiddle: https://jsfiddle.net/49rkcaud/1/

The issue is because you're redefining concept. You just need to change the name of the variable:
$(document).ready(function() {
var foo = new concept; // change the variable name here
alert(foo.ConceptId); // = 0
});
function concept() {
this.ConceptId = 0;
this.Name = "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this:
Jsfiddle: https://jsfiddle.net/3w284mcs/
$(document).ready(function() {
var concept = function() {
this.ConceptId = 0;
this.Name = "";
}
var concept_obj = new concept();
alert(concept_obj.ConceptId);
});

You just need to change variable name where call this function.
Answer
$(document).ready(function() {
/*function concept() {
this.ConceptId = 0;
this.Name = "";
}*/
var concept1 = new concept;
alert(concept1.ConceptId);
});
function concept() {
this.ConceptId = 5;
this.Name = "";
}
Better Approach
You should create object of function using ()
var objConcetp = new concept();
Also use constructor rather than directly assigning values. Your function look like:
$(document).ready(function(){
var oConcept = new concept(1, "YourName");
});
function concept(conceptId, name){
this.ConceptId = conceptId;
this.Name = name;
}

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.