Não consigo incluir JQUEY no meu projeto

24 de julho de 2017 6 respostas

Dayson_Rodrigues 24 de julho de 2017

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>

6 Respostas

rodevops 24 de jul. de 2017

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

Dayson_Rodrigues 25 de jul. de 2017

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

rodevops 25 de jul. de 2017

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>

Dayson_Rodrigues 25 de jul. de 2017

Opa! deu certo!

agora só ficou assim

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

rodevops 25 de jul. de 2017

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

Mais sobre js bloqueante aqui…

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

E aqui…

Dayson_Rodrigues 26 de jul. de 2017

é 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

Criado 24 de julho de 2017

Ultima resposta 26 de jul. de 2017

Respostas 6

Participantes 2

6 Respostas

Topicos relacionados