Блог

Главная - Вопросы по программированию - Сбой операции jQuery на компонентах Ajaxified Java Server Faces (JSF)

Сбой операции jQuery на компонентах Ajaxified Java Server Faces (JSF)

#jquery #ajax #jsf #jakarta-ee #jsf-2

#jquery #ajax #jsf #джакарта-ee #jsf-2

Вопрос:

В выходных данных следующей разметки Java Server Faces (JSF) поле ‘Description’ изначально не отображается и отображается (с помощью Ajax) при вводе входных данных в поле ‘Name’.

При вводе (более 5 символов) в поле Описания поле должно выделяться красным цветом в соответствии с кодом jQuery. Но этого не происходит.

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

Ответ №1:

Просто замените keypress привязку события на live.

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

Функция live присоединит обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем, и в вашем случае description элемент еще не представлен в DOM.