Question

I have this code,

window.onload = function(){
    if($('div.colorPicker').length){
        $("div.colorPicker").click(function(){
            if($('.field_sku').length){
                code = $(this).children('.tmpSKU').html();
                if(!code || code==null){
                    code = "Item Code not set yet";
                }
                $('.field_sku').filter(".value").html(code);
            }
        });
    }
}

I apply this to a custom module i created using jquery. It works ok in safari, firefox, chrome, but not in IE8, and I think it might not work as well in the other versions of IE.
I get this error

'length' is null or not an object on 
imagemultiple.js                                    line 2
Code:0                                              char 2

Without this

if($('div.colorPicker').length){
}

it worked fine in the other browsers i added that for IE after the error but it keeps bringing that error up.

My suspition is on the with Mootools and Jquery, that they might have a conflict there. And for some reason in IE8 that code that was working as Jquery (in the other browsers) might try to work as Mootools. I dont know if that make sense???

Anyways it works fine once a page has a div with class colorpicker, went it doesnt it is when the problem appears.

Answer 1

Sounds very odd. But you might be correct with some conflict problem here. Try

jQuery.noConflict();
(function($) { 
    $(function() {
         if($('div.colorPicker').length){
            $("div.colorPicker").click(function(){
               if($('.field_sku').length){
                  code = $(this).children('.tmpSKU').html();
                  if(!code || code==null){
                     code = "Item Code not set yet";
                  }
               $('.field_sku').filter(".value").html(code);
               }
            });
         }
    });
})(jQuery);