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.
Related
I'm learning javascript.
I have this code...
var test = new function () {
var vars = {
$hub: null
};
var init = function () {
vars.$hub = $.connection.blabla;
};
return {
vars: vars,
init: init,
$hub: vars.$hub
};
};
$(document).ready(function () {
test.init();
test.vars.$hub..... // Works perfecetly
test.$hub..... // Doesn't work - test.$hub is null
});
I don't get why test.$hub is null when test.vars.$hub isn't null?
Thanks
You should use Object directly with getter on $hub:
var test = new function() {
return {
vars: {
$hub: null
},
init: function () {
this.vars.$hub = 'something';
},
get $hub() {
return this.vars.$hub;
}
}
};
$(document).ready(function () {
console.log(test.$hub) // before init
test.init();
console.log(test.vars.$hub) // Works perfecetly
console.log(test.$hub) // Works too!!!
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
vars (and $hub: null) is defined within the scope of Function test whereas test.$hub is not defined.
If you wrote:
var test = new function () {
var $hub = null;
var vars = {
$hub: null
};
var init = function () {
vars.$hub = $.connection.blabla;
};
return {
vars: vars,
init: init,
$hub: vars.$hub
};
};
You can now access the value of test.$hub as null.
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?
i've a problem with click event on KnockoutJS.
When I click the icon that should call the function to open the pop-up, or rather when I load the page I get the following error
knockout-3.2.0.js:63 Uncaught ReferenceError: Unable to process binding "click: function (){return showOfferDetails }"
Message: showOfferDetails is not defined
i call this function in:
<div title="<spring:message code="frontendResources.Details" />" class="btn-bar btn-details" data-bind="click: showOfferDetails"></div>
The js code of the ViewModel is:
(function(viewModels) {
var viewModel = function(offerID) {
var self = this;
this.pageStates = {
view: 0,
showDetails: 2
};
this.showOfferDetails = ko.observable(null);
this.pageState = ko.observable(this.pageStates.view);
this.offerCredit = ko.observable(null);
this.currentItemToShow = ko.observable(null);
this.hasResults = ko.observable(true);
this.tabViewModel = new TabViewModel();
this.loadData = function () {
backoffice.viewModels.ajaxOverlay.showLoader();
self.showOfferDetails();
};
this.showOfferDetails = function () {
backoffice.viewModels.ajaxOverlay.showLoader();
self.pageState(self.pageStates.showDetails);
backoffice.viewModels.ajaxOverlay.hide();
};
this.hideDetails = function () {
self.currentItemToShow(null);
self.pageState(self.pageStates.view);
}
this.detailsIsVisible = ko.computed({
read: function () {
return self.pageState() == self.pageStates.showDetails;
},
write: function (value) {
if (value) {
self.showOfferDetails();
} else {
self.hideDetails();
}
}
});
this.loadData();
};
viewModels.offerCredit = viewModel;
})( backoffice.viewModels );
What could be the problem?
At viewmodel construction you keep a reference to this in the self variable:
var self = this;
but you're not using this self variable for all of the viewmodel's observables or functions. Instead they are assigned to the possibly changing this reference leading to the "is not defined" error message.
Try setting the observables and functions to the self variable:
self.showOfferDetails = function () {
backoffice.viewModels.ajaxOverlay.showLoader();
self.pageState(self.pageStates.showDetails);
backoffice.viewModels.ajaxOverlay.hide();
};
Playing around with some JS tests and I'm trying to instantiate some nested objects in my v namespace. As you'll see below, ClassA and ClassB work as expected. When I try and nest some objects under another property (myCustomProperty) I start running into issues! Could someone explain?
Below is the original code:
var v = (v) ? v : {};
v.someClassA = (function() {
this.hello = function() {
console.log("Class A Hello!");
}
});
v.someClassB = (function() {
this.hello = function() {
console.log("Class B Hello!");
}
});
// this all works!
var myClassA = new v.someClassA();
var myClassB = new v.someClassB();
v.myCustomProperty = (function() {
function someClassC() {
this.hello = function() {
console.log('C');
}
}
function someClassD() {
this.hello = function() {
console.log('D');
}
}
return {
someClassC: someClassC,
someClassD: someClassD
}
});
// Uncaught TypeError: v.myCustomProperty.someClassC is not a function! Why?
var myClassC = new v.myCustomProperty.someClassC();
var myClassD = new v.myCustomProperty.someClassD();
myClassA.hello();
myClassB.hello();
myClassC.hello();
myClassD.hello();
If I change my declaration of v.myCustomProperty to use object literal notation, then it ALL WORKS! :
v.myCustomProperty = {
someClassC: function() {
this.hello = function() {
console.log('C');
}
},
someClassD: function() {
this.hello = function() {
console.log('D');
}
}
}
I guess my question really is how would I make this work using the notation in my original snippet? Possible? Horrible practice to do it that way?
Thanks!
v.myCustomProperty is a function that returns an object. You have to call the function first:
new (v.myCustomProperty().someClassC)();
// ^^
Otherwise, v.myCustomProperty.someClassC() tries to access the property someClassC of the function, and we all know (hopefully) that functions don't have such a property.
Or maybe you intended to execute the function immediately and assign the object to myCustomProperty?
v.myCustomProperty = (function() {
// ...
}()); // <- call function
I have a var:
var main= {
init: function (model) { // model is an object
test.init();
main.model = model;
}
}
var test = {
init: function () {
**Solved** my problem is when i loged it, what i actualy did was:
console.log('result:' + main.model);
//and it failed to concrate string with object
}
}
'main.model' is not found.
How can i access an object from 'main' in 'test'?
Edit
The actual code calling main.init() is within the cshtml:
$(document).ready(function () {
var model = #Html.Raw(Json.Encode(Model))
main.init(model);
});
main.model is actually undefined. The main.model object doesn't exist until you actually invoke the main.init() function.
var main = {
init: function () {
main.model = 'model';
}
}
var test = {
init: function () {
console.log(main.model);
}
}
main.init()
test.init()
Edit: Same story.
var main= {
init: function (model) { // model is an object
main.model = model;
}
}
var test = {
init: function () {
console.log(main.model.foo); //<--- I get [object Object]
}
}
main.init({foo:'bar'})
test.init()