Community: CMS / eCommerce Experts mailing list archives

expert-website@mail.odoo.com

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

by
Jerome Sonnet
- 12/09/2016 21:59:32
Hi Maysam,

I also suggest you to have a look there https://www.odoo.com/documentation/10.0/reference/javascript.html and especially this section

Web Client

Javascript module system overview

A new module system (inspired from requirejs) has now been deployed. It has many advantages over the Odoo version 8 system.

  • loading order: dependencies are guaranteed to be loaded first, even if files are not loaded in the correct order in the bundle files.
  • easier to split a file into smaller logical units.
  • no global variables: easier to reason.
  • it is possible to examine every dependencies and dependants. This makes refactoring much simpler, and less risky.

It has also some disadvantages:

  • files are required to use the module system if they want to interact with odoo, since the various objects are only available in the module system, and not in global variables
  • circular dependencies are not supported. It makes sense, but it means that one needs to be careful.

I don't fully understand the whole impact of this change, but it seems to me each module is now more "contained" in order to avoid JS clash.... but at the cost of some flexibility.

Maybe using a global $(document).ready is not the appropriate way anymore to change the DOM of the client, you should try to use the Widget.$(selector) and change only the part of the DOM your widget is responsible for at a time the required JS has been loaded.

I have also encountered some issues with existing JS librairies that depend on global event catching... don't know if owl.carrousel do such thing.

Best regards,

Jerome


On 9 December 2016 at 21:56, Ryan <mginshe@gmail.com> wrote:

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 ?

_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-cms-ecommerce-experts-65
Post to: mailto:expert-website@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe