I want to override "update_wishlist_view" function which is defined under website_sale_wishlist module. Here is the function:
update_wishlist_view: function() {
if (this.wishlist_product_ids.length > 0) {
$('#my_wish').show();
$('.my_wish_quantity').text(this.wishlist_product_ids.length);
}
else {
$('#my_wish').hide();
}
}
How can i do that?
You could do it like this:
odoo.define('website_sale_wishlist_extension', function (require) {
"use strict";
var ProductWishlist = require('website_sale_wishlist.wishlist');
ProductWishlist.include({
update_wishlist_view: function() {
// execute your code after super call if apply
this._super.apply(this, arguments);
// execute your code before super call if apply
}
});
});
Related
I am using two functions that do the same thing but have different parent selectors. Unsure how to combine them into one function?
https://codepen.io/Kerrys7777/pen/gxxLdx
(function($) {
"use strict";
/*---SELECTED ITEM---*/
$(".entity-selectable").click(function() {
if(!$(this).hasClass('selected-item')) {
$('.entity-selectable').removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $(".periodicity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
});
/*---SELECTED ITEM---*/
$(".periodicity-selectable").click(function() {
if(!$(this).hasClass('selected-item')) {
$('.periodicity-selectable').removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $(".entity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
});
})(jQuery);
you can just make a combined function, and pass it this from click event handler of each class. In the new function just remove class from the siblings of current element. something like this:
(function($) {
"use strict";
function combinedFunction(element){
if(!$(element).hasClass('selected-item')) {
$(element).siblings().removeClass('selected-item');
}
$(element).toggleClass('selected-item');
if ($(".entity-selectable").hasClass("selected-item") && $(".periodicity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
}
/*---SELECTED ITEM---*/
$(".entity-selectable").click(function() {
combinedFunction(this);
});
/*---SELECTED ITEM---*/
$(".periodicity-selectable").click(function() {
combinedFunction(this);
});
})(jQuery);
Probably not the most extensible option, but a quick easy way is the following.
$(".entity-selectable").click(onClick);
$(".periodicity-selectable").click(onClick);
function onClick() {
var className = '';
if ($(this).hasClass('entity-selectable')) {
className = 'entity-selectable';
} else if ($(this).hasClass('periodicity-selectable')) {
className = 'periodicity-selectable';
}
if(!$(this).hasClass('selected-item')) {
$('.'+ className).removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $("." + className).hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
}
I found this JS code structure and I' wondering how to call the function move() from inside the function load:
JS
function Start(data) {
this.move= function() {
....
};
function load(){
// call move
}
}
function Start(data) {
var _this = this;
this.move = function() {
console.log('mode');
}
function load() {
_this.move();
}
// load();
}
Start();
new Start();
function Start(data) {
this.move = function() {
....
};
function load(obj) {
obj.move();
}
load(this);
}
This is a javascript closure. I've found this site to be helpful.
var move = function () {
alert("move");
};
load();
function load() {
move();
}
This code will alert Move only once.
The function Start() has to be instantiated as an object. So you would use:
function Start(data) {
this.move = function() {
....
};
this.load = function(){
// call move
this.move();
}
}
var s = new Start(foobar);
s.load();
By using closures, that can be acheived by stroing the parent reference;
function Start(data) {
var me = this;
this.move= function() {
....
};
function load(){
me.move();// call move
}
}
Good Luck.
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}
I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.
I found this:
Javascript Event Synchronization
Im working on it but dont works for me, that my code, i dont know if i miss something or what:
var Login = function ()
{
var commons = new Commons();
this.init = function()
{
stepOne(stepTwo);
commons.init();
}
function stepOne(callback) {
var AsyncDone = function()
{
callback();
}
loadFiles(AsyncDone);
}
function loadFiles(callback)
{
$(".header-container").load("views/header.html");
$(".content-container").load("views/login.html");
callback();
}
function stepTwo() {
addEvents();
}
function addEvents() {
alert("is here");
$(".login-log").bind("click", function() { alert("fuck"); });
}
}
The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.
I know that have to be simple, but i dont find the solution.
Thanks in advice.
My final choose:
this.init = function()
{
loadHeader(addHeaderEvents);
loadTemplate(addTemplateEvents);
loadFooter(addFooterEvents);
commons.init();
}
function loadHeader(callback) {
$(".header-container").load("views/header.html", function() {
callback();
});
}
function addHeaderEvents() {
}
function loadTemplate(callback) {
$(".content-container").load("views/template_login.html", function() {
callback();
});
}
function addTemplateEvents() {
alert("llega");
$(".login-log").bind("click", function() { alert("done"); });
}
function loadFooter(callback) {
$(".footer-container").load("views/footer.html", function() {
callback();
});
}
function addFooterEvents() {
}
I have a variable name that I pass into a plugin, but the variable is actually a function.
I use jquery $.isFunction to check if it is a function, and if it is, it should execute the function.
But I can't seem to make it work, I put some examples in jsfiddle:http://jsfiddle.net/tZ6U9/8/
But here is a sample code:
HTML
<a class="one" href="#">click</a><br />
<a class="two" href="#">click</a><br />
<a class="three" href="#">click</a><br />
JS
$(document).ready(function() {
help = function(var1) {
alert(var1);
}
function help2(var1) {
alert(var1);
}
$('a.one').click(function() {
var functionName = "help";
if ($.isFunction([functionName])) {[functionName]("hello");
} else {
alert("not a function");
}
return false;
});
$('a.two').click(function() {
var functionName = "help";
if ($.isFunction(functionName)) {
functionName("hello");
} else {
alert("not a function");
}
return false;
});
$('a.three').click(function() {
var functionName = "help2";
if ($.isFunction(functionName)) {
functionName("hello");
} else {
alert("not a function");
}
return false;
});
$('a.four').click(function() {
var functionName = "help2";
if ($.isFunction([functionName])) {[functionName]("hello");
} else {
alert("not a function");
}
return false;
});
});
As you can see, I tired a bunch of things, but all the wrong ones probably...
I inspired some of them from: jQuery - use variable as function name
Overall
I'm passing a variable that has the same name as a function, using jquery to check if it is a function, if it is, it should execute the function.
Thanks in advance for your help.
If you are wanting to call a function by a string of its name just use window.
var functionName = "help";
if ($.isFunction(window[functionName])) {
window[functionName]("hello");
} else {
alert("not a function");
}
You can use the following to invoke functions that are defined in the window/global scope, such as the function help:
if ($.isFunction(window[functionName])) {
window[functionName]("hello");
}
help2, on the other hand, is not accessible this way since you are defining it in a closure. A possibile solution is to define the function outside of the .ready() handler. Then, you can use window[functionName] to call it:
var namespace = {
help: function (var1) {
alert(var1);
},
help2: function (var1) {
alert(var1);
}
}
$(document).ready(function() {
var functionName = "help";
if ($.isFunction(namespace[functionName])) {
namespace[functionName]("hello");
}
});
DEMO.
Check Fiddle for the working example.
Example have only one link working. make other links similarly.
Edit: after first comment
HTML
<a class="one" href="#">click</a><br />
JS
var help = function(var1) {
alert(var1);
}
$(document).ready(function() {
$('a.one').click(function() {
var functionName = help;
if ($.isFunction(functionName)) {
functionName('test');
} else {
alert("not a function");
}
return false;
});
});