Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery bxslider exception

Alright so the problem is basically unknown for me, never had it before. I tried adding bxslider today but it seems it doesnt work properly. I tried using the other version of the JS that he provided but same thing happends, the images keep on "loading" and they never load. I did inspect element and this is what I got

jQuery.Deferred exception: Cannot read property 'indexOf' of undefined TypeError: Cannot read property 'indexOf' of undefined at jQuery.fn.load (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:9612:12) at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4394) at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19) at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17) at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4355) at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19) at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17) at g (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4295) at c (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4180) at d (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:2570) undefined

The code that Im using is exactly the same as the one that was on their website.

<head> 
        <script type="text/javascript" src="js/jquery-3.0.0.js"></script>

        <script src="js/plugin/jquery.bxslider.min.js"></script>
        <link rel="stylesheet" type="text/css" href="js/plugin/jquery.bxslider.css"/>

        <script type="text/javascript" src="js/skripta.js"></script>


    </head> <!-- Head ends -->

and of course Im calling it inside separate .js file

$(document).ready(function() {

    $('.bxslider').bxSlider();

});

and the body is

<body> <!-- Body start -->
        <ul class="bxslider">
          <li><img src="js/plugin/images/pic1.jpg"/></li>
          <li><img src="js/plugin/images/pic2.jpg"/></li>
          <li><img src="js/plugin/images/pic3.jpg"/></li>
        </ul>

    </body><!-- Body ends -->
like image 526
Tomislav Tomi Nikolic Avatar asked Nov 29 '22 13:11

Tomislav Tomi Nikolic


2 Answers

The issue is about jQuery version 3.0 and compatibility with bxslider.js. And this issue was arised by jQuery .load() function. You have to change bxslider.js's one line to solve this issue. Open your bxslider.js file and find .load() function's code line. It was used only 1 time in bxslider.js, so the necessary change is:

From

$(this).load();

To

$(this).trigger('load');
like image 127
kkakkurt Avatar answered Dec 05 '22 13:12

kkakkurt


There's a pull request on github that solves this:

https://github.com/stevenwanderski/bxslider-4/pull/1024

I'd recommend you test it out.

like image 37
mackinley Avatar answered Dec 05 '22 13:12

mackinley