jCarouselLite Giving Error Sometime

Question

We are facing problem sometimes on Product Details Page: (We are facing issue to load images on all product detail page i.e. from where customer can buy product) We are getting below piece of errors on the console

    {
    Failed to load resource: the server responded with a status of 404 (Not Found) 
    Uncaught TypeError: Object [object Object] has no method 'autocomplete' 
    Uncaught TypeError: Object [object Object] has no method 'jCarouselLite' 
    }

Please help.

My code is given below.

-----Javascript Code START------

<script src="js/validate.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        document.title="<?php echo $product['pd_name']; ?>";
        $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            hoverPause:true,
            visible: 4,
            auto:500,
            speed:1500
        });

        var hh=$(".image_preview_img_text").height();
        if(hh<=300)
        {
            //$("#tag_rt_new").height("");
            $("#tag_rt_new").css("padding-top","300px");
        }

        $("#tag_rt_new").show();
        $(".index_left_nav_new").remove();
    });
</script>
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        err_msg_pp();
        $(".cart_tmp_msg_div_pp").css("height","0px");
        $(".cart_tmp_msg_div_pp").css("padding","0px");
        $(".cart_left").find("div").nextAll('br').remove();
        $(".cart_left").find("div div br").remove();
        $(".description ul br").remove()
        $(".description li").css("padding","5px");
        $(".cart_left div div").css("padding-bottom","4px");
        change_image_color( <?php echo $_GET['p'];?>,
            document.getElementById("first_col_name").value,
            document.getElementById("colid").value
        );
    });

</script>
<script type="text/javascript">
var flag=0;
var loader='<img src="admin/images/382.gif" style="padding-left: 
20%;padding-top: 25%;"/>';

----END----

Are you using a javascript AMD loader? It looks similar to problems that arise when a plugin activates before it's library, in this case, i'm assuming your image carousel is loading before jquery. Which could explain why you only see it happen sometimes. — Shan Robertson, May 15 '14 at 18:03
Once a month? Any specific part of the month like the end? Perhaps you are out of bandwidth. — jeroen, May 15 '14 at 18:07
Could be a number of things, my guess would be the same as @ShanRobertson stated - but I suggest you start by cleaning up your HTML. You appear to be loading several versions of jquery on the same page, numerous times (load it once, then load your carousel plugin) Also, !DOCTYPE should be the first thing in the file... — Matthew Wilcoxson, May 15 '14 at 19:00
Guys, I have uploaded the same javascript code that I am using on the product detail page. Do you see any wrong in it? ... Thanks — user3641953, May 16 '14 at 03:54
@user3641953 Firstly DON'T put you php code into stackoverflow (or anywhere) with the server URL as well You code has extremely bad errors - check this post: http://stackoverflow.com/questions/5089549/php-protection-of-get-parameters — Matthew Wilcoxson, May 16 '14 at 19:47
@MatthewWilcoxson I am still getting error. All plugins like autocomplete, jCarouselLite and simplemodal.js stopped working ... — user3641953, May 17 '14 at 20:54

score 0 · Answer 1 · answered May 16 '14 at 20:03

Some general tips: 1. Try to get your setup code all in one place with just one document.ready function. This makes debugging easier. 2. Only load a javascript library once. You'll likely confuse the browsers. 3. Try to limit the amount of scripts you are using.

With the code you've added you could try refactoring to this:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<script src="js/validate.js" type="text/javascript"></script>
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){

        document.title="<?php echo $product['pd_name']; ?>";
        $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            hoverPause:true,
            visible: 4,
            auto:500,
            speed:1500
        });

        var hh=$(".image_preview_img_text").height();
        if(hh<=300)
        {
            //$("#tag_rt_new").height("");
            $("#tag_rt_new").css("padding-top","300px");
        }

        $("#tag_rt_new").show();
        $(".index_left_nav_new").remove();

        err_msg_pp();
        $(".cart_tmp_msg_div_pp").css("height","0px");
        $(".cart_tmp_msg_div_pp").css("padding","0px");
        $(".cart_left").find("div").nextAll('br').remove();
        $(".cart_left").find("div div br").remove();
        $(".description ul br").remove()
        $(".description li").css("padding","5px");
        $(".cart_left div div").css("padding-bottom","4px");
        change_image_color( <?php echo "something";?>,
            document.getElementById("first_col_name").value,
            document.getElementById("colid").value
        );
    });
</script>

If you have other code that is attempting to load "js/jcarousellite_1.0.1c4.js" then remove it. The code within the $(document).ready should run after all the javascript is loaded.

score 0 · Accepted Answer · answered May 20 '14 at 04:50

Finally I got it right. You were right @MatthewWilcoxson as the jquery -1.9.1 has been added four time on different pages. I dont know why this problem was not permanent. Anyways, the problem was to have jQuery included multiple times and by removing the same, it solved the issue.

jCarouselLite Giving Error Sometime

2 Answers2