Okay
  Public Ticket #2239379
Jquery 3 issues
Closed

Comments

  • James Xie started the conversation

    I have both v5 and latest v6.5, both work with Jquery 1.x, but neither with Jquery 3.x.

    Below is the error(s) encountered when running with :

    --------------------------------  error message -----------------------------------


    jquery-3.3.1.min.js:2 jQuery.Deferred exception: e.indexOf is not a function TypeError: e.indexOf is not a function at w.fn.init.w.fn.load (http://l58_hr.dev/Am/js/global/jquery-3.3.1.min.js:2:82468) at t.f.load (eval at <anonymous> (http://l58_hr.dev/layerslider/js/layerslider.kreaturamedia.jquery.js:13:1), <anonymous>:1:5096) at new t (eval at <anonymous> (http://l58_hr.dev/layerslider/js/layerslider.kreaturamedia.jquery.js:13:1), <anonymous>:1:78160) at HTMLDivElement.eval (eval at <anonymous> (http://l58_hr.dev/layerslider/js/layerslider.kreaturamedia.jquery.js:13:1), <anonymous>:1:1757) at Function.each (http://l58_hr.dev/Am/js/global/jquery-3.3.1.min.js:2:2573) at w.fn.init.each (http://l58_hr.dev/Am/js/global/jquery-3.3.1.min.js:2:1240) at w.fn.init.e.fn.layerSlider (eval at <anonymous> (http://l58_hr.dev/layerslider/js/layerslider.kreaturamedia.jquery.js:13:1), <anonymous>:1:1740) at HTMLDocument.<anonymous> (http://l58_hr.dev/Am/js/app_layerslider.js:20:22) at l (http://l58_hr.dev/Am/js/global/jquery-3.3.1.min.js:2:29375) at c (http://l58_hr.dev/Am/js/global/jquery-3.3.1.min.js:2:29677) undefined

    jquery-3.3.1.min.js:2 Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load (jquery-3.3.1.min.js:2) at t.f.load (eval at <anonymous> (layerslider.kreaturamedia.jquery.js:13), <anonymous>:1:5096) at new t (eval at <anonymous> (layerslider.kreaturamedia.jquery.js:13), <anonymous>:1:78160) at HTMLDivElement.eval (eval at <anonymous> (layerslider.kreaturamedia.jquery.js:13), <anonymous>:1:1757) at Function.each (jquery-3.3.1.min.js:2) at w.fn.init.each (jquery-3.3.1.min.js:2) at w.fn.init.e.fn.layerSlider (eval at <anonymous> (layerslider.kreaturamedia.jquery.js:13), <anonymous>:1:1740) at HTMLDocument.<anonymous> (app_layerslider.js:20) at l (jquery-3.3.1.min.js:2) at c (jquery-3.3.1.min.js:2)


    The related JS script is attached below:

    $(document).ready(function(){
        var $slider1=$('#layerslider');
        if($slider1.length) {
                $slider1.layerSlider({
                    autoStart               : true,
                    responsive              : true,
                    responsiveUnder         : 1170,
                    sublayerContainer       : 1170,
                    firstLayer              : 1,
                    twoWaySlideshow         : false,
                    randomSlideshow         : false,
                    keybNav                 : true,
                    touchNav                : true,
                    imgPreload              : true,
                    navPrevNext             : true,
                    navStartStop            : false,
                    navButtons              : false,
                    thumbnailNavigation     : 'disabled',
                    tnWidth                 : 100,
                    tnHeight                : 60,
                    tnContainerWidth        : '60%',
                    tnActiveOpacity         : 35,
                    tnInactiveOpacity       : 100,
                    hoverPrevNext           : true,
                    hoverBottomNav          : false,
                    skin                    : 'fullwidth',
                    skinsPath               : 'layerslider/skins/',
                    pauseOnHover            : false,
                    globalBGColor           : 'transparent',
                    globalBGImage           : false,
                    animateFirstLayer       : true,
                    yourLogo                : false,
                    yourLogoStyle           : 'position: absolute; z-index: 1001; left: 10px; top: 10px;',
                    yourLogoLink            : false,
                    yourLogoTarget          : '_blank',
                    loops                   : 0,
                    forceLoopNum            : true,
                    autoPlayVideos          : false,
                    autoPauseSlideshow      : 'auto',
                    youtubePreview          : 'maxresdefault.jpg',
                    showBarTimer        : false,
                    showCircleTimer     : false,
                    // you can change this settings separately by layers or sublayers with using html style attribute
                });
            //});
        }
    });

    Please help. Thanks


    Jim

  • [deleted] replied

    Hello Jim,

    Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

    LayerSlider should be working with both jQuery versions. Please show us your site or a test page where we can check on this. Thank you.

  • James Xie replied

    Dear Attila,

    Thanks for your prompt response. 

    I've done some digging with v5 & v6.5, both showing the same problem when replacing jquery 1.x with jquery 3.x.

    While I was trying to compile a test page to replicate the problem with v6.5, I found it's more complex than v5, where additional issues exist. 

    To make the things simpler, I hereby enclose the sources code in v5, 

    ... ...

    <!--global js starts-->
    <script type="text/javascript" src="/Am/js/global/jquery-3.3.1.min.js"></script> // <== Jquery 3.x
    <script type="text/javascript" src="/Am/assets/js/bootstrap.min.js"></script>
    <!--global js end-->
    <!-- begining of page level js -->
    <!-- page level js starts -->
    <script src="/layerslider/js/jquery.js" type="text/javascript"></script> // <== Jquery 1.x
    <!-- jQuery with jQuery Easing, and jQuery Transit JS -->
    <script src="/layerslider/js/greensock.js" type="text/javascript"></script>
    <!-- LayerSlider from Kreatura Media with Transitions -->
    <script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

     ... ...

    The test page won't work with Jquery 3.x ('/Am/js/global/jquery-3.3.1.min.js'). 

    However, if you override Jquery 3.x with Jquery 1.x by inserting  "/layerslider/js/jquery.js", it would work fine.


    For details, please see attached.


    Thanks 

    Jim

    Attached files:  slider_test.html.zip

  • [deleted] replied

    Thank you for the feedback. My colleagues and I will look into this to see what we can find, and get back to you.

  • [deleted] replied

    Thank you for your patience. 

    We've made some tests with a couple sliders, but they were working properly with both jQuery versions you mentioned.

    As we can see in your code, you are using both jQuery versions (the old and v3 together) at the same time. This is not recommended, as multiple jQuery can conflict with each other.

    Please only pull jQuery v3 and try it that way.

  • James Xie replied

    Hi Attila,

    Thanks for your reply. 

    Using both Jquery 1.x & 3.x in the test page is purely for testing purpose, it does not change the fact that Layerslider v5 wouldn't with Jquery 3.x.

    When I actually commented out the Jquery 1.x line, the page stops working with the errors as shown in the attached.

    Please check again. Thanks.

    Jim 

    Attached files:  slider_jquery3_src.png
      slider_jquery3_err.png

  • [deleted] replied

    We made these tests using the latest plugin release, which is v6.10.

    Version 5 of LayerSlider is 4-5 years old, jQuery 3 did not even exist back then, so naturally it won't work with it.

    Please use an up to date plugin version.