Home/ Questions/Q 6736451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:07:52+00:00

In the output of the following Java Server Faces (JSF) markup, the ‘Description’ field

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0