VRaptor: atualizar lista de checkbox com JSON

Boa noite pessoal! Preciso de uma ajuda de vocês. Tenho uma página composta por um formulário e por uma lista(table) que exibe os itens já cadastrados. Quando clico em uma linha da tabela carrego no formulário os dados do registro. No formulário tenho uma lista de checkbox. Quando clico em uma linha da tabela carrego os dados no formlário, porém não marca os checkbox que foram selecionados no momento do cadastro do registro.

Segue abaixo o código do jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<c:if test="${not empty errors}">
	<c:forEach items="${errors}" var="error">
		${error.category} - ${error.message}<br />
	&lt;/c:forEach&gt;
&lt;/c:if&gt;
&lt;form action="${linkTo[AcomodacaoController].salvar}" method="post" class="ajaxForm"&gt;
	
	
	&lt;fieldset&gt;
		&lt;legend&gt;Cadastro de Acomodação&lt;/legend&gt;
		<br/>
		&lt;div style="float: left; width: 50%;"&gt;
			<p>
			&lt;input type="hidden" name="acomodacao.id" value="${acomodacao.id}" /&gt;
			&lt;label for="txtNumero"&gt;Número: *&lt;/label&gt;
			&lt;input type="text" id="txtNumero" name="acomodacao.numero" value="${acomodacao.numero}" maxlength="255" autofocus="autofocus" class="input_text required" /&gt;
			</p>
			
			<p>
			&lt;label for="txtNrQuartos"&gt;Nr Quartos: *&lt;/label&gt;
			&lt;input type="text" id="txtNrQuartos" name="acomodacao.nroDeQuartos" value="${acomodacao.nroDeQuartos}" maxlength="10" class="input_text required" /&gt;
			</p>
			
			<p>
			&lt;label for="txtOcupacao"&gt;Cap Ocupação:&lt;/label&gt;
			&lt;input type="text" id="txtOcupacao" name="acomodacao.capacidadeOcupacao" value="${acomodacao.capacidadeOcupacao}" maxlength="10" /&gt;
			</p>
			
			<p>
			&lt;label for="txtMaxima"&gt;Cap Máxima:&lt;/label&gt;
			&lt;input type="text" id="txtMaxima" name="acomodacao.capacidadeMaxima" value="${acomodacao.capacidadeMaxima}" maxlength="10" /&gt;
			</p>						
			
			<p>
			&lt;label for="txtObs"&gt;Observações:&lt;/label&gt;
			&lt;textarea rows="5" cols="20" name="acomodacao.observacao" class="input_text"&gt;${acomodacao.observacao}&lt;/textarea&gt;
			</p>
		&lt;/div&gt;
		&lt;div style="float: right; width: 49%;"&gt;						
				&lt;label for="txtCaracteristica"&gt;Características: *&lt;/label&gt;<br/><br/>
				&lt;c:forEach items="${acomodacao.listaCaracteristicas}" var="caracteristica"  varStatus="s"&gt;
					&lt;input type="checkbox" name="caracteristica[${s.index}].id" 
								value="${caracteristica.id}" ${caracteristica.checked}&gt;&lt;/input&gt;
					${caracteristica.tipo}<br/>
				&lt;/c:forEach&gt;
				
					&lt;label for="txtTipoAcomodacao"&gt;Tipo Acomodação: *&lt;/label&gt;<br/><br/>
					&lt;c:forEach items="${acomodacao.listaTipoAcomodacao}" var="tipoAcomodacao"
								varStatus="t"&gt;
						&lt;input type="radio" name="tipoAcomodacao.id"
									value="${tipoAcomodacao.id}" ${tipoAcomodacao.checked}&gt;&lt;/input&gt;
						${tipoAcomodacao.tipo}
						<br />		
					&lt;/c:forEach&gt;				
		&lt;/div&gt;

		
		&lt;div style="float: right; width: 100%;"&gt;
		<br/><br/><br/>
			&lt;button type="submit" class="btnSalvar"&gt;Salvar&lt;/button&gt;			
			&lt;button id="btnPesquisar" class="btnPesquisar" type="submit" &gt;Pesquisar&lt;/button&gt;        
			&lt;button type="submit" class="btnExcluir" &gt;Excluir&lt;/button&gt;
			&lt;button id="btnCancelar" class="btnCancelar" type="reset" &gt;Cancelar&lt;/button&gt;
		&lt;/div&gt;
	&lt;/fieldset&gt;
&lt;/form&gt;

Segue abaixo o código do método do Controller:

	@Get("/acomodacao/{id}")
	public void form(Long id){
		final Acomodacao acomodacao = acomodacoes.obter(id);
		
		List&lt;Caracteristica&gt; listaCaracteristicas = caracteristicas.listar();
		List&lt;TipoAcomodacao&gt; listaTipoAcomodacao = tiposDeAcomodacoes.listar();
		for(Caracteristica c : acomodacao.getCaracteristicas()){
			for(Caracteristica cc : listaCaracteristicas){
				if(c.getId() == cc.getId()){
					cc.setChecked("checked");
				}
			}
		}
		
		for(TipoAcomodacao ta : listaTipoAcomodacao ){
			if(acomodacao.getTipoAcomodacao().getId() == ta.getId()){
				ta.setChecked("checked");
			}
		}
		acomodacao.setListaCaracteristicas(listaCaracteristicas);
		acomodacao.setListaTipoAcomodacao(listaTipoAcomodacao);

		result.use(Results.json()).from(acomodacao).include("listaCaracteristicas", "listaTipoAcomodacao").serialize();

	}

Segue em anexo a imagem com a resposta da chamada.


bom, se o controller está retornando JSON, vc precisa consumir esse JSON com javascript e modificar a tela…vc está fazendo isso?

Bom dia Lucas! O código JavaScript que faz a requisição e recebe o json foi feito por um terceiro e não estou entendo direito ele. O código abaixo não marca os checkbox e nem os radio button.

Segue abaixo o código:

function configGrid(pesquisar) {
	var uri = pesquisar || actionRoot + "listar";
	
	if (!oTable || (typeof oTable == 'undefined')) {
		oTable = $('table.display').dataTable({
			"bStateSave" : true,
			"bSort" : false,
			"bInfo" : false,
			"bProcessing" : true,
			"bLengthChange" : false,
			"sAjaxSource" : uri,
			"bScrollInfinite" : true,
			"bScrollCollapse" : true,
			"bFilter" : false,
			"sScrollY" : "200px",
			"bJQueryUI" : true,
			"sAjaxDataProp" : "list",
			"sProcessing" : "Processando...",
			"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
				$(nRow).click(function() {
					$(nRow).addClass('row_selected');

					var get = actionRoot + aData.id;
////////////////////CHAMADA AO CONTROLLER /////////////////////////////					
					$.getJSON(get, function(data) {      
						propObj = '';
						applyValues(data); // TRATAMENTO DOS DADOS RECEBIDOS
						alternateButtons(true);
					});

				});

				return nRow;
			},
			"fnDrawCallback" : function() {
				$('td').bind('mouseenter', function() {
					$(this).parent().children().each(function() {
						$(this).addClass('datatablerowhighlight');
					});
				});
				$('td').bind('mouseleave', function() {
					$(this).parent().children().each(function() {
						$(this).removeClass('datatablerowhighlight');
					});
				});
			},

			"aoColumns" : colunas
		});

		$("table.display").click(function(event) {
			$(oTable.fnSettings().aoData).each(function() {
				$(this.nTr).removeClass('row_selected');
			});
			$(event.target.parentNode).addClass('row_selected');
		});

	} else {
		oTable.fnClearTable(0);
		oTable.fnDraw();
	}

	return oTable;

};


function applyValues(data) {
	$.each(data, function(k, v) {

		if (typeof v == 'object') {
			propObj += k + ".";
			applyValues(v);
		} else {
			var inputName = propObj + k;
			var input = $('.ajaxForm :input[name="' + inputName + '"]');

			if (input.is(":radio")) {
				$.each(input, function() {
					var radio = $(this);
					if (radio.val() == v) {
						radio.attr("checked", "checked");
					}
				});

			} else if (input) {
				input.val(v);
			}
		}
	});
};


tenta trocar o

if (input.is(":radio")) {  

por

if (input.is(":radio") || input.is(':checkbox')) {  

acho que não é só isso, mas é no método applyValues que vc tem q mexer

Obrigado pela resposta Lucas.

Fiz a alteração no código mas ainda não está marcando.

		&lt;div style="float: right; width: 49%;"&gt;						
				&lt;label for="txtCaracteristica"&gt;Características: *&lt;/label&gt;<br/><br/>
				&lt;c:forEach items="${acomodacao.listaCaracteristicas}" var="caracteristica"  varStatus="s"&gt;
					&lt;input type="checkbox" name="caracteristica[${s.index}].id" 
								value="${caracteristica.id}" &gt;&lt;/input&gt;
					${caracteristica.tipo}<br/>
				&lt;/c:forEach&gt;
				
					&lt;label for="txtTipoAcomodacao"&gt;Tipo Acomodação: *&lt;/label&gt;<br/><br/>
					&lt;c:forEach items="${acomodacao.listaTipoAcomodacao}" var="tipoAcomodacao"
								varStatus="t"&gt;
						&lt;input type="radio" name="tipoAcomodacao.id"
									value="${tipoAcomodacao.id}"&gt;&lt;/input&gt;
						${tipoAcomodacao.tipo}
						<br />		
					&lt;/c:forEach&gt;				
		&lt;/div&gt;
function applyValues(data) {
	$.each(data, function(k, v) {

		if (typeof v == 'object') {
			propObj += k + ".";
			applyValues(v);
		} else {
			var inputName = propObj + k;
			var input = $('.ajaxForm :input[name="' + inputName + '"]');

			//if (input.is(":radio")) {
			if (input.is(":radio") || input.is(':checkbox')) { 
				$.each(input, function() {
					var radio = $(this);
					if (radio.val() == v) {
						radio.attr("checked", "checked");
					}
				});

			} else if (input) {
				input.val(v);
			}
		}
	});
};

não é só essa a modificação… debuga esse método applyValues pra descobrir o que está acontecendo… use o console.log e o firebug no firefox.

No debug, vi que em nenhum momento entrou no if abaixo. Tbm segue em anexo a imagem da tela do firebox;

			var inputName = propObj + k;
			var input = $('.ajaxForm :input[name="' + inputName + '"]');
			console.log(input);
			if (input.is(':radio') || input.is(':checkbox')) { 
				console.log(input);
				$.each(input, function() {
					var radio = $(this);
					if (radio.val() == v) {
						radio.attr("checked", "checked");
					}
				});

			} else if (input) {
				input.val(v);
			}