Problema ao utilizar jQuery com jsf

Programação Java
,
#1

Estou com dificuldades ao adicionar o jQuery no meu projeto jsf. Quero adicionar a visualização da senha digitada pelo usuário toda vez que ele clicar na imagem que contem um “olho”, porém, não está funcionando. Ainda sou bem novo em javascript e jQuery. Se alguém souber onde estou errando, me dá um help por favor!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
		integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
		crossorigin="anonymous"></script>

</h:head>
<h:body style="margin-top: 200px;">
	<div
		style="margin: 0 auto; padding: 20px; width: 27%; border-radius: 10px; border: 1px solid black;">
		<h:form>
			<h1>Tela de Login</h1>
			<h:panelGrid columns="2">
				<p:outputLabel for="usuario" value="Usuário: " />
				<p:inputText id="usuario" size="25" />
			</h:panelGrid>
			<br/>

			<h:panelGrid columns="2">
				<p:outputLabel for="senha" value="Senha: " />
				<p:inputText type="password" id="senha" size="25">
					<img id="olho"
						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4jd2SvW3DMBBGbwQVKlyo4BGC4FKFS4+TATKCNxAggkeoSpHSRQbwAB7AA7hQoUKFLH6E2qQQHfgHdpo0yQHX8T3exyPR/ytlQ8kOhgV7FvSx9+xglA3lM3DBgh0LPn/onbJhcQ0bv2SHlgVgQa/suFHVkCg7bm5gzB2OyvjlDFdDcoa19etZMN8Qp7oUDPEM2KFV1ZAQO2zPMBERO7Ra4JQNpRa4K4FDS0R0IdneCbQLb4/zh/c7QdH4NL40tPXrovFpjHQr6PJ6yr5hQV80PiUiIm1OKxZ0LICS8TWvpyyOf2DBQQtcXk8Zi3+JcKfNafVsjZ0WfGgJlZZQxZjdwzX+ykf6u/UF0Fwo5Apfcq8AAAAASUVORK5CYII=" />
				</p:inputText>
			</h:panelGrid>
			<br/>
<script>
	var senha = $('#senha');
	var olho= $("#olho");

	olho.mousedown(function() {
	  senha.attr("type", "text");
	});

	olho.mouseup(function() {
	  senha.attr("type", "password");
	});
	
	$( "#olho" ).mouseout(function() { 
	  $("#senha").attr("type", "password");
	});
			
</script>
			<p:commandButton value="Entrar" />
			<a style="float: right;" href="">Cadastre-se</a>
		</h:form>
	</div>
</h:body>

</html>
#2

Está dando algum erro?

#4

Fiz um teste aqui trocando o <p:inputText/ > do primefaces para a tag normal <input> e funcionou. Mas fazendo isso eu perco a formatação do primefaces.

#5

Depois de um bom tempo de pesquisa consegui resolver o problema. O jQuery não funciona com componentes JSF, ele funciona com a árvore html DOM que é gerada pelo JSF. Basicamente foi só inspecionar a página e pegar o id gerado pelo DOM, em seguida, atribuir esse ID na variável javascript.

Referência: How to select JSF components using jQuery? - Stack Overflow

1 curtida
#6

Já ia comentar isso, pq o JSF concatena o ID do elemento com o ID do form, por exemplo: formA:campoA.

Que bom que resolveu!