jQuery breaks a4j functionality

[strannik]

Hi

I'm using custom jQuery scripts:

<sf:resource path="/styles/jquery-ui-1.7.1.custom.css" />
<sf:resource path="/styles/jquery.gzoom.css" />
<sf:resource path="/scripts/jquery-1.3.2.min.js" />
<sf:resource path="/scripts/ui.core.min.js" />
<sf:resource path="/scripts/ui.slider.min.js" />
<sf:resource path="/scripts/jquery.mousewheel.js" />
<sf:resource path="/scripts/jquery.gzoom.js" />

Although I replaced all $() occurrences with jQuery() rich:fileUpload component doesn't work and I see these errors in the Firebug:

$("mapForm:j_id207").component is undefined
this.element.observe is not a function
element.dispatchEvent is not a function

If I add

<script>
     jQuery.noConflict();
</script>

a4j works properly but jQuery.zoom doesn't work.

Any suggestions?

Message was edited by: Sergey Morenets

[ilya_shaikovsky]

replacing $ with jQuery and jQuery.noConflict - not solves that problem. It only solves conflicts with  prototype. But your jQuery - still conflicts with bundled version. And unfortunatelly - not way except patching library to use newest jQuery.

[strannik]

Ilya, thanks for the answer.

I'm OK about using newest jQuery. The only thing is that it should be compatible with jQuery Zoom plugin.

How can I achieve that?

1) Dynamically load bundled version?

2) Just use the newest jQuery script from the download site?

[ilya_shaikovsky]

I mean to patch rf jar to include jQuery version you need instead of bundled. But need to admit from the beggining. We patched some jquery parts to resolve some issues. So if you will just replace with new version - some components could became broken.

[strannik]

Ilya, if you mean this line

<sf:resource path="/scripts/jquery-1.3.2.min.js" />

then I don't need exactly this version. Instead I would prefer using version from rf jar but how to do this?

If I just comment out the line above I get the error message

jQuery is not defined.

[strannik]

Finally got it working!

<sf:resource path="/styles/jquery-ui-1.7.1.custom.css" />
            <sf:resource path="/styles/jquery.gzoom.css" />
            <sf:resource path="/scripts/ui.core.min.js" />
            <sf:resource path="/scripts/ui.slider.min.js" />
            <sf:resource path="/scripts/jquery.mousewheel.js" />
            <sf:resource path="/scripts/jquery.gzoom.js" />

            <rich:jQuery selector="#zoompic"
                query="gzoom( {sW : 700,sH : 350,lW : #{map.picture.width},lH : #{map.picture.height},lighbox : false});" />