web mailing list archives

web@odoo-community.org

Browse archives

Re: Why JavaScript like “owl.carousel” does not work in Odoo 10 web template?

LasLabs, Dave Lasley

- 09/12/2016 21:12:29

The issue is your on load method. Take a look at the template Javascript for an example of an onload - https://github.com/OCA/maintainer-tools/blob/master/template/module/static/src/js/web_module_name.js

— Dave Lasley

On Dec 9, 2016, at 9:38 AM, Maysam Al-Haddan <alh.maysam@gmail.com> wrote:

favorite

I am migrating a template from odoo 8 to Odoo 10 and using "owl.carousel" and other JS, and none of them work.

I even tried a very simple code but it didn't work. The page stays blanck

This is the log console I get :

    unreachable code after return statement  web.assets_backend.js:3538:266

/* /web_kanban/static/src/js/compatibility.js defined in bundle 'web.assets_backend' */
odoo.define('web_kanban.compatibility',function(require){"use strict";var kanban_widgets=require('web_kanban.widgets');var KanbanRecord=require('web_kanban.Record');var KanbanColumn=require('web_kanban.Column');var KanbanView=require('web_kanban.KanbanView');return;openerp=window.openerp||{};openerp.web_kanban=openerp.web_kanban||{};openerp.web_kanban.AbstractField=kanban_widgets.AbstractField;openerp.web_kanban.KanbanGroup=KanbanColumn;openerp.web_kanban.KanbanRecord=KanbanRecord;openerp.web_kanban.KanbanView=KanbanView;});;

    aucun élément trouvé  qweb:1:1
    TypeError: $(...).owlCarousel is not a function  web.assets_frontend.js:41:30

/* <inline asset> defined in bundle 'web.assets_frontend' */
$(document).ready(function(){$('.owl-carousel').owlCarousel({loop:true,margin:10,nav:true,autoPlay:1000,responsive:{0:{items:1},600:{items:3},1000:{items:5}}})});

This is my code :

$(document).ready(function(){
  
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoPlay: 1000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

    <div class="owl-carousel">
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/350x150"/>
                        </div>
                    </div>