Can't get two functions to initialize each other - javascript

function funcA() {
var fB;
function init() {
fB = new funcB(false); //error here
}
init();
}
function funcB(usefuncA) {
var fA;
function init() {
if (usefuncA) fA = new funcA();
}
init();
}
$(function() {
var test = new funcB(true);
});
I know how to get around this problem in C++, but no idea what tricks there are to fix it in javascript. There is a way, though, right? I absolutely must have each function in the other, and the only other alternative I can think of is putting the contents of funcB in its own .js file then using PHP to create two versions of funcB, one for funcA to use and one in current place of funcB. But that's ridiculous...

This code (your original code, minus the unneeded call to jquery) works fine for me. There's no error.
You can run it here (take a look at the console).
function funcA() {
var fB;
function init() {
fB = new funcB(false); //error here
}
init();
}
function funcB(usefuncA) {
var fA;
function init() {
if (usefuncA) fA = new funcA();
}
init();
}
var test;
test = new funcA();
console.log(test);
test = new funcB();
console.log(test);
test = new funcB(true);
console.log(test);
​

You need to avoid the infinite loop.
function funcA(B) {
var fB;
var that = this;
function init() {
fB = B || new funcB(that);
}
init();
}
function funcB(A) {
var fA;
var that = this;
function init() {
fA = A || new funcA(that);
}
init();
}
$(function() {
var test = new funcB();
});​

(function (testFuncA, $, undefined) {
testFuncA.init = function(caller) { // do stuff },
} (window.testFuncA= window.testFuncA|| {}, jQuery));
(function (testFuncB, $, undefined) {
testFuncB.init = function() { testFuncA.init(this); },
} (window.testFuncB= window.testFuncB|| {}, jQuery));
Do you mean something like this?

function funcA() {
var fB;
this.init = function() {
fB = new funcB(false); //error here
}
}
function funcB(usefuncA) {
var fA;
this.init = function init(usefuncA) {
if (usefuncA) fA = new funcA();
}
}
$(function() {
var test = new funcB();
test.init(true);
});

Is it maybe this what you are looking for?
FuncA = function () {
var fB; this.init(); };
FuncA.prototype.init = function () {
this.fB = new FuncB(false); };
FuncB = function (usefuncA) {
var fA; this.init(usefuncA); };
FuncB.prototype.init = function (usefuncA) {
var fA; if (usefuncA) { this.fA = new FuncA(); } };
var test = new FuncB(true);

Related

How to call the function when click on button odoo

How to call the function when click on button. I created the button and print (hello on console). It will print but when I define the function for simple addition of two number then it gives error.
I used the following code:
var FormCustomControllerMixin = {
init: function (parent, model, renderer, params) {
this.importEnabled = params.importEnabled;
},
_getLocation : function(){
var a=10;
var b=20;
var c= a+b;
console.log(c);
},
_bindImport: function () {
if (!this.$buttons) {
return;
}
var self = this;
this.$buttons.on('click', '.o_button_custom_form', function () {
console.log('Hello');
a=self._getLocation();
console.log(a);
});
}
};
Hello is print but addition is not perform.
Have you tried like this?
a=_getLocation();
I gotted the solution getlocation function does not work inside FormCustomCOntrollerMixin.
var a = function getLocation () {
var a=10;
var b=20;
var c= a+b;
console.log(c);
return
}
var FormCustomControllerMixin = {
init: function (parent, model, renderer, params) {
this.importEnabled = params.importEnabled;
}
},
_bindImport: function () {
if (!this.$buttons) {
return;
}
var self = this;
debugger;
this.$buttons.on('click', '.o_button_custom_form', function () {
var b = a();
});
}
};

Is it possible to unit-test this javascript structure?

Given the following JavaScript structure:
addClickEvent: function() {
element.addEventListener('click', function() {
self.a();
self.b();
});
},
Is it possible to assert that a() and b() have been called without refactoring out the anonymous function or editing it's contents?
Assuming the self in your code is the window.self property.
You could do something like this:
function element_onclick_callsAandB() {
// Arrange
var aCalled = false;
var bCalled = false;
var element = ...;
var origA = self.a;
var origB = self.b;
self.a = function() {
aCalled = true;
origA();
};
self.b = function() {
bCalled = true;
origB();
};
try {
// Act
element.click();
// Assert
assertTrue(aCalled);
assertTrue(bCalled);
}
finally {
self.a = origA;
self.b = origB;
}
}

jquery object - function undefined error

In the following function, my objects inside floatShareBar function is undefined. Do I have to init or define a var before the functions? it throws me js error : .float - function undefined.
(function($) {
.
.
.
$("body").on("ab.snap", function(event) {
if (event.snapPoint >= 768) {
floatShareBar.float()
} else {
floatShareBar.unfloat();
}
});
var floatShareBar = function() {
var fShareBar = $('#article-share');
this.float = function() {
console.log(
};
this.unfloat = function() {
console.log("unfloat");
};
};
.
.
.
})(jQuery);
You need to get an instance of that function with a self instantiating call:
var floatShareBar = (function() {
var fShareBar = $('#article-share');
this.float = function() {
console.log('float');
};
this.unfloat = function() {
console.log("unfloat");
};
return this;
})();
UPDATE 1: I modified it to create an object within the function to attach those functions to, since in the previous example this refers to the window object
var floatShareBar = (function() {
var fShareBar = $('#article-share');
var instance = {};
instance.float = function() {
console.log('float');
};
instance.unfloat = function() {
console.log("unfloat");
};
return instance;
})();
UPDATE 2: You can actually just use the new keyword as well, look here for more info
var floatShareBar = new (function() {
var fShareBar = $('#article-share');
this.float = function() {
console.log('float');
};
this.unfloat = function() {
console.log("unfloat");
};
})();
Change you function to this:
$("body").on("ab.snap", function(event) {
if (event.snapPoint >= 768) {
(new floatShareBar()).float()
} else {
(new floatShareBar()).unfloat();
}
});
function floatShareBar () {
var fShareBar = $('#article-share');
this.float = function() {
console.log(
};
this.unfloat = function() {
console.log("unfloat");
};
};
you should declare functions when using var before you call them.

Extend prototype with another prototype

How can I extend prototype A with prototype B, so whenever I call prototype A, both will be executed?
var Helper = function() {
}
Helper.prototype.resizer = function() {
$('body').append(' Window resized ');
}
var Something = function() {
// Extend Helper.resizer with Something.anything
// extend(Helper.resizer, this.anything);
}
Something.prototype.anything = function() {
$('body').append(' Run this on resize to ');
}
var help = new Helper();
var some = new Something();
$(window).on("resize", function(){
help.resizer();
});
Made an example at codepen:
http://codepen.io/robbue/pen/892c8f61e1b5a970d6f694a59db401a6
jQuery allowed, or just vanilla.
I don't really understand your question because prototypes are not executed, but I think you want something like this:
var Helper = function() {}
Helper.prototype.resizer = function() {
$('body').append(' Window resized ');
}
var Something = function(h) {
var oldresizer = h.resizer,
that = this;
h.resizer = function() {
var res = oldresizer.apply(this, arguments);
that.anything();
return res;
};
}
Something.prototype.anything = function() {
$('body').append(' Run this on resize to ');
}
var help = new Helper();
new Something(help);
$(window).on("resize", function(){
help.resizer();
});
or that:
function Helper() {}
Helper.prototype.resizer = function() {
$('body').append(' Window resized ');
}
function Something() { // inherits Helper
Helper.apply(this, arguments);
}
Something.prototype = Object.create(Helper.prototype);
Something.prototype.anything = function() {
$('body').append(' Run this on resize to ');
};
Something.prototype.resizer = function() {
Helper.prototype.resizer.call(this);
this.anything();
};
var help = new Something(help);
$(window).on("resize", function(){
help.resizer();
});

Accessing a function within a function from outside in javascript

I have a nested function that I want to call from outside.
var _Config = "";
var tourvar;
function runtour() {
if (_Config.length != 0) {
tourvar = $(function () {
var config = _Config,
autoplay = false,
showtime,
step = 0,
total_steps = config.length;
showControls();
$('#activatetour').live('click', startTour);
function startTour() {
}
function showTooltip() {
}
});
}
}
function proceed() {
tourvar.showTooltip();
}
$(document).ready(function () {
runtour();
});
I was hoping to call it by tourvar.showTooltip(); but I seem to be wrong :) How can I make showTooltip() available from outside the function?
since my previous answer was really a hot headed one, I decided to delete it and provide you with another one:
var _Config = "";
var tourvar;
// Module pattern
(function() {
// private variables
var _config, autoplay, showtime, step, total_steps;
var startTour = function() { };
var showTooltip = function() { };
// Tour object constructor
function Tour(config) {
_config = config;
autoplay = false;
step = 0;
total_steps = _config.length;
// Provide the user with the object methods
this.startTour = startTour;
this.showTooltip = showTooltip;
}
// now you create your tour
if (_Config.length != 0) {
tourvar = new Tour(_Config);
}
})();
function proceed() {
tourvar.showTooltip();
}
$(document).ready(function () {
runtour();
});
function outerFunction() {
window.mynestedfunction = function() {
}
}
mynestedfunction();

Categories

Resources