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
- Kế toán
- Tồn kho
- PoS
- Project
- MRP
Câu hỏi này đã bị gắn cờ
1
Trả lời
3407
Lượt xem
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));
// });
},
});
Bạn có hứng thú với cuộc thảo luận không? Đừng chỉ đọc, hãy tham gia nhé!
Tạo tài khoản ngay hôm nay để tận hưởng các tính năng độc đáo và tham gia cộng đồng tuyệt vời của chúng tôi!
Đăng kýBài viết liên quan | Trả lời | Lượt xem | Hoạt động | |
---|---|---|---|---|
|
4
thg 5 25
|
8148 | ||
|
2
thg 12 24
|
5737 | ||
|
3
thg 4 24
|
5161 | ||
|
0
thg 4 25
|
477 | ||
|
0
thg 12 24
|
1129 |