CODEWITHSUNDEEP
javajavascriptjqueryxhtmlrichfaces
Sark
Sark

Reputation: 132

Integrate JQuery with Richfaces

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?

Upvotes: 0

Views: 3444

Answers (4)

Himanshu Yadav
Himanshu Yadav

Reputation: 13585

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.

Upvotes: 0

Andrey
Andrey

Reputation: 6796

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"/>

Upvotes: 4

Tychio
Tychio

Reputation: 627

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

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

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

Upvotes: 1

seenukarthi
seenukarthi

Reputation: 8682

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.

Upvotes: 0

Related Questions