Não consigo incluir JQUEY no meu projeto

Programação
, ,
#1

estou fazendo um tag customizada usando o JQUERY, e ao tentar incluir uma tag no campo data, não estou conseguindo.

OBS: meu arquivo JQUERY, está dentro de: WebContent/resources/js

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="caelum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	
	<script type="text/javascript" src="resources/js/jquery-ui.js"></script>
	<script type="text/javascript" src="resources/js/jquery.js"></script>
	  
	
</head>
<body>
	<form action="adicionaContato">
		Nome:<input type="text" name="nome"></br> 
		Email:<input type="email" name="email"></br>
		Endereco:<input type="text" name="endereco"></br>
		Data de Nascimento:  <caelum:campoData id="dataNascimento" /> <br/>
			
		<input type="submit" value="Enviar">
	</form>
</body>
</html>

arquivo campoData.tag

<%@ tag language="java" pageEncoding="ISO-8859-1"%>

<%@ attribute name="id" required="true" %>

<input type="text" name="${id}" id="${id}" />

<script type="text/javascript">
	("${id}").datepicker({ dateFormat: "dd/MM/yyyy"  });
</script>
#2

A ordem desses fatores, alteram o produto…

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

Procure colocá-los na tag body (boas práticas) antes de fechar assim…

  <script type="text/javascript" src="resources/js/jquery.js"></script>
  <script type="text/javascript" src="resources/js/jquery-ui.js"></script>
</body>

Em javascript, a ordem de dependências é necessária seguir e nesse caso, jquery-ui depende do jquery, logo esse deve ser carregado primeiro…

Outra dica é sempre usar o console do navegador (F12), hoje em dia todo navegador tem um e é bem útil para debugar js e ver o que está errado/acontecendo…

E também percebi nessa linha faltou um $ assim…

$("${id}").datepicker({ dateFormat: "dd/MM/yyyy"  });
#3

Nada Ainda rsrs…
Fiz as mudanças as possíveis mudanças que você me orientou. Pior que visualizei o erro no navegador.

tagFiles.tag

<%@ tag language="java" pageEncoding="ISO-8859-1"%>

<%@ attribute name="id" required="true" %>

<input type="text" name="${id}" id="${id}" />

<script type="text/javascript">
	$("${id}").datepicker({ dateFormat: "dd/MM/yyyy"  });
</script>

Minha Página.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="caelum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
	<form action="adicionaContato">
		Nome:<input type="text" name="nome"></br> 
		Email:<input type="email" name="email"></br>
		Endereco:<input type="text" name="endereco"></br>
		Data de Nascimento:  <caelum:campoData id="dataNascimento" /> <br/>
			
		<input type="submit" value="Enviar">
	</form>
	<script type="text/javascript" src="resources/js/jquery.js"></script>
	<script type="text/javascript" src="resources/js/jquery-ui.js"></script>
</body>
</html>

Meu Erro no Navegador

image.png1006×479 28.9 KB

#4

Nesse caso como o campoData vem antes, coloque os scripts na head novamente só que dessa vez ordenados…

<head>
    <script type="text/javascript" src="resources/js/jquery.js"></script>
    <script type="text/javascript" src="resources/js/jquery-ui.js"></script>
</head>
#5

Opa! deu certo!

agora só ficou assim

uma duvida, qual a diferença de colocar dentro do para dentro do ??

#6

Pra ficar feio assim, você não importou o css que vem junto do jquery-ui e você precisa incluir uma tag link (essa pode ser no head)

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">

Não me recordo o nome do arquivo ao certo, dê uma olhada na documentação do site…

Se você quis dizer dentro do head ou body…

Dentro do body ele será carregado depois de todos os elementos da página (DOM) e evita bloquear a renderização (carregamento) da página, por exemplo…

Já entrou em algum site que você vê a página toda feia e depois de carregar tudo ela vai mudando? Isso é um bloqueador de carregamento… agora imagine um arquivo js muito pesado com muitas funções etc se ele estiver no head, vai ser carregado antes do html causando lentidão e fazendo o usuário ficar bravo com isso :joy:

Mais sobre js bloqueante aqui…

https://developers.google.com/speed/docs/insights/BlockingJS

E aqui…

#7

é Esse mesmo o arquivo, tirei da documentação, agora quando adiciono o css, ele não aparece o calendario rsrs… Perdi um dia nesse negocio do JQUERY rsrs