Integrate JQuery with Richfaces

Question

im newbie in the world of Js , my Jquery doesn't work with richfaces. I want to do something like this : http://jsfiddle.net/bFuEv/ .

This is my code in my xhtml file :

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">



    <script type="text/javascript">
        $("himessage").hide();

        $("#name").focus(function(){
         $("himessage").show();    
        });
        $("#name").blur(function(){
             $("himessage").hide();    
        });
    </script>

    <rich:panel>
        <h:form>
            <label>Name: </label>
            <h:outputText id="himessage" value="Hi" />
            <h:inputText id="name" class="editable" type="text"
                onfocus="this.value=''" name="name" value="#{loginAction.username}" />
        </h:form>
    </rich:panel>
</ui:composition>

How can integrate this jquery code in my page?

score 4 · Accepted Answer · answered May 24 '13 at 09:59

4

RichFaces has jquery bundled with it. To include the library, add to the page (even if multiple occurrences - jquery.js will be included only once):

<h:outputScript name="jquery.js" target="head"/>

answered May 24 '13 at 09:59

Andrey

6,526
3
39
58

1

This should do the trick. It's good to add jquery manually, because RF does it only when he needs it. – Emil Sierżęga May 24 '13 at 16:48
You need to include jquery like Andrey wrote. Additionally, you need to use correct selectors when using jQuery. The easies way is not to prepend id of form (set prependId="false" on h:form). Then you can use selector in Tychio's comment above. – Pavol Pitonak May 30 '13 at 13:49

score 1 · Answer 2 · answered May 24 '13 at 01:50

The "himessage" is ID. Its selector should be $("#himessage"). You forgot "#".

 $("#himessage").hide();

    $("#name").focus(function(){
     $("#himessage").show();    
    });
    $("#name").blur(function(){
         $("#himessage").hide();    
    });

Himanshu Yadav · Answer 3 · 2013-05-24T18:33:12.450

0

Include jQuery library with:

<script  
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">  

</script> 
<script type="text/javascript">
        $("#himessage").hide();

        $("#name").focus(function(){
         $("#himessage").show();    
        });
        $("#name").blur(function(){
             $("#himessage").hide();    
        });
    </script>

I have never worked with Richfaces but it is worth a try.

edited May 24 '13 at 18:33

answered May 23 '13 at 22:21

Himanshu Yadav

13,315
46
162
291

1

This isn't a good answer. Those are bad practices in JSF. Script src from URL, JS library not imported by `` (see @Andrey answer) and bad jquery separators (repeated from the question). – Emil Sierżęga May 24 '13 at 17:02
I have never worked on Richfaces sorry. Tried to provide a quick solution. – Himanshu Yadav May 24 '13 at 18:32

score 0 · Answer 4 · answered May 24 '13 at 01:43

0

Using view source from browser and check the ID of the element it will be appended with the form's id. If the h:form's id is hiform and the h:inputText's id is name the id of the generated input element will be hiform:name.

answered May 24 '13 at 01:43

seenukarthi

8,241
10
47
68

Integrate JQuery with Richfaces

4 Answers4

Linked