将 JQuery 与 Richfaces 集成答案

【问题标题】：Integrate JQuery with Richfaces将 JQuery 与 Richfaces 集成
【发布时间】：2013-05-23 19:06:50
【问题描述】：

我是 Js 世界的新手，我的 Jquery 不适用于 Richfaces。我想做这样的事情：http://jsfiddle.net/bFuEv/。

这是我的 xhtml 文件中的代码：

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

如何将这个 jquery 代码集成到我的页面中？

【问题讨论】：

标签： java javascript jquery xhtml richfaces

【解决方案1】：

RichFaces 捆绑了 jquery。要包含该库，请添加到页面（即使多次出现 - jquery.js 只会包含一次）：

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

【讨论】：

这应该可以解决问题。手动添加jquery还是不错的，因为RF只在需要的时候才做。
你需要像 Andrey 写的那样包含 jquery。此外，在使用 jQuery 时需要使用正确的选择器。最简单的方法是不要在表单前面加上 id（在 h:form 上设置 prependId="false"）。然后你可以在上面 Tychio 的评论中使用选择器。

【解决方案2】：

“himessage”是 ID。它的选择器应该是 $("#himessage")。你忘记了“#”。

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

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

【讨论】：

【解决方案3】：

使用浏览器中的视图源并检查元素的 ID，它将附加表单的 ID。如果 h:form 的 id 是 hiform 并且 h:inputText 的 id 是 name，则生成的输入元素的 id 将是 hiform:name。

【讨论】：

【解决方案4】：

包含 jQuery 库：

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

我从未使用过 Richfaces，但值得一试。

【讨论】：

这不是一个好的答案。这些是 JSF 中的不良做法。来自 URL 的脚本 src、<h:outputScript> 未导入的 JS 库（请参阅@Andrey 答案）和错误的 jquery 分隔符（从问题中重复）。
对不起，我从未在 Richfaces 上工作过。试图提供一个快速的解决方案。