hello, i am trying to dynamically add some div-s when form view is loaded, but i am not able to call my custom code.
here is what i did so far
/** @odoo-module **/
import { formView } from "@web/views/form/form_view";
export class SliderInFormView extends formView {
setup() {
super.setup();
}
showSlider() {
document.addEventListener('DOMContentLoaded', function () {
// console.log(`carouselInner >> ${carouselInnerClass}`)
const modelId = 389; // Replace with the actual ID of your Odoo model instance
fetch('/get_images', {
method: 'GET',
credentials: "include",
})
.then(response => response.json() )
.then(data => {
const images = data.images;
const carouselInnerc = document.querySelector('.odoo-vehicle-carousel');
const carouselInner = document.getElementsByClassName("odoo-vehicle-carousel");
const car = document.getElementById('myCarousel')
images.forEach((imageUrl, index) => {
const carouselItem = document.createElement('div');
carouselItem.classList.add('carousel-item');
if (index === 0) {
carouselItem.classList.add('active');
}
const img = document.createElement('img');
img.src = 'data:image/gif;base64,'+ imageUrl;
img.alt = `Image ${index + 1}`;
carouselItem.appendChild(img);
carouselInner.appendChild(carouselItem);
});
// Activate the carousel
const myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
interval: 2000, // Set the interval for auto sliding in milliseconds
});
})
.catch(error => console.error('Error fetching images', error));
});
}
}
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- 会計
- 在庫
- PoS
- プロジェクト
- MRP
この質問にフラグが付けられました
1
返信
5540
ビュー
fixed with
/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { FormController } from '@web/views/form/form_controller';
patch(FormController.prototype, {
setup() {
super.setup(...arguments);
// const modelId = 389; // Replace with the actual ID of your Odoo model instance
fetch('/get_images', {
method: 'GET',
credentials: "include",
})
.then(response => response.json() )
.then(data => {
const images = data.images;
// console.log(document)
const carouselInner = document.querySelector('.odoo-vehicle-carousel');
const carouselDiv = document.querySelector('.carousel');
images.forEach((imageUrl, index) => {
const carouselItem = document.createElement('div');
carouselItem.classList.add('carousel-item');
if (index === 1) {
carouselItem.classList.add('active');
}
const img = document.createElement('img');
img.className = 'd-block w-100 h-100';
img.src = 'data:image/gif;base64,'+ imageUrl;
img.alt = `Image ${index + 1}`;
carouselItem.appendChild(img);
carouselInner.appendChild(carouselItem);
});
const buttonPrevious = document.createElement('button');
buttonPrevious.className = 'carousel-control-prev';
buttonPrevious.type = 'button';
buttonPrevious.setAttribute('data-bs-target', '#myCarousel');
buttonPrevious.setAttribute('data-bs-slide', 'prev');
const prevIconSpan = document.createElement('span');
prevIconSpan.className = 'carousel-control-prev-icon';
prevIconSpan.setAttribute('aria-hidden', 'true');
const visuallyHiddenSpan = document.createElement('span');
visuallyHiddenSpan.className = 'visually-hidden';
visuallyHiddenSpan.textContent = 'Previous';
buttonPrevious.appendChild(prevIconSpan);
buttonPrevious.appendChild(visuallyHiddenSpan);
carouselDiv.appendChild(buttonPrevious);
const buttonNext = document.createElement('button');
buttonNext.className = 'carousel-control-next';
buttonNext.type = 'button';
buttonNext.setAttribute('data-bs-target', '#carouselExampleControls');
buttonNext.setAttribute('data-bs-slide', 'next');
const nextIconSpan = document.createElement('span');
nextIconSpan.className = 'carousel-control-next-icon';
nextIconSpan.setAttribute('aria-hidden', 'true');
const NextHiddenSpan = document.createElement('span');
NextHiddenSpan.className = 'visually-hidden';
NextHiddenSpan.textContent = 'Next';
buttonNext.appendChild(nextIconSpan);
buttonNext.appendChild(NextHiddenSpan);
carouselDiv.appendChild(buttonNext);
// Activate the carousel
// const myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
// interval: 5, // Set the interval for auto sliding in milliseconds
// });
})
.catch(error => console.error('Error fetching images', error));
// });
},
});
| 関連投稿 | 返信 | ビュー | 活動 | |
|---|---|---|---|---|
|
4
5月 25
|
12077 | ||
|
|
2
12月 24
|
8075 | ||
|
3
4月 24
|
7973 | ||
|
0
4月 25
|
1746 | ||
|
0
12月 24
|
2646 |
