VRaptor + AutoComplete

Assuntos Gerais
#21

então o problema é outro :wink:

dá uma olhada no código fonte da página gerada, pra ver se não tá incluindo dois javascripts de versões diferentes da mesma lib

#22

O problema e a pecinha aki na frente do pc! Hehehe!!!

O código gerado é esse:


<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Reservas</title>

		<link rel="stylesheet" type="text/css" href="/reservas/stylesheets/stylesheets.css"/>
		<link rel="stylesheet" href="/reservas/stylesheets/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" />
		<link rel="stylesheet" type="text/css" href="/reservas/stylesheets/datatable.css"/>
		<link rel="stylesheet" type="text/css" href="/reservas/stylesheets/fullcalendar.css"/>
		<link rel="stylesheet" type="text/css" href="/reservas/stylesheets/jquery.autocomplete.css"/>
		<script type="text/javascript" >
			var context = "/reservas";
		</script>
		
	    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script>
	    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"/></script>

	    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js" charset="utf-8" ></script>
	    <script type="text/javascript" src="/reservas/javascripts/jquery.dataTables.min.js"/></script>
	    <script type="text/javascript" src="/reservas/javascripts/cufon-yui.js"/></script>
	    <script type="text/javascript" src="/reservas/javascripts/cufon-replace.js"/></script>
	    <script type="text/javascript" src="/reservas/javascripts/Myriad_Pro_300.font.js"/></script>
	    <script type="text/javascript" src="/reservas/javascripts/jquery.meio.mask.min.js" charset="utf-8"></script>

	    <script type="text/javascript" src="/reservas/javascripts/jquery.formatCurrency-1.4.0.min.js" charset="utf-8"></script>
	    <script type="text/javascript" src="/reservas/javascripts/fullcalendar.min.js" charset="utf-8"></script>
	    <script type="text/javascript" src="/reservas/javascripts/jquery.price_format.js" charset="utf-8"></script>
	    
	    <script type="text/javascript" src="/reservas/javascripts/modernizr-custom.js" charset="utf-8"></script>
	    <script type="text/javascript" src="/reservas/javascripts/sssl.js" charset="utf-8"></script>
	    <script type="text/javascript" src="/reservas/javascripts/mousepress.js" charset="utf-8"></script>

    	<script type="text/javascript" src="/reservas/javascripts/polyfiller.js" charset="utf-8"></script>
    	<script type="text/javascript" src="/reservas/javascripts/jquery.blockUI.js"/></script>
    	<script type="text/javascript" src="/reservas/javascripts/jquery.form.js"/></script>
    	
    	<script type="text/javascript" src="/reservas/javascripts/application.js"/></script>
    	<script type="text/javascript" src="/reservas/javascripts/jquery.ui.autocomplete.js"/></script>
    	
		<!--[if lt IE 9]>
			<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
			<script type="text/javascript" src="/reservas/javascripts/html5.js"></script>
		<![endif]-->
		
	</head>
<body id="page2">
	<div class="body1">
		<div class="main">
			<!-- header -->
			<header>
				<div id="logo_box">
					<h1>
						<a  >Gestor de Reservas &nbsp;&lt;span&gt;Foco
								no Cliente!&lt;/span&gt;

						</a>
					&lt;/h1&gt;
				&lt;/div&gt;
				&lt;div id="redes"&gt;
					<ul >
						<li><a ><img  >
						</a>
						</li>
						<li><a ><img  >

						</a>
						</li>
						<li><a ><img  >
						</a>
						</li>

					</ul>
				&lt;/div&gt;
				&lt;nav&gt;

					<ul >
						<li><a >Home</a>
						</li>
						<li ><a >Cadastros</a>
						</li>
						<li><a >Painel</a>
						</li>

						<li><a >Contatos</a>
						</li>
						<li ><a >Sair</a>
						</li>
					</ul>
				&lt;/nav&gt;
			&lt;/header&gt;
			&lt;!-- / header --&gt;

		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="body2"&gt;
		&lt;div class="main"&gt;
			&lt;!-- content --&gt;
			&lt;section id="content"&gt;
				&lt;div class="marg_top wrapper"&gt;
					 &lt;form action="/reservas/cadastros/venda/" method="post" class="ajaxForm"&gt;
	
	
	&lt;fieldset&gt;

		&lt;legend&gt;Vendas&lt;/legend&gt;
		<br/>
		&lt;div style="float: left; width: 100%;"&gt;
			<p>
				&lt;input type="hidden" name="venda.id" value="" /&gt;
				&lt;input type="hidden" name="venda.reserva.id" value="" /&gt;
				&lt;input id="idProduto" type="hidden" name="venda.produto.id" value="" /&gt;
				&lt;label for="txtNome"&gt;Acomodação&lt;/label&gt;

				&lt;input type="text" id="txtNome" name="venda.acomodacao.numero" value="" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Produto:&lt;/label&gt;
				&lt;input type="text" id="txtProduto" name="venda.produto.nome" value="" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Desconto:&lt;/label&gt;

				&lt;input type="text" id="txtDesconto" name="venda.desconto" value="" maxlength="255" class="input_text"  /&gt;
			</p>	
			
			<p>
				&lt;label for="txtObs"&gt;Quantidade:&lt;/label&gt;
				&lt;input type="text" id="txtQuantidade" name="venda.quantidade" value="" maxlength="255" class="input_text"  /&gt;
			</p>						
		&lt;/div&gt;
		
		&lt;div class="divButtons"&gt;
	
		&lt;button type="submit" class="btnSalvar"&gt;Salvar&lt;/button&gt;		
		&lt;button id="btnPesquisar" formnovalidate="formnovalidate" class="btnPesquisar" type="submit"&gt;Pesquisar&lt;/button&gt;

&lt;button id="btnCancelar" class="btnCancelar" formnovalidate="formnovalidate" type="reset"&gt;Cancelar&lt;/button&gt;
		&lt;/div&gt;
		
	&lt;/fieldset&gt;
&lt;/form&gt;

	&lt;script&gt;
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#txtProduto" ).autocomplete({
			source: availableTags
		});
	});
	&lt;/script&gt;
				&lt;/div&gt;
			&lt;/section&gt;

			&lt;!-- / content --&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="main"&gt;
		&lt;!-- footer --&gt;
		&lt;footer&gt;
			
			&lt;div class="under2"&gt;&lt;/div&gt;
			&lt;div class="wrapper font_size"&gt;
				&lt;div class="pad"&gt;

					<a  target="_blank">ReservasOn</a> designed by
					ReservasOn.com.br<br>
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/footer&gt;
		&lt;!-- / footer --&gt;
	&lt;/div&gt;
	&lt;script type="text/javascript"&gt;
		Cufon.now();
	&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
#23

acho que o problema é isso:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"/></script>
 ...
 <script type="text/javascript" src="/reservas/javascripts/jquery.ui.autocomplete.js"/></script>

tenta tirar o ui.autocomplete… acho que ele já tá incluido no ui lá de cima.

#24

Show de bola! Era isso mesmo! Funcionou! Agora preciso descobrir como faço para pegar os dados digitados no controller. No exemplo da apostila se usava o parâmetro “String q”.

http://localhost:8082/reservas/cadastros/venda/autocomplete.json?callback=jQuery16208799252790519346_1319753928366&featureClass=P&style=full&maxRows=12&name_startsWith=ab&_=1319753933953

O texto que digitei ele passar aqui: name_startsWith=ab

#25

vc pode colocar o nome que vc quiser… é só colocar lá na option data do $.ajax:

data: {nomeQueVCQuer: request.term}

e no controller vc usa o mesmo nome.

#26

Ótimo!

No option select eu adicionei o $(’#idProduto’).val(ui.item.id) para setar o id no input hidden. Porém no alert exibe: select: undefined.

	&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "&lt;c:url value='/cadastros/venda/autocomplete.json'/&gt;",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.id
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function(event, ui ) {
				alert("select " + ui.item.id);
				$('#idProduto').val(ui.item.id); 
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	&lt;/script&gt;
#27

esse item é o objeto que vc retornou no response… se vc quer ter ui.item.id vc tem que fazer:

response( $.map( data, function( item ) {  
  return {  
     label: item.nome,  
     value: item.id,
     id: item.id  
  }  
}));

vc pode passar qqer coisa que vc quiser =)

#28

Lucas, muito obrigado pela ajuda! Agora está funcionando perfeitamente! Abraço!

#29