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
- Boekhouding
- Voorraad
- PoS
- Project
- MRP
Deze vraag is gerapporteerd
1
Beantwoorden
2966
Weergaven
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));
// });
},
});
Geniet je van het gesprek? Blijf niet alleen lezen, doe ook mee!
Maak vandaag nog een account aan om te profiteren van exclusieve functies en deel uit te maken van onze geweldige community!
AanmeldenGerelateerde posts | Antwoorden | Weergaven | Activiteit | |
---|---|---|---|---|
|
4
mei 25
|
7303 | ||
|
2
dec. 24
|
5051 | ||
|
3
apr. 24
|
4573 | ||
|
0
apr. 25
|
250 | ||
|
0
dec. 24
|
699 |