[Resolvido] Checkbox dinâmico com Javascript e VRaptor 3

Assuntos Gerais
#21

Amigo, acho melhor você criar uma chamada AJAX para determinar quem é o AVATAR e outro AJAX para salvar/vincular as FOTOS do imóvel.

E o ideal é para cada AJAX ter uma URL específica e seus respectivos parâmetros. Isto facilitará seu entendimento…

Como você mesmo disse: O parâmetro Foto avatar, através da assinatura: public void salva(UploadedFile imagem, Imovel imovel, Foto foto, Foto avatar), esta vindo nulo e isto ocorre no momento em que o vRaptor injeta os valores para os parâmetros e como ele não encontrou, no teu JSP, uma referência correspondente para avatar, ele injeta nulo.

Então para facilitar, você poderá ter uma lógica para salvar a FOTO do imóvel, passando os parâmetros: IMÓVEL e FOTO.

E outra lógica para atribuir um AVATAR para o IMÓVEL, passando os parâmetros: IMÓVEL e AVATAR. Porém neste caso você deverá primeiro localizar o imóvel pelo seu ID em seguida atribuir o avatar ao seu atributo “fazer um setAvatar(avatar)” e ao final salvar o imóvel.

É muito simples!

Eu sinceramente indico a você dar uma estudada na apostila da Caelum: FJ-28: Desenvolvimento ágil para Web 2.0 com VRaptor, Hibernate e AJAX

Nela você encontrará todas esta informações bem detalhadas e só terá que modificá-las conforme a tua necessidade.

#22

Tarde pessoal! O/
Meu <c:choose> está maluco, existe somente uma foto que é avatar no banco mas ele marca todas os radio button na jsp.

<c:choose>
	<c:when test="${imovel.avatar != null}">  
	<input type="radio" value="${imovel.avatar}" checked="checked" />Avatar	
	</c:when>	
	<c:otherwise>	 
	<input type="radio" name="avatar" value="${imovel.avatar}" onclick="setAvatar();" />Avatar
	</c:otherwise>
	</c:choose>

Se tenho apenas uma foto como avatar na coluna avatar_id_foto da tabela Imovel, pq ele marca os dois?

Tentei com avatar.id tb, mas nenhum radio button fica marcado.

<c:choose>
	<c:when test="${avatar.id != null}">  
	<input type="radio" value="${avatar.id}" checked="checked" />Avatar	
	</c:when>	
	<c:otherwise>	 
	<input type="radio" name="avatar" value="${avatar.id}" onclick="setAvatar();" />Avatar
	</c:otherwise>
	</c:choose>

Onde eu tô errando?

Valeu!!

#23

ao invés de ${imovel.avatar != null} faça ${not empty imovel.avatar}

#24

Obrigado Lucas, mas não deu boa.
Tentei dessa forma e inclusive com ${not empty avatar.id}, o comportamento é o mesmo, ou preenche td ou fica td vazio, a tabela Imovel possui um imovel com a id da foto na coluna.

Então se a coluna não estiver vazia, deveria dar um checked na foto certa e o resto deixar desmarcado né? Acho que o meu raciocinio está correto…

Abraço!

#25

bom, acho que o que vc quer testar não é se o avatar existe, e sim se ele é igual à foto atual, não?

seu teste então deveria ser algo do tipo: ${imovel.avatar.id eq foto.id} (e vc tá iterando sobre as fotos)

#26

[quote=Leandro-SP]Oi pessoal…
Aproveitando o topico… alguém sabe como gero um formulario dinamico com o vraptor3… estava pensando em algo do tipo campos basicos como Nome, Endereço, Data de Nascimento, Sexo, e mais alguns serem fixos, e outros campos serem dinamicos no formulario. Como por exemplo buscar os campos dinamicamente no Mysql e gerar a tela de formulario. Estou querendo a cabeça aqui e não consigo. Apenas queria que facilitasse na hora de incluir mais um campo no formulario era só inserir mais uma linha numa tabela do mysql.
Alguem pode me ajudar?
Aguardo resposta.
Obrigado.
Leandro.[/quote]

Alguém pode me ajudar por favor? Acho melhor eu abrir outro topico?

#27

[quote=Leandro-SP]Oi pessoal…
Aproveitando o topico… alguém sabe como gero um formulario dinamico com o vraptor3… estava pensando em algo do tipo campos basicos como Nome, Endereço, Data de Nascimento, Sexo, e mais alguns serem fixos, e outros campos serem dinamicos no formulario. Como por exemplo buscar os campos dinamicamente no Mysql e gerar a tela de formulario. Estou querendo a cabeça aqui e não consigo. Apenas queria que facilitasse na hora de incluir mais um campo no formulario era só inserir mais uma linha numa tabela do mysql.
Alguem pode me ajudar?
Aguardo resposta.
Obrigado.
Leandro.[/quote]

Alguém pode me ajudar por favor? Acho melhor eu abrir outro topico?

#28

O garcia-jj já tinha te respondido…

Enfim…

se vc quer fazer um formulario de adição (não de edição) dinâmico, vc pode fazer algo do tipo:

result.include("campos", umaListaDeStringComONomeDosCampos);

no jsp:

<c:forEach items="${campos}" var="campo">
    <label for="${campo}"><fmt:message key="${campo}"/></label>
    <input id="${campo}" type="text" name="${campo}"/>
</c:forEach>

de qqer forma, não me parece algo muito fácil de manter ou entender o que tá acontecendo…
vc não tem um jeito melhor de fazer o que vc quer?

#29

O garcia-jj já tinha te respondido…

Enfim…

se vc quer fazer um formulario de adição (não de edição) dinâmico, vc pode fazer algo do tipo:

result.include("campos", umaListaDeStringComONomeDosCampos);

no jsp:

<c:forEach items="${campos}" var="campo">
    <label for="${campo}"><fmt:message key="${campo}"/></label>
    <input id="${campo}" type="text" name="${campo}"/>
</c:forEach>

de qqer forma, não me parece algo muito fácil de manter ou entender o que tá acontecendo…
vc não tem um jeito melhor de fazer o que vc quer?[/quote]

Lucas Cavalcanti,
Não consegui pensar numa forma diferente de fazer isso.
Teria um formulário padrão com campos básicos e também poderia incluir algumas linhas numa tabela do Mysql e cada linha seria o nome de um novo campo novo no formulário. Vou tentar fazer desse jeito que você passou… mas será uma boa idéia essa? A idéia é poder incluir um novo campo num formulario facilmente…sem ter que mapear esse novo campo num DAO.

Ex.:

Nome
Endereço
Sexo
Data Nascimento
Telefone
E-mail

São os campos básicos. Que sempre existirão.

Aí incluiria uma linha numa tabela X com o texto: “Possui Carro?”.
E aí geraria um formulario do tipo:

Nome
Endereço
Sexo
Data Nascimento
Telefone
E-mail
Possui Carro? (aqui ainda teria que dar um jeito de colocar um Checkbox com SIM ou NÃO)

Entendeu?

Aguardo resposta.
Obrigado.
Att,
Leandro.

#30

cara, até dá pra fazer isso, mas vai dar um trabalho bem grande…

vc vai precisar de uma classe pra representar um campo do formulário, com nome, label e tipo pelo menos
a partir disso vc vai gerar o input/select/textarea/checkbox necessário…

e como vc vai receber esses dados “dinamicos” no seu controller? não parece algo mto fácil nem bom de fazer… seus campos vão mudar tanto assim? tanto a ponto de vc não querer mudar o seu código da aplicação?
vale a pena perder um tempo grande com isso agora?

#31

Oi Lucas!
Fiz um teste aqui com javascript para capturar o valor de imovel.avatar, olha o que está vindo:

Não está vindo a id da foto, mas essa string doida ai. Deveria vir a id 258 que esta lá.

Abraço!!!

#32

se vc quer que venha a id vc precisa colocar:
${imovel.avatar.id}

pq imovel.avatar eh a foto inteira

#33

Agora foi! Valeu Lucas!=)

<c:when test="${imovel.avatar.idFoto eq foto.idFoto}">

Beleza, agora já consigo marcar no radio button quem é o avatar, só falta criar a função ajax pra mandar o imovel e foto pro Controller e atualizar no banco quem é o avatar.
Abraço!!

#34

Tô tentando testar o Controller mas os dados não estão chegando até ele:

 public void teste(Imovel imovel, Foto foto) {
		 result.include("mensagem", "dados recebidos pelo Controller");
	 }
var foto = $('input[name=avatar]:checked').val();
var imovel = "${imovel.idImovel}";

$.ajax({
	   type: "POST",
	   url: "teste",
	   contentType: "application/x-www-form-urlencoded", 
	   async: false, 
	   data: {imovel: 'imovel', foto: 'foto'},
	   success: function(){
	     alert( "Teste do Controller!" );
	   }
	 });

É isso mesmo? Só colocar o método que está no Controller ali na url?
Abraço!!

#35

no data vc tem que setar os campos do imovel e foto:

data: { 'imovel.id' : 33, 'foto.id' : 25 }
#36

Nem sinal de vida Lucas… =/
Alterei o “data”.

<script type="text/javascript">
$(document).ready(function() {
$("input[name*='avatar']").click(function() {
// inicio do codigo ajax

$.ajax({
	   type: "POST",
	   url: "teste",
	   contentType: "application/x-www-form-urlencoded", 
	   async: false, 
	   data: { 'imovel.id' : 33, 'foto.id' : 25 },
	   success: function(){
	     alert( "Teste do Controller!" );
	   }
	 });

// final do codigo ajax	
	});
});
</script>

Segui o manual do ajax lá no site, não consigo ver nada de errado ai.

#37

existe o método setId(…) nas classes Imovel e Foto?
se não tiver, mude o id para o nome dos seus setters (sem o set e com a primeira minuscula)

#38

Na verdade eu só quero testar se o Controller esta recebendo, vou mandar as id’s pro Controller e redirecionar pra jsp os valores.

public void teste(Long idImovel, Long idFoto) {
		 result.include("mensagem", "dados recebidos:" + idImovel + idFoto);
	 }

Tô tentando enviar daquela forma:

$.ajax({
	   type: "POST",
	   url: "teste",
	   contentType: "application/x-www-form-urlencoded", 
	   async: false, 
	   data: { 'imovel.idImovel' : 35, 'foto.idFoto' : 25 },
	   success: function(){
	     alert( "Teste do Controller!" );
	   }
	 });

Na JSP:

<h3>${mensagem}</h3>

Mas não acontece nada. =/
Assim que esse teste funcionar eu eu vou entender como funciona a requisição ajax e depois altero o Controller pra persistir os dados. Mas primeiro a bagaça têm que funcionar. =) A url está certa? É só o método que está no Controller?

#39

se o nome do parametro é idImovel e ele é de um tipo primitivo (números, strings e datas), vc precisa mandar um parametro na requisição chamado idImovel:

data: { 'idImovel' : 35, 'idFoto' : 25 }

http://vraptor.caelum.com.br/documentacao/resources-rest/

#40

Favoritei esse link. =)

O problema é que a função ajax não está funcionando, fiz um teste simples de alerta, sem usar o Controller, pegando apenas o que está na JSP.

var foto = $('input[name=avatar]:checked').val();
var imovel = "${imovel.idImovel}";
alert("O valor do radio button selecionado é: " + foto + " e o imóvel é: " + imovel);

O resultado:

Ou seja, o problema é no ajax:

$.ajax({
	   type: "POST",
	   url: "teste",
	   contentType: "application/x-www-form-urlencoded", 
	   async: false, 
	   data: { 'idImovel' : 35, 'idFoto' : 25 },
	   success: function(){
	     alert( "Teste do Controller!" );
	   }
	 });

É isso ai que não tá funcionando, e eu não sei se é a uri, ou outro parâmetro da função. =/