How to override javascript function "_title_changed" in webclient odoo - javascript

My goal is to change the Page title using the company name. I am trying to change the function but still there's no effect. Any idea on how to achieve this?
var session = require('web.session');
var AbstractWebClient = require('web.AbstractWebClient');
AbstractWebClient.include({
_title_changed: function () {
this._super();
var company_name = session.user_companies.current_company[1];
document.title = company_name;
console.log('_title_changed function');
},
});

What I am lacking was odoo.define().
This is what I did:
odoo.define('my_module.AbstractWebClient', function (require) {
"use strict";
/**
* AbstractWebClient Override Method for Page Title
*/
var session = require('web.session');
var AbstractWebClient = require('web.AbstractWebClient');
AbstractWebClient.include({
_title_changed: function () {
this._super();
var company_name = session.user_companies.current_company[1];
document.title = company_name;
console.log('_title_changed function');
},
});
return AbstractWebClient;
});

Related

Datatable : click on button does not open view

I have a datatable which displays overview data correctly.
I added a button which should go to my controller and from there open a new view displaying the details of the selected row.
The click works, I arrive at the method on my controller. But my details view doesn't open.
This is my javascript:
$("#search-logs tbody").on('click', 'button', function () {
var self = this;
var tr = $(self).closest('tr');
var dtRow = datatable.row(tr[0]);
var rowData = dtRow.data();
var processId = rowData[0];
$.get("#Url.Action("Details","Logs")", { id: processId });
});
And this is the code in my controller:
[HttpGet]
public ActionResult Details(int id)
{
return View();
}
Can anyone tell me what I am doing wrong?
you can try:
$("#search-logs tbody").on('click', 'button', function () {
var self = this;
var tr = $(self).closest('tr');
var dtRow = datatable.row(tr[0]);
var rowData = dtRow.data();
var processId = rowData[0];
location.href = '#Url.Action("Details","Logs")?id='+ processId;
});
The problem with your code is that you are calling an ajax get function, that is returning a View, instead of a simple HTTP response. To render this view, you need to redirect your page to that url, instead of doing an ajax request.
$("#search-logs tbody").on('click', 'button', function () {
var self = this;
var tr = $(self).closest('tr');
var dtRow = datatable.row(tr[0]);
var rowData = dtRow.data();
var processId = rowData[0];
location.href = '#Url.Action("Details","Logs")?id='+ processId;
});
Also if you still want to use get request, mostly to check if the id exists as it can return 404 Not found, you can the ajax function like this,
$("#search-logs tbody").on('click', 'button', function () {
var self = this;
var tr = $(self).closest('tr');
var dtRow = datatable.row(tr[0]);
var rowData = dtRow.data();
var processId = rowData[0];
$.get("#Url.Action("Details","Logs")", { id: processId },
function(data, statusText, xhr){
if(xhr.status == 200) location.href = '#Url.Action("Details","Logs")?id='+ processId;
else alert('Sorry, this id does not exist');
});
});
You can open the constructed link in a new window or load in current window
//opens in new window
window.open(newUrlCreated, '_blank');
//opens in current window
window.open(xhr.data);
window.location.href=newUrlCreated;
there are a lot of ways to achieve that.
You can add an onclick="operate(row['info'], row['info'])" to your button which calls a function with specified data
from the datatable row, you will not bother to search for clicked button and row.
function operate(selectedRow, data, ...){
//logic of button for row
}

ol-ext Control Bar and function in the Controller

I have an extjs app in which I am using an ol-ext control bar. The control bar is in the file MyApp.js and the function that I want to call clicking on the button belonging the control bar is in the relative controller MyAppController.
In MyApp.js:
var testFuction = function(){
return this.getController().updateImages;
};
var mainbar = new ol.control.Bar();
var first = new ol.control.Button (
{
html: '1',
//handler: 'updateImages',
//reference: 'locationShowImageButton',
handleClick: testFuction,
});
//Standard Controls
mainbar.addControl (first);
mainbar.setPosition('bottom-right');
this.map.addControl(mainbar);
In MyAppController:
updateImages: function (obj) {
var self = this;
this.getView().cleanImageLayers();
var selectedFloors = ; //it should be the value of the ol.control.Button, so 1
if (this.lookupReference('locationShowImageButton').pressed) {
.....
First check if this.getController() in MyApp.js refer to MyAppController.
You can't use ol.control.Button like sencha component.
You should use this in your MyApp.js scope.
var mainbar = new ol.control.Bar();
var me = this;
var first = new ol.control.Button (
{
html: '1',
handleClick: function () {
me.getController().updateImages();
}
});
//Standard Controls
mainbar.addControl (first);
mainbar.setPosition('bottom-right');
this.map.addControl(mainbar);

SharePoint 2013 JSLink OnPostRender not working after adding SP.SOD.executeFunc

I use JSLink to color rows in a SharePoint 2013 list
ExecuteOrDelayUntilBodyLoaded(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/SiteAssets/jsLink.js", Highlight);
Highlight();
}
});
});
function Highlight() {
var HighlightFieldCtx = {};
HighlightFieldCtx.Templates = {};
HighlightFieldCtx.Templates.Fields = {};
HighlightFieldCtx.OnPostRender = postRenderHandler;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(HighlightFieldCtx);
}
function postRenderHandler(ctx)
{
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
// do stuff
row.classList.add("Color");
}
}
I need add SP.SOD.executeFunc() for activate _spPageContextInfo. But when I added SP.SOD.executeFunc(), function postRenderHandler not called in line with HighlightFieldCtx.OnPostRender = postRenderHandler.
When I dont have SP.SOD.ExecuteFunc() and static link on my JS and CSS, my code and rendering fully working. Can you please help me, how to make proper code with working _spPageContextInfo?
Try this:
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
//alert(_spPageContextInfo.siteServerRelativeUrl);
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/SiteAssets/jsLink.js", Highlight);
Highlight();
});
function Highlight() {
var HighlightFieldCtx = {};
HighlightFieldCtx.Templates = {};
HighlightFieldCtx.Templates.Fields = {};
HighlightFieldCtx.OnPostRender = postRenderHandler;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(HighlightFieldCtx);
}
function postRenderHandler(ctx)
{
var rows = ctx.ListData.Row;
alert('postRenderHandler');
}
</script>

How can I check when certain form view is opened and field has changed in it on Odoo JavaScript?

What I Have so far is basic code:
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var core = require('web.core');
var Dialog = require('web.Dialog');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
console.log('JS loaded');
$(document).on('ready', function() {
console.log('Doc is ready');
$('#FIELD').on('change', function() {
// Change value of other fields in this form
});
});
});
Problem is that document ready triggers in whole ODOO system. And trying to find the field by its name $(#fieldname) doesn't work at all.
Is there any solution SPECIFIC FOR ODOO for this problem? Or maybe you know really good documentation or example that explain on change method OF ODOO FIELD. P.S. I write ODOO in caps because everybody answers simple JQuery style, and this is not just simple JQuery, this must be something more specific related to ODOO.
Or maybe I can call Python function of specific form view after the field has been changed, something like that. All odoo documentation that I found gives very little or no information about that.
UPDATE:
Thanks to #Vishal Khichadiya I got a bit close. I edited his answer by creating a widget. Now when I set this widget to the random field, let's say to some invisible field, I can use class class_partner on any field I want and it will trigger onchange method.
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var base = require('web_editor.base');
var options = require('web_editor.snippets.options');
var core = require('web.core');
var Dialog = require('web.Dialog');
var session = require('web.session');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
var onchange_js_method_test = form_common.AbstractField.extend({
start: function () {
this._super();
var self = this;
$('body').on('change', '.class_partner', function() {
console.log('start triggered');
console.log(self)
// Change value of other fields in this form
//you can call python function from here to set your value
});
}
});
core.form_widget_registry.add('onchange_js_method_test', onchange_js_method_test);
});
xml:
<field name="random_invisible" " widget="onchange_js_method_test"/>
<field name="on_this_field_onchange_triggers" class="class_partner"/>
first of all you need to set class attribute to python filed in xml code.
Ex:
<field name="partner_id" class="class_partner" />
then you need this in js and also add this js file to assets_backend.
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var core = require('web.core');
var Dialog = require('web.Dialog');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
var my_widget = Widget.extend({
start: function () {
this._super();
var self = this;
$('body').on('change', '.class_partner',function() {
// Change value of other fields in this form
//you can call python function from here to set your value
});
},
});
core.action_registry.add('my_widget', my_widget);
return my_widget;
});

How can i optimize my Jquery code?

I've created some JavaScript using Jquery, for the page animation :
I trying to optimize it since i repeat the same thing for subtab1, subtab2, subtab3.
The same function is executed for all of them, and the only thing is changes is variable i iterating on?
Any suggestion?
<script type="text/javascript">
$(document).ready(function () {
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
var $fundosdiponiveis = $('#fundosdiponiveis');
var $fundosdiponiveisTab = $('#tabs1');
$defensivo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$defensivoSubTab.removeClass("hide");
$defensivoSubTab.show();
});
$equilibrado.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$equilibradoSubTab.removeClass("hide");
$equilibradoSubTab.show();
});
$activo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$activoSubTab.removeClass("hide");
$activoSubTab.show();
});
});
</script>
For a while:
var $fundosdiponiveis = $('#fundosdiponiveis');
This is my default div.
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
That divs apears when i clicking on one of the following tabs:
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
And that button hides and changes style"display" to none, on click, of my three #subtab's
var $fundosdiponiveisTab = $('#tabs1');
Any suggestion?
You could write a function that returns the proper function:
function createShowTabFunc(tab) {
return function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
tab.removeClass("hide");
tab.show();
}
}
Then assign your click handlers:
$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));
Have a common class attribute to all the tab's and you just need to write $('.class').click() and in this get the id of the corresponding tab and according to the id fetched by attr function, you can have an if else to define your variables inside the if else and execute your code block.

Categories

Resources