Jquery с JSF, чтобы скрыть текст - PullRequest
Новая
       15

Jquery с JSF, чтобы скрыть текст

3 голосов
/ 10 декабря 2011

Я новичок в JQuery. Я пытаюсь использовать JQuery в JSF, чтобы скрыть и показать компоненты. Хотя это может быть легко достигнуто с помощью 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>

Однако никакого эффекта не видно в графическом интерфейсе. Файл сценария сохраняется внутри WebContent / script.

Я даже пытался включить скрипт между страницами, но снова безрезультатно

Пожалуйста, ведите меня ..

Ответы [ 2 ]

3 голосов
/ 10 декабря 2011

Существует как минимум 4 проблемы:

  1. Вам необходимо объявить функции в отдельном элементе <script>, чем тот, в который загружен файл скрипта.

  2. Имя функции jquery() неверно.Значение должно быть jQuery().

  3. Во время onclick вы вызываете функцию, которая, в свою очередь, присоединяет к кнопке новый обработчик события щелчка, но это в свою очередь не вызывается привсе.

  4. <h:commandButton> по умолчанию запускает запрос POST, но вы не блокируете его каким-либо образом.

В основном это2 способа решения вашей проблемы:

  1. Просто вызовите функцию скрытия непосредственно в функции showSuccess() и верните false в 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>

  2. Удалите функцию 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>
0 голосов
/ 10 декабря 2011 
<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()" из <h:commandButton id="showLinkId" ....

Если вы не уверены, какой идентификатор клиента отображается в JSF, вы можете увидеть исходный HTML-код в браузере.например, чтобы убедиться, что вы используете правильный идентификатор в jquery("#formId\\:showLinkId").

...