CODEWITHSUNDEEP
jqueryajaxjsfjakarta-eejsf-2
siva636
siva636

Reputation: 16441

jQuery operation fails on Ajaxified Java Server Faces (JSF) components

In the output of the following Java Server Faces (JSF) markup, the 'Description' field is initially not rendered, and is rendered (by Ajax) when you enter input in the 'Name' field.

When you type (more than 5 characters) in the Description field, the field should comes as red according to the jQuery code. But it is not happening.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery (document).ready(function(){

        jQuery("#description").keypress(function(){

          if (jQuery(this).val().length >5){

              jQuery(this).css("background-color", "red");
          }else{
            jQuery(this).css("background-color", "white");   
          }
            console.log(jQuery(this).val().length); 
             })   
    })
</script>
    </h:head>
    <h:body>

           <h:form prependId="false">
            Name: <h:inputText id="name" value="#{viewScope.name}">
                <f:ajax execute="@this" render="@form"/>
            </h:inputText>
            <br/>
            <h:outputText id="descriptionLabel" value="Description:" rendered="#{empty viewScope.name ? false : true}"/>
            <h:inputText id="description" value="#{viewScope.description}" rendered="#{empty viewScope.name ? false : true}"/>
       <!-- <h:outputText id="descriptionLabel" value="Description:" />
            <h:inputText id="description" value="#{viewScope.description}" />-->
        </h:form>

            </h:body>
</html>

Upvotes: 0

Views: 200

Answers (1)

Maxim Manco
Maxim Manco

Reputation: 1954

Just replace the keypress event binding to live.

jQuery("#description").live('keypress', function() { ... });

The live function will attach a handler to the event for all elements which match the current selector, now and in the future and in your case the description element is not yet presented in the DOM.

Upvotes: 2

Related Questions