We Keep Coding

How to Add a popover in a specific sale order line column, in the xml view? Using One2ManyListView js inheritance?

I want to show a popover in a specific sales order line column, like shown in the first screenshot here : https://ibb.co/n0FP1Jf
I tried to show a popover by inheriting the Javascript class FieldOne2Many and One2ManyListView, this trick is working with FormView inheritence but the same code dosen't work with the One2ManyListView as showing in the code and the screenshot below:
CODE WORKING WITH "FormView" :
odoo.define("saleorderline_on_hover.ListView", function (require) {
"use strict";
var ListView = require("web.ListView");
var KanbanView = require("web_kanban.KanbanView");
var FormView = require("web.FormView");
var instance = openerp;
var core = require('web.core');
FormView.include({
do_show: function () {
if (this.dataset.model == 'sale.order'){
this.$el.find('tr').popover(
{
'content': function(e){
return '<p>SHOW INFORMATION HERE</p>'
},
'html': true,
'placement': function(c,s){
return $(s).position().top < 200?'bottom':'top'
},
'trigger': 'hover',
});
}
return this._super();
}
});
});
The Result of this code is the Popover shown in the screenshot here : https://ibb.co/r7bxSzq
THE SAME CODE NOT WORKING WITH "FieldOne2Many" and "One2ManyListView" :
odoo.define("saleorderline_on_hover.ListView", function (require) {
"use strict";
var ListView = require("web.ListView");
var KanbanView = require("web_kanban.KanbanView");
var FormView = require("web.FormView");
var instance = openerp;
var core = require('web.core');
var FieldOne2Many = core.form_widget_registry.get('one2many');
FieldOne2Many.include({
init: function() {
this._super.apply(this, arguments);
var One2ManyListView = this.x2many_views.list;
One2ManyListView.include({
do_show: function () {
this.x2m.$el.find('tr').popover({'content': function(e){
return '<p>SHOW INFORMATION HERE</p>'},
'html': true,
'placement': function(c,s){
return $(s).position().top < 200?'bottom':'top'
},
'trigger': 'hover',
});
}
return this._super();}
});
}
});
});
The problem here is that I can't find the "tr" or "td" element in "this.x2m.$el" by the method .find() or I'm missing something, can you please enlighten me on the subject, Thanks

jQuery - Trigger a function

I am trying to trigger a function from a html file that is located in another function in js file. I am trying to use the trigger method but i cannot make it to work.
Any suggestions how to do this? FIDDLE
<div id="result4" style="color:white; background:black">
from function
</div>
<script>
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');
</script>
JS
function test(args) {
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
}

Looking at the console log, your fiddle has an error:
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
$this is not defined.
and looking at the documentation for trigger:
http://api.jquery.com/trigger/
you are invoking it wrong. You are creating your own object that does not have a trigger method.

You need to define $this and return it as the object for test since trigger is a jquery function and not a native JavaScript Object function.
function test(args) {
var $this = $(this); // declare $this
var default_options = {
breakingPoint: 2000
};
var options = $.extend({}, default_options, args);
$("#result1").html(options.type);
$("#result2").html(options.file);
$("#result3").html(options.breakingPoint);
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
return $this;
}
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');

Wrap you tag code in jquerys ready event. This will execute it once the DOM is loaded instead of as it is parsed.
Maybe this is what you're looking for:
<script>
$(document).ready(function(){
var TEST = test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.reset();
});
</script>
In JS File
var test = function(options){
var that = {};
// you can use type, file & breaking point with option.type options.file etc..
that.reset = function() {
$("#result4").html("new text");
console.log("OK");
};
return that;
};

how to pass the event (to access data-attribute) when clicking link in Backbone router

I have routes like this in a Backbone app
link
link
If I click on the links, only the path (and not the data-attribute) is passed to the Backbone router try it on this js fiddle.
Question: is there a way to make the data-attribute available when the link is clicked in this situation?
var R = Backbone.Router.extend({
routes:{
"": "list",
"restaurants/:id": "restoDetails",
"2015/*splat": "matchAnything"
},
matchAnything: function(e){
console.log("yeah, match", e)
},
restoDetails: function() {
console.log('restoDetails', arguments);
},
list: function() {
console.log('list', arguments);
}
});
$(document).on('click', 'a[href^="/"]', function(e){
e.preventDefault();
var href = $(e.currentTarget).attr('href');
Backbone.history.navigate(href, {trigger: true});
});
new R();
Backbone.history.start({pushState: true});
Update
You can see here in this fiddle that even with jQuery (as the first answer posted proposed)the data attribute is inaccessible because Backbone is not passing the event

Use jQuery data() function jQuery data
var info = $(e.currentTarget).data('info');
also you can use
$(this)
instead of
$(e.currentTarget)
Update
to get data-info inside function matchAnything following works
var R = Backbone.Router.extend({
routes:{
"": "list",
"restaurants/:id": "restoDetails",
"2015/*splat": "matchAnything"
},
matchAnything: function(e){
var info = lastElementClicked.data('info');
console.log(info, "info?");
},
restoDetails: function() {
console.log('restoDetails', arguments);
},
list: function() {
console.log('list', arguments);
}
});
var lastElementClicked;
$(document).on('click', 'a[href^="/"]', function(e){
e.preventDefault();
lastElementClicked = $(this)
var href = lastElementClicked.attr('href');
Backbone.history.navigate(href, {trigger: true});
});
new R();
Backbone.history.start({pushState: true});

Parameter in a jquery event

I want to pass an object called hotTraitement in parameters of an event .click of jquery. So I declare my object like this :
$(window).load(function(){
container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement});
});
And I'm trying to pass this object like this :
$('#submit_button_traitement').click(function({hotTraitement:hotTraitement})
{
console.log(hotTraitement);
});
But it's not working, hotTraitement is undefined.
Help please !

Try this.
Define the hotTraitement variable as global one.
$('#submit_button_traitement').click({hotTraitement:hotTraitement},function(e){
console.log(e.data.hotTraitement);
});
SIMPLE DEMO: FIDDLE
Update:
Try this way.
$(document).ready(function() {
var container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement
});
//...
$('#submit_button_traitement').click({
hotTraitement: hotTraitement
}, function(e) {
console.log(e.data.hotTraitement);
});
});

why you want to pass hotTraitement parameter in onclick function instead you can simply access this inside your onclick even like this
$(window).load(function(){
container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement});
$('#submit_button_traitement').click(function(){
console.log(hotTraitement);
});
});

Try substituting $(document).ready() for $(window).load() ; utilizing .on() , data property of event
$(document).ready([
function() {
// define `hotTraitement`
hotTraitement = {
"abc": 123
};
},
function() {
// set `event.data` to `hotTraitement`
$("#submit_button_traitement")
.on("click", hotTraitement, function(event) {
// do stuff with `event.data` : `hotTraitement`
console.log(event.data)
})
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="submit_button_traitement">click</div>

calling a view from another view in Backbone

I have menu item that when clicked should open a chat panel that is part of a different view. Today is my first day looking at Backbone and im a little confused about how I can call a function on another view when the element is clicked.
I want something like the following on the menu view:
view.$('.wkVideoCall')
.on('click', function() {
wk.ui.videoChat.videoChatView.open();
wk.ui.videoChat.openForChatUser();
});
Where wk.ui.videoChat.videoChatView is the view that has .open() as a method.
But the above is not working, is there an event like change but for click that i can be using? or some sort of bind function?
I know have something like this:
View 1 (menu):
events: {
'click .wkVideoCall': 'openVideoChat'
},
openVideoChat: function() {
var videoChatView = new wk.ui.videoChat.videoChatView();
videoChatView.render();
},
View 2 (chat panel):
(function() {
var self = wk.ui.videoChat;
self.VideoChatView = Backbone.View.extend({
el: function() {
[0];
return wk.core.template.load('videoChatTmpl')[0];
},
initialize: function() {
var view = this,
model = view.model,
$el = view.$el;
.on('myEvent', this.open);
view.$('.wkUnmuteVideo')
.on('click', function() {
self.muteMyVideo(false);
});
view.$('.wkUnmuteAudio')
.on('click', function() {
self.muteMyAudio(false);
});
view.$('.wkOptions')
.on('focus', function() {
self.showOptions();
})
.on('blur', function() {
self.hideOptions();
});
},
render: function() {
console.log("inside");
}
});
})();
But nothing is logged

Basically when you click you should render or re-render a subview as muistooshort wrote.
This is a pretty good example : http://todomvc.com/examples/backbone/
And there is plenty of tutorials out there.