Richfaces colorpicker stop working after start using jQuery

[tharahan]

I am currently experiencing very annoying problem. I have color picker integrated in my page and working fine. I now use jQuery for drag and drop support and include the jQuery sources

     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.draggable.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.droppable.min.js"></script>

All of sudden, my richfaces color picker stop working and throw the following errors

Error: element.style is undefined
Source File: http://tharahan.oak.yesmail.com:8080/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/modalPanelBorders.js.jsf
Line: 2

Error: jQuery(".rich-color-picker-color").pngFix is not a function
Source File: http://tharahan.oak.yesmail.com:8080/secure/messages/createMessageStep0.jsf
Line: 1216

Error: element.dispatchEvent is not a function
Source File: http://tharahan.oak.yesmail.com:8080/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.PrototypeScript.jsf
Line: 265

If I removed the

<script type="text/javascript"  src="/js/jquery-1.4.2.min.js"></script>

then works again.

I tried everything including dynamically load the scripts using a4j:loadScript. Nothing help

Any help will be appreciated.

Thanks

Tharahan

[ilya_shaikovsky]

use jquery bundled with richfaces. if you will load external lib - conflicts could appears as in your case.

[tharahan]

Thanks for your valuable infor.

I got resolved this issue but facing another problem in IE (OK in FF). When you drag an element, there is JS error in the bundled jquery.js at

var box=this[0].getBoundingClientRect()

This is my included js sources

          <a4j:loadScript src="/org/richfaces/renderkit/html/scripts/jquery.js" />
            <script type="text/javascript" src="/js/jquery.dimensions.min.js"></script>
            <script type="text/javascript" src="/js/jquery.ui.core.min.js"></script>
            <script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>
            <script type="text/javascript" src="/js/jquery.ui.mouse.min.js"></script>
            <script type="text/javascript" src="/js/jquery.ui.draggable.min.js"></script>
            <script type="text/javascript" src="/js/jquery.ui.droppable.min.js"></script>

What am I missing here?

Thanks

Tharahan

[ilya_shaikovsky]

The main problem which could appear that some plugin could be not compatible with jquery version we using.. Check that at plugin page. anyway need to debug using some sample in order to check possible reasons.