This is Odoo 10.0 FrontEnd. In my "site" i load dynamically divs when the user select some fields and those divs contains checkbox and input box.
When the user change them i have some functions that write new value on DB. I'm trying to reload only the div that contain all rows instead of all page, but with my code if i use
$('#container_lines').load(location.href + " #container_lines");
instead of
window.location.reload();
If i click again the checkbox the onchange event is not triggered!
Here is the Javascript
odoo.define('website_sale_order_checklist.checklist_line', function (require) {
'use strict';
var ajax = require('web.ajax');
var core = require('web.core');
var session = require('web.session');
var Model = require('web.Model');
var _t = core._t;
//var body = $("body");
//IF some ajax start the windows show a loading bar
$(document).on({
ajaxStart: function () {
$("body").addClass("loading");
},
ajaxStop: function () {
$("body").removeClass("loading");
}
});
console.debug('website_sale_order_checklist');
$(document).ready(function () {
//If user select another stage save it
function update_line_value(checklist_line_id, checklist_line_view_id, checklist_line_view_type) {
//Take the id of the checklist line int
var checklist_line_id_int = Number(checklist_line_id);
//Take the value of the input tag for text and value
//take the model
var Checklists = new Model('sale.order.checklist.line');
//if the selected view is a checklist, check is checked or not
if (checklist_line_view_type === "checkbox") {
var checkboxValue = false;
if ($('#' + checklist_line_view_id).prop('checked') === true) {
checkboxValue = true;
} else {
checkboxValue = false;
}
if (checklist_line_view_id.match(/answer_yes_type/gi)) {
console.debug('Write on yes_type');
//call method that write the new value for checkbox
Checklists.call('write', [checklist_line_id_int, {answer_yes: checkboxValue}]
).then(function () {
//Call a method in backend that manage the subsections related to a section
Checklists.call('subsections_management_frontend', [checklist_line_id_int]).then(function () {
window.location.reload();
});
});
} else if (checklist_line_view_id.match(/answer_no_type/gi)) {
console.debug('Write on no_type');
//call method that write the new value for checkbox
Checklists.call('write', [checklist_line_id_int, {answer_no: checkboxValue}]
).then(function () {
//Reload full page
$('#container_lines').load(location.href + " #container_lines");
});
} else if (checklist_line_view_id.match(/answer_undecided_type/gi)) {
console.debug('Write on undecided_type');
//call method that write the new value for checkbox
Checklists.call('write', [checklist_line_id_int, {answer_undecided: checkboxValue}]
).then(function () {
//Reload
window.location.reload();
//$('#container_lines').load(location.href + " #container_lines");
});
}
} else if (checklist_line_view_type === "text") {
var value = $('#' + checklist_line_view_id).val();
if (checklist_line_view_id.match(/answer_text_type/gi)) {
console.debug('Write on answer_text_type');
//call method that write the new value for checkbox
Checklists.call('write', [checklist_line_id_int, {answer_text: value}]
).then(function () {
//Reload full page
window.location.reload();
});
}
} else if (checklist_line_view_type === "number") {
var value = $('#' + checklist_line_view_id).val();
if (checklist_line_view_id.match(/answer_value_type/gi)) {
console.debug('Write on answer_value_type');
//call method that write the new value for checkbox
Checklists.call('write', [checklist_line_id_int, {answer_value: value}]
).then(function () {
//Reload full page
window.location.reload();
});
}
}
}
//Intercept witch row and view is clicked
$('.section_line').on("change", "input, textarea", function () {
//Get row id of checklist
var checklist_line_id = $(this).parent().parent().attr('id');
//Get the id of clicked element
var checklist_line_view_id = $(this).attr('id');
//Get the type of clicked element
var checklist_line_view_type = $(this).attr('type');
console.debug('checklist_line_id: ' + checklist_line_id);
console.debug('checklist_line_view_id: ' + checklist_line_view_id);
console.debug('checklist_line_view_type: ' + checklist_line_view_type);
//Function that store the changed field
update_line_value(checklist_line_id, checklist_line_view_id, checklist_line_view_type);
});
//Intercept if the user click some Sections to add to checklist
$('.sectionAddRemove').on("click", function () {
setTimeout(function () {
window.location.reload();
//$('#container_lines').load(location.href + " #container_lines");
//$('#container_sections').load(location.href + " #container_sections");
}, 100);
//$('#container_lines').load(location.href + " #container_lines");
});
});
}
);
Where i'm wrong to do that? My objective is to reload only the div that contain rows not all the page.
Fixed the problem.
//Intercept witch row and view is clicked
$('.section_line').on("change", "input, textarea", function () {
//Get row id of checklist
var checklist_line_id = $(this).parent().parent().attr('id');
//Get the id of clicked element
var checklist_line_view_id = $(this).attr('id');
//Get the type of clicked element
var checklist_line_view_type = $(this).attr('type');
console.debug('checklist_line_id: ' + checklist_line_id);
console.debug('checklist_line_view_id: ' + checklist_line_view_id);
console.debug('checklist_line_view_type: ' + checklist_line_view_type);
//Function that stores the changed field
update_line_value(checklist_line_id, checklist_line_view_id, checklist_line_view_type);
});
$('.section_line').on("change"... .section_line is inside the div $('#container_lines') so when the div is reloaded it loses the handler.
Just change $('.section_line').on("change"... with $(document).on("change"... or a high container that contains the container_lines