当前位置：文江博客话题详情

Jquery 使用 JSF 隐藏文本

发布于 2024-12-20 15:28:51 字数 1581 浏览 2 评论 0 原文

我是 JQuery 新手。我正在尝试在 JSF 中使用 jQuery 来隐藏和显示组件。虽然可以使用 JSF 轻松实现，但我的要求仍然是使用 jQuery 来实现。

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

<%@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 中。

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

请指导我..

原文

I am new to JQuery. I am trying to use jQuery in JSF to hide and show components. Although it can be easily achieved with JSF but still my requirement is to use jQuery to achieve this.

But I am not able to hide any component.
The code snippet is:-

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

However no effect is visible on GUI.
The script file is saved inside WebContent/script.

I even tried including the script in between the pages however again to no use

Please guide me..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

许一世地老天荒 2024-12-27 15:28:52

至少存在 4 个问题：

您需要在单独的
函数名称jquery()错误。应该是 jQuery()。
在 onclick 期间，您调用一个函数，该函数又将新的单击事件处理程序附加到按钮，但根本不会调用该函数。
默认情况下会触发 POST 请求，但您不会以任何方式阻止它。

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

只需在 showSuccess() 函数中直接调用 hide 函数并在 onclick 中返回 false。


<脚本类型=“text/javascript”>
    函数显示成功（）{
        jQuery("#formId\\:success").hide('slow',function() {
            Alert('隐藏完成');
        });
    }


...


    
        >

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


<脚本类型=“text/javascript”>
    jQuery(文档).ready(函数() {
        jQuery("#formId\\:showLinkId").click(function() {
            jQuery("#formId\\:success").hide('slow',function() {
                Alert('隐藏完成');
            });

            返回假；
        });
    });


...

请注意，这些组件不一定是 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>

There are at least 4 problems:

You need to declare functions in a separate <script> element than the one where a script file is loaded.
The function name jquery() is wrong. Is should be jQuery().
During onclick you're calling a function which in turn attaches a new click event handler to the button, but this is in turn not invoked at all.
The <h:commandButton> fires by default a POST request, but you are not blocking it in any way.

There are basically 2 ways to fix your problem:

Just call the hide function directly in the showSuccess() function and return false in the onclick.

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

Remove the onclick function and bind the event handler after document load.

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

Note that those components doesn't necessarily need to be JSF components. The following should work equally good.

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

回复收藏 0 原文

莫相离 2024-12-27 15:28:52

<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');
        });
    });
});

您可以从 onclick="showSuccess()" >。

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

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

Change it as follows:

<script type="text/javascript">

Bind the event-handler as follows:

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

You can remove onclick="showSuccess()" from <h:commandButton id="showLinkId" ....

If you are not sure of what client-id is rendered by JSF, you can see the HTML source on the browser. e.g. to make sure that you are using the right id in jquery("#formId\\:showLinkId").

回复收藏 0 原文

~没有更多了~