Community: CMS / eCommerce Experts Mailinglisten Archive

expert-website@mail.odoo.com

Avatar

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

durch
Ryan Cole
- 09.12.2016 15:29:04

Hi Maysam,


I'm not sure why there's a stray return statement in that Kanban compatibility code - did you write this code yourself, or is it part of a default Odoo v10 module?


As for the owl carousel issue; Odoo already bundles jQuery as part of the web module - you do not need to re-include it. Try moving your jQuery include, and see if that helps. You could also try:
  • Moving your <link> and <script> tags into the appropriate places, i.e. <head> for CSS and the end of <body> for scripts
  • Downloading the CSS and JS files, and hosting them directly on your server
  • Appending `?debug=#` into your URL, which will make it much easier to see where any errors are coming from



Hopefully that helps!


Kind regards,

Ryan Cole

On 10/12/2016 7:24 AM, Maysam Al-Haddan wrote:

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>

If there is a way to fix this problem ?