Jquery 与 JSF 隐藏文本答案

【问题标题】：Jquery with JSF to Hide textJquery 与 JSF 隐藏文本
【发布时间】：2012-01-17 06:56:43
【问题描述】：

我是 JQuery 的新手。我正在尝试在 JSF 中使用 jQuery 来隐藏和显示组件。虽然用 JSF 很容易实现，但我的要求还是用 jQuery 来实现。

但我无法隐藏任何组件。代码sn-p是：-

<%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
    <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<html> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JQuery Effects</title> 
    <script type="text/javascript" src="script/jquery-1.7.1.js" >

    function showSuccess()
    {
    jquery("#formId\\:showLinkId").click(function(){
        jquery("#formId\\:success").hide('slow',function(){
            alert('Hide Done');
        });
    });
    }
    </script>

    </head>

    <body>
    <f:view>
    <h:form id="formId">
    <rich:panel header="Jquery" style="position: relative; width: 350px;">
    <h:commandButton id="showLinkId" value="Click Here" onclick="showSuccess()" />

    <h:outputLabel id="success" value="DONE" ></h:outputLabel>
    </rich:panel>
    </h:form>
    </f:view>
    </body>
    </html>

但是在 GUI 上看不到任何效果。脚本文件保存在 WebContent/script 中。

我什至尝试在页面之间包含脚本，但是再次没有用

请指导我..

【问题讨论】：

如果可能，请不要将 JSP 与 JSF 一起使用。使用 Facelets！这会让你保持清醒；）
@Mike Braun 我们可能会迁移到 JSF2.0。

标签： jquery jsf jsf-2 richfaces

【解决方案1】：

<script type="text/javascript" src="script/jquery-1.7.1.js" >

如下修改：

<script type="text/javascript">

按如下方式绑定事件处理程序：

jQuery(document).ready(function() {
    jQuery("#formId\\:showLinkId").click(function(){
        jQuery("#formId\\:success").hide('slow',function(){
            alert('Hide Done');
        });
    });
});

您可以从<h:commandButton id="showLinkId" ... 中删除onclick="showSuccess()"。

如果您不确定 JSF 呈现的是什么 client-id，您可以在浏览器上查看 HTML 源代码。例如确保您在 jquery("#formId\\:showLinkId") 中使用正确的 id。

【讨论】：

我认为我不需要改变任何东西。我使用了你告诉的任何内容。从脚本中删除了 src 属性并更改了事件处理程序。但是在 GUI 上仍然没有看到任何效果。为什么在第一个 jQuery Q 中是大写而在其他的中是小...另外，我总是在 jquery 下得到一条红线，说明函数 jquery(string) 未定义...
如果我从 JSF 中删除 showSuccess() 它将如何在单击命令按钮时调用此函数...
抱歉，我刚刚复制了你的。 Q 是大写。
文档加载完成后，jQuery会为你绑定event-handler。
@Hukamanata：抱歉忘了告诉你你需要包含 JQuery。为此使用另一个<script type="text/javascript" src="script/jquery-1.7.1.js"></script>。

【解决方案2】：

至少有4个问题：

您需要在单独的<script> 元素中声明函数，而不是在加载脚本文件的元素中。
函数名jquery() 错误。应该是jQuery()。
在onclick 期间，您正在调用一个函数，该函数又将一个新的单击事件处理程序附加到按钮，但这又根本没有被调用。
<h:commandButton> 默认触发一个 POST 请求，但您不会以任何方式阻止它。

基本上有两种方法可以解决您的问题：

直接在showSuccess()函数中调用hide函数，在onclick中返回false即可。

<script type="text/javascript" src="script/jquery-1.7.1.js" ></script>
<script type="text/javascript">
    function showSuccess() {
        jQuery("#formId\\:success").hide('slow',function() {
            alert('Hide Done');
        });
    }
</script>

...

<h:form id="formId">
    <rich:panel header="Jquery" style="position: relative; width: 350px;">
        <h:commandButton id="showLinkId" value="Click Here" onclick="showSuccess(); return false;" />
        <h:outputText id="success" value="DONE" />
    </rich:panel>
</h:form>

移除onclick函数并在文档加载后绑定事件处理程序。

<script type="text/javascript" src="script/jquery-1.7.1.js" ></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#formId\\:showLinkId").click(function() {
            jQuery("#formId\\:success").hide('slow',function() {
                alert('Hide Done');
            });

            return false;
        });
    });
</script>

...

<h:form id="formId">
    <rich:panel header="Jquery" style="position: relative; width: 350px;">
        <h:commandButton id="showLinkId" value="Click Here" />
        <h:outputText id="success" value="DONE" />
    </rich:panel>
</h:form>

请注意，这些组件不一定是 JSF 组件。以下应该同样有效。

<script type="text/javascript" src="script/jquery-1.7.1.js" ></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#showLinkId").click(function() {
            jQuery("#success").hide('slow',function() {
                alert('Hide Done');
            });
        });
    });
</script>

...

<h:form id="formId">
    <rich:panel header="Jquery" style="position: relative; width: 350px;">
        <button id="showLinkId">Click Here</button>
        <span id="success">DONE</span>
    </rich:panel>
</h:form>

【讨论】：

这个解决方案确实有效。我还发现这个问题是由脚本引起的，当我使用脚本 src 作为 google 托管的脚本时，相同的代码运行完美，没有任何修改。但是是否可以使用 JQuery.. 隐藏或显示存在于中的 JSF 组件