Preencher formulários via JSON

jwcunha · Abril 12, 2007, 12:41pm

Olá a todos!

Estou utilizando o vRaptor em mais um projeto só que agora preciso preencher um formulário com os dados vindos do objeto JSON. Alguém sabe de algum fwk de js ou outra solução que possa utilizar para fazer isto?

Obrigado!

Pedrosa · Abril 12, 2007, 12:59pm

Olá estamos usando o prototype, uma biblioteca js para facilitar o desenvolvimento.

Ex:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/grid/xp/aw.css">
<script type="text/javascript" src="prototype.js"></script>
<script>
	function abrirJanela(url){
		window.open(url,'page','toolbar=no,left=0,top=0,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=750,height=500');
	}
	function ajaxRequest() {
	    var url = 'pedidocompra.listPedidoCompra.ajax.logic';
	    var codigoPedido = $F('codigoPedido');
	    var pars = 'codigoPedido=' + codigoPedido;
	    //create the ajax request
        var myAjax = new Ajax.Request(
                url,
                {
	                method: 'post',
	                parameters: pars,
	                onComplete: showResponse 
                }
        );      
    }

    //ajax callback method
    function showResponse(data) {
         //get the jsonObject
        var jsonObject = eval('(' + data.responseText + ')');


        //get the user array from the json object
        var pedidos = jsonObject.pedidos;
        
        document.forms[0].hidCodigoPedido.value = pedidos[0].numeroPedido;
       
        var html = "";
        
		if(pedidos.length == 0){
			alert("Nenhum pedido encontrado");
			return;
			var div = document.getElementById("ajaxResultDiv");
	        div.innerHTML = html;
		}	
        
        
        //update html
        html +="<tr>";
        var total = 0;
       	html+="<table width='100%'>";
       	html+="<tr>";
       	html+="<td colspan='2'><b>Razão Social</b></td>";
		html+="	<td><b>Nome Fantasia</b></td>";
		html+="	<td colspan='2'><b>CNPJ</b></td>";
		html+="</tr>";
		html+="<tr>";
		html+="	<td colspan='2'>"+ pedidos[0].razaoSocial + "</td>";
		html+="	<td>"+ pedidos[0].nomeFantasia + "</td>";
		html+="	<td colspan='2'>"+ pedidos[0].cnpj + "</td>";
		html+="</tr>"; 
		html+="<tr>";
		html+="	<td colspan='5'><b>Endereço para Coleta</b></td>";
		html+="</tr>";
		html+="<tr>";
		html+="	<td colspan='5'>"+ pedidos[0].enderecoColeta + "</td>";
		html+="</tr>";
		html+="<tr>";
		html+="	<td colspan='2'><b>Nº Pedido</b></td>";
		html+="	<td><b>Data de Emissão</b></td>";
		html+="	<td colspan='2'><b>Data de Coleta</b></td>";
		html+="</tr>";
		html+="<tr>";
		html+="	<td colspan='2'>"+ pedidos[0].numeroPedido + "</td>";
		html+="	<td>"+ pedidos[0].dataEmissao + "</td>";
		html+="	<td colspan='2'>"+ pedidos[0].dataColeta + "</td>";
		html+="</tr>";
		html+="<tr>";
		html+="	<td colspan='5'>&nbsp;</td>";
		html+="</tr>";
		html+="</table>";
		
		//Itens
		html+="<table width='100%' bordercolor='#396666' bordercolordark='white' cellpadding='0' cellspacing='0' rules='rows' frame='below'>";
		html+="<tr>";
		html+="	<td colspan='6' align='center'><b>LISTA DE ITENS PARA COMPRA<b></td>";
		html+="</tr>";
		
		html+="<tr>";
		html+=" <td width='40'><b>Cód.</b></td>";
		html+=" <td width='50%'><b>Descrição do Item</b></td>";
		html+="	<td><b>Bloc.</b></td>";
		html+="	<td><b>Qtde. Esperada</b></td>";
		html+="	<td><b>Qtde. Recebida</b></td>";
		html+="	<td><b>Unitário</b></td>";
		html+="	<td><b>Total</b></td>";
		html+="</tr>";
	  
        //Lista de itens para compra

        for(i=0;i<pedidos.length;i++) {
	        html+="<tr>";
			html+="	<td width='40'>"+ pedidos[i].codigoProduto + "</td>";
			html+="	<td width='50%'>" + pedidos[i].descricaoIten + "</td>";
			html+="	<td>" + pedidos[i].blocagem + "</td>";
			html+="	<td>" + pedidos[i].quantidadeEsperada + "</td>";
			html+="	<td><input type='text' size='8' name='quantidadeRecebida"+i+"' id='quantidadeRecebida"+i+"'>&nbsp; <input type='button' value='atualizar' onClick=\"alert($F('quantidadeRecebida" + i + "'));\"'></td>";
			html+="	<td>" + pedidos[i].unitario + "</td>";
			html+="	<td>" + pedidos[i].total + "</td>";
			total+=pedidos[i].total;
			html+="</tr>";
        }
        html+="<tr>";
		html+="	<td colspan='5'> <b>Total de Itens: "+ pedidos.length + "</b></td>";
		html+=" <td><b>Total Geral: " + total + "</b></td>";
		html+="</tr>";
        html+="</table>";
        var div = document.getElementById("ajaxResultDiv");
        div.innerHTML = html;
    }
</script>
</head>
<body>
	<form name="frmEntradaPedido">
		<table border="0" width="100%" cellpadding="0">
			<tr>
				<td width="80">Pedido:</td>
				<td width="120">
					<input type="text" name="codigoPedido" id="codigoPedido">
					<input type="hidden" name="hidCodigoPedido" id="hidCodigoPedido">
				</td>
				<td class="tdbottom" valign="bottom" align="left">
					 <input type="button" value="pesquisar" name="click" onclick="javascript:ajaxRequest();" >
				</td>
				<td class="tdbottom" valign="bottom" align="right" colspan="2">&nbsp;
					<input type="button" value="sair">
				</td>
			</tr>
			<tr>
				<td colspan="5">&nbsp;</td> 
			</tr>
			<tr>
				<td colspan="5" align="center"><b>DADOS DO FORNECEDOR</b></td>
			</tr>
			<tr>
				<td colspan="5">
					<table width="100%" border="0">
						<tr>
							<td width="100%">
								<div id="ajaxResultDiv"></div>
							</td>
						</tr>
					</table>	 
				</td>
			</tr>
			<tr>
				<td colspan="5" align="center">
					<input type="button" value="novo pedido" onClick="abrirJanela('busca_produto.jsp?codigoPedido=' + $F('hidCodigoPedido'))";">
				</td>
			</tr>		
		</table>
	</form>	
</body >
</html>

andreiribas · Abril 12, 2007, 1:52pm

eu faço assim também… mas se alguém souber de uma taglib ou alguma outra gambiarra que permita escrever o objeto JSON direto no JSP eu ficaria agradecido 8)