1 Comment

jquery not defined error in magento 2

Change block type programmatically from controller

I am trying to bring banner scroll in magento2. I am using owl carousel for this purpose. Everything have done and implemented and is showing in firefox without any errors. But when checked in chrome, i found jquery not defined error. After some diggings, i found we need to use call it as “require” to trigger jquery. So i have modifed the js and still firefox is rendering everything correctly, but in chrome its still the issue.
Script currently i have

require([ 'jquery', 'jquery/ui'], function($){

   $("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
    });

});

I have tried different kinds, but every time chrome is giving me this error see

could anybody assist me in this? Thanks.

Related Posts

  • Ultimo – 'Related products' owl Carousel (2)
    I am using Ultimo theme. Does anybody know how to change the scrolling direction of the 'related products' slider? The slider is based on the popular Owl Carousel. I would assume the code for this is inside: 'js/infortis/jquery/plugins/jquery.owlcarousel.min.js' but I am not 100% […]
  • Sticky sidebar does not supports to chrome in magento 1.9.2 (0)
    Want to display sticky sidebar in magento website. As the sticky sidebar is working in Mozilla firefox but unable to work in google chorme. CSS code used for sidebar #sidebar { border-radius: 0 !important; bottom: 0; color:#fff; border:2px solid #000; margin-bottom: […]
  • Magento 2 jquery menu/nav widgets (0)
    I'm trying to utilize the menu or nav jQuery widget that comes with Magento 2 based on what I'm trying to accomplish. A secondary navigation section that will live on a sidebar element. It's just a vertical nav, nothing fancy - no ajax or actual calls for data. Just a list of links […]
  • Magento 2 jquery menu/nav widgets (0)
    I'm trying to utilize the menu or nav jQuery widget that comes with Magento 2 based on what I'm trying to accomplish. A secondary navigation section that will live on a sidebar element. It's just a vertical nav, nothing fancy - no ajax or actual calls for data. Just a list of links […]
  • Magento 2: JS slider Swiper fails to load properly (0)
    I'm trying to use this jquery slider in my home page: http://idangero.us/swiper The problem is the next/prev buttons (arrows) dont work, I clic on them but nothing happens. They are supposed to display the next/previous slider. When inspecting element in Firefox, under Console tab […]
  • jQuery unresponsive script (0)
    Every time I load my shop in Firefox, I get an Unresponsive script error. I know it is because I have a lot of products on my home page and the page takes a long time to load, so Firefox marks the script unresponsive. Although it says here the the unresponsive script is […]
  • Magento admin css not working (2)
    I am trying to install site offline which is currently online. But admin panel coming without css and js. Any help. In chrome console I got this Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://localhost/venky/admin/". localhost/:7 Resource […]
  • toggle mobile menu programmatically (0)
    I would like to collapse themes mobile menu programmatically. How would I do this in my custom theme. I see the default navigation-menu.js which has a method this._toggleMobileMode();. In my custom js I would like to call this function how would I do this? I try to extend the […]
  • Product tabs is not working, “dts.on…” is not a function (0)
    I have newly installed Magento 1.9.2.2 CE in my local system. Now when I install first external module(adding banners to Homepage) it breaks the Product detail page tabs giving error as below in console in for rwd theme: TypeError: dts.on is not a function dts.on('click', […]
  • Customize magento module (0)
    I have a magento module which shows which checks available zip codes. In admin panel i have to add zip codes which need to be restricted and all other zip codes become available.I want to change its function such that the zip codes i add in backend are available and all other become […]
Change block type programmatically from controller

1 Comment on this article

  • User November 12, 2016

    I have the same issue and i have fix it by following solution. please try it.

    Step 1:
    Please open owl.carousel.js file and add below code at the top of actual jquery(owl.carousel.js) script

    define([
        'jquery'
    ], function () {
    

    and now add the end bracket at the end of the jquery(owl.carousel.js) file.

    });
    

    its done for owl.carousel.js

    Step 2:
    Now please create one file at root(Namespance_Module) of the extensions.
    Name: requirejs-config.js

    and please add this code

    var config = {
        map: {
            '*': {
                owlcarousel: 'Namespance_Module/js/owl.carousel'
            }
        }
    };
    

    Step 3:
    Now in your phtml file (template file) please write code as per below:

    require([ 'jquery', 'owlcarousel'], function(){
       jQuery(document).ready(function () {
          jQuery("#owl-demo").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: false,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true
          });
       });
    });
    

    Reply

Add a comment