Using jquery with richfaces 4

[aagenielsen]

We need to copy the input from one h:inputText to another. One solution is to use something like

function copyInput() {

  jQuery('#targetinput').text(jQuery('#sourceinput').val())

}

...

...

<h:inputText id="sourceinput" value="#{mybean.x}"/>

<h:inputText id="targetinput" value="#{mybean.y}"/>

<rich:jQuery query="copyInput()" event="keyup" selector="#sourceinput"/>

...

...

but how to use the jquery from richfaces ? the rich:jQuery works fine the copyInput function is called on every keyup stroke. We have tried jQuery.noConflict(), <h:outputscript src="jquery.js"/>, using ${}.

best regards

aage

[feuyeux]

Don't use <h:outputscript src="jquery.js"/>, since richfaces has include it. You can check it from framework.pack.js.jsf

My machine's is: /iview/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js.jsf

And, if you defined  jQuery.noConflict(), please make clear that jQuery has give up using $

[aagenielsen]

hi,

well we use Richfaces 4 and something has changed since 3.3.3. We know is pretty basic (to use jquery) but isn't simple selection jQuery('#mybean') supposed to work ? And yes we know the formid is prefixed ;-) Does anybody have a really simple example ?

best regards

aage

[feuyeux]

Hi Aage,

Firstly, what I said is the machanism of shipping js files into richfaces, not only richfaces3.3.3 use it, but also 4.0.final

Second, your assumption is right, the component id is form_id:component_id. Additionally, you can use jQuery's all ability in richfaces project, the both framework can work together well.

The simple you can get from jQuery offical site and run it in your xhtml file, that would run well

The only thing you need to take care is do not use $ -- replace it by jQuery.

And, you need to know richfaces4.0 includes jQuery1.5.x, and richfaces3.3.3 includes jQuery1.3.2.

So, please doesn't include the jQuery.js file explicitly, and if you include the version of jQuery is not the same one of richfaces use, it will encounter conflict.

Wish you can master it soon.

BR,

Lu H.

[nbelaevski]

I suggest to try this:

jQuery(#{rich:element('inputId')}).

[feuyeux]

Yes! It's convenient to use jQuery(#{rich:element('inputId')}) to select the component. In this way, the selection just uses the component's id (no prefix).

[aagenielsen]

That fixed it - our example ended with:

            <h:form id="qwerty">

                <h:outputText value="Field to copy:" />

                <h:inputText id="a1" value="#{simple.name}"/>

                <h:inputText id="a2" />

                <script>function copy(e){

                    jQuery(#{rich:element('a2')}).val(jQuery(#{rich:element('a1')}).val());

                }</script>

                <rich:jQuery query="copy(event)" event="keyup" selector="#a1"/>

            </h:form>

Thanks !

aage