RichFaces component rich:input does not seem to work with JQuery

Question

Continuing using JQuery with RichFaces components, I've noticed that when you import one of the JQuery scripts, particularly this one: "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js", one of RichFaces components, "rich:inplaceInput", doesn't seem to work. The input appears, but the javascript it uses disappears, so no matter how many times you click it, nothing happens. Here is my header:

    <f:view>
       <html>
         <head>
              <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
              <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
              <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>            
              <link rel="stylesheet" type="text/css" href="../../css/custom-styles.css" />
              <script type="text/javascript" src="../../js/customJS.js"></script>
              <a4j:loadScript src="resource:///jquery.js"/>
         </head>
       </html>
    </f:view>

And in the body I create a simple and there I have a simple panel and a simple inplace input:

      <rich:panel id="simplePanel" style="width:560px;height:100px;">
          <rich:inplaceInput id="sample" defaultLabel="Some text" />
      </rich:panel>

That's all, and it works only when I remove the first script import, the one that includes "jquery.min" javascript file.

Any idea why this happens? Is it a bug in RichFaces? Is there a workaround or is it only possible after upgrading RichFaces? (I'm using 3.3.3 version)

Thanks for all your help.

Daniel Daniel · Accepted Answer · 2012-05-22T07:17:48

I'm not familiar with Richfaces , but it seems that it come with jquery out of the box

and can be used like this (reference to the version built-it jQuery)

<a4j:loadScript
src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />

When you try to import another jQuery.js file it results in conflicts...

Look here Avoid jquery conflict in my jsf application

and Here Richfaces with jQuery

to learn more...

RichFaces component rich:input does not seem to work with JQuery

1 Answers