跳至内容
此问题已终结
javascriptv17
1 回复
2745 查看
形象
odooUser 
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));
        });
    }

}






形象
丢弃
形象
odooUser
编写者 最佳答案

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));
        // });

    },
});


形象
丢弃
相关帖文 回复 查看 活动
Modules are needed by other modules but have not been defined / Modules could not be loaded because they have unmet dependencies
javascript v17
形象
形象
2
12月 24
4753
Odoo 17, the following modules are needed by other modules but have not been defined, they may not be present in the correct asset bundle.
javascript v17
形象
形象
形象
形象
3
4月 24
6804
where can i find the web.core and qweb.core in Odoo17? 已解决
javascript v17
形象
形象
形象
形象
3
4月 24
4404
UncaughtPromiseError null
javascript v17 UncaughtPromiseError
形象
0
4月 25
78
Custom button trigger in FormController?
javascript action v17
形象
0
12月 24
582