Preciso de Ajuda para Montar uma tabela com retorno de um AJAX/JSON

8 de maio de 2008 7 respostas

vimieiro 8 de maio de 2008

Colegas, tô precisando muito da ajuda de vcs, seguinte :

Tenho uma função em AJAX que vai no SERVLET e pesquisa no BD um cadastro de cidades e retorna utilizando JSON, mas não estou conseguindo montar a tabela no JS, vejam meus códigos :

Retorno Servlet (JSON) :

responseString= "
{"cidades": [
{"codigo":"922","descricao":"","regional":"1"},
{"codigo":"921","descricao":"","regional":"1"},
{"codigo":"874","descricao":"","regional":"1"},
{"codigo":"905","descricao":"345546","regional":"1"},
{"codigo":"2","descricao":"ABAETE","regional":"5"},

Minha tabela lá no JSP :

<table width="60%" align="center" cellspacing="0">
	<c:forEach items="${requestScope.cidade}" var="cidade" varStatus='s'>
		<tr>
	      <c:choose>  
	    	  <c:when test='${s.count % 2 == 0}'>  
	               <tr bgcolor='#aaaaaa'>  
	          </c:when>  
	          <c:otherwise>  
	               <tr bgcolor='#dddddd'>  
	          </c:otherwise>  
          </c:choose>	
			<td width="60%" class="style3"><c:out value="${cidade.descricao}"/></td>
			<td width="30%" class="style3">
			<c:choose>
				<c:when test="${cidade.regional==1}">LESTE</c:when>
				<c:when test="${cidade.regional==2}">MANTIQUEIRA</c:when>
				<c:when test="${cidade.regional==3}">METALÚRGICA</c:when>
				<c:when test="${cidade.regional==4}">NORTE</c:when>
				<c:when test="${cidade.regional==5}">OESTE</c:when>
				<c:when test="${cidade.regional==6}">VALE DO AÇO</c:when>
				<c:when test="${cidade.regional==7}">TRIÂNGULO</c:when>
				<c:when test="${cidade.regional==8}">OUTRAS BASES</c:when>
			</c:choose>
			</td>
			<td width="10%"><input type="image" src="${pageContext.request.contextPath}/images/view16.gif" onclick="enviar('ler','<c:out value="${cidade.id}"/>','<c:out value="${cidade.registro}"/>')"/></td>
		</tr>
	</c:forEach>
	</table>

Meu JS de retorno :

function mostraCidades(){
	if (req.readyState == 4){
		if (req.status == 200){
			preencheCidade(req);
			if (retorno=="Erro"){
				alert(retorno);
			}
		}
	}
}

function preencheCidade(req){
	jsonData = req.responseText;
	var myJSONObject = eval('(' + jsonData + ')');
	for (i=0;i<myJSONObject.cidades.length;i++){
[b]<---------- AQUI ESTOU AGARRADO, NÃO CONSIGO MONTAR----->[/b]		

	}
}

Alguem poderia me dar uma luz ?

Vimieiro

7 Respostas

cassio 8 de mai. de 2008

Para fazer esse tipo de coisa no seu JSP (carregar uma tabela via ajax), existem 3 formas básicas:

Receber um JSON como você está fazendo. Neste caso não adianta muito ter a tabela montada assim como você fez no seu JSP. Eu normalmente faço uma função Javascript que manipula o DOM, criando uma tabela on-the-fly e inserindo a mesma em um <div>. Voc6e pode criar a tabela e manter uma referência para a mesma, assim é possível adicionar ou remover linhas da tabela a qualquer momento. Dá uma olhada no DOM que ajuda bastante.
Criar um arquivinho JSP só pra sua tabela, fazer sua action ou servlet ou sei lá o que retornar essa página (a qual recebe um List<SuaClasse> da vida, que você vai usar para popular as linhas da tabela com alguma tag de loop) e retornar assim a página inteira via ajax. No browser basta então você fazer algo como umDiv.innerHTML = htmlRetornado no callback da chamada Ajax.
Usar displaytags. Nunca usei, mas sei que o bichinho faz umas coisas legais com tabelas + ajax.

vimieiro 8 de mai. de 2008

Amigo

Acho melhor e talvez menos trabalhoso a sua 1ª opção, como vc já passou por isso, teria como me dar uma luz ? um caminho das pedras, um exemplo básico ?

Muito obrigado mesmo !

Vimieiro

vimieiro 8 de mai. de 2008

Ahhh, para adiantar peguei algo e vou tentar trabalhar em cima veja :

function preencheCidade(req){
	jsonData = req.responseText;
	var myJSONObject = eval('(' + jsonData + ')');
	for (i=0;i<myJSONObject.cidades.length;i++){
		
//*********
    var x=document.getElementById(idTable).insertRow(0);
    x.style.backgroundColor="#dddddd";
    var a=x.insertCell(0);
    var b=x.insertCell(1);
    var c=x.insertCell(2);
    var d=x.insertCell(3);
    var e=x.insertCell(4);
    if (document.getElementById('tipoTelefone').value==1){
    	a.innerHTML='1 Res';
    }
    if (document.getElementById('tipoTelefone').value==2){
    	a.innerHTML='2 Res';
    }
    if (document.getElementById('tipoTelefone').value==3){
    	a.innerHTML='1 Com';
    }
    if (document.getElementById('tipoTelefone').value==4){
    	a.innerHTML='2 Com';
    }
    if (document.getElementById('tipoTelefone').value==5){
    	a.innerHTML='FAX';
    }
    if (document.getElementById('tipoTelefone').value==6){
    	a.innerHTML='CEL';
    }
    
    b.innerHTML=document.getElementById('dddTelefone').value;
    c.innerHTML=document.getElementById('numTelefone').value;
}		
//************

	}
}

Misturei CIDADE COM TELEFONE (hehehe) mas é um exemplo que vou tentar adaptar.

Podendo me ajudar

Vimieiro

cassio 8 de mai. de 2008

Eu ainda prefiro manipular o DOM.
Pesquise pelos métodos javascript document.createElement() e document.getElementById(‘blabla’).appendChild().
Com eles você pode fazer coisas assim:

var tabela = document.createElement('table');
var tbody = document.createElement(tbody');
tabela.appendChild(tbody);
for(var i = 0; i &lt; 10; i++) {
   var linha = document.createElement('tr');
   var cel_1 = document.createElement('td');
   cel_1.appendChild(document.createTextNode('Linha ' + i + ' coluna 0'); 
   var cel_2 = document.createElement('td');
   cel_2.appendChild(document.createTextNode('Linha ' + i + ' coluna 1');
   linha.appendChild(cel_1);
   linha.appendChild(cel_2);
   tbody.appendChild(linha);
}
document.getElementById('um_div').appendChild(tabela);

Usando criatividade, alguns loops e o seu JSON, dá pra fazer muita coisa

vimieiro 8 de mai. de 2008

Nó cassio, valeu demais da conta

Vou tentar aqui, funfando, coloco o codigo aqui para a galera

Vimieiro

vimieiro 8 de mai. de 2008

Oba, consegui resolver veja :

function preencheCidade(req){
	document.getElementById('aguarde').style.display="none";
	document.getElementById('cidades').style.display="inline";
	jsonData = req.responseText;
	var myJSONObject = eval('(' + jsonData + ')');
	for (i=1;i<myJSONObject.cidades.length;i++){
    	var x=document.getElementById('tbCidade').insertRow(i);
    	if (i % 2 == 0){
		    x.style.backgroundColor="#F0F0F0";
	    }else{
		    x.style.backgroundColor="#dddddd";
		}
    	var a=x.insertCell(0);
	    var b=x.insertCell(1);
    	var c=x.insertCell(2);
    	a.innerHTML=myJSONObject.cidades[i].descricao;
	    if (myJSONObject.cidades[i].regional==1){
    		b.innerHTML='Leste';
	    }
	    if (myJSONObject.cidades[i].regional==2){
    		b.innerHTML='Mantiqueira';
    	}
	    if (myJSONObject.cidades[i].regional==3){
    		b.innerHTML='Metalúrgica';
	    }
	    if (myJSONObject.cidades[i].regional==4){
    		b.innerHTML='Norte';
	    }
	    if (myJSONObject.cidades[i].regional==5){
    		b.innerHTML='Oeste';
    	}
	    if (myJSONObject.cidades[i].regional==6){
    		b.innerHTML='Vale do Aço';
	    }
	    if (myJSONObject.cidades[i].regional==7){
    		b.innerHTML='Triângulo';
	    }
	    if (myJSONObject.cidades[i].regional==8){
    		b.innerHTML='Outras Bases';
	    }
//c.innerHTML=<input type="image" src="${pageContext.request.contextPath}/images/view16.gif" onclick="enviar('ler','<c:out value="${cidade.id}"/>','<c:out value="${cidade.registro}"/>')"/>	    
    	c.innerHTML=myJSONObject.cidades[i].codigo;
    
	}		

}

Acontece que agora estou querendo colocar uma Imagem para o usuario clicar ao escolher a cidade mas …
Garrei, num tô conseguindo ?

Por um acaso pode me ajudar ?

abs

Vimieiro

vimieiro 12 de mai. de 2008

Colega Cássio, como te falei, eu modifiquei o código para geração da tabela, mas ela não aparece para mim, poderia me indicar o que estou fazendo de errado ?

function preencheCidade(req){
	document.getElementById('aguarde').style.display="none";
	document.getElementById('cidades').style.display="inline";
	jsonData = req.responseText;
	var myJSONObject = eval('(' + jsonData + ')');
	for (i=1;i<myJSONObject.cidades.length;i++){
    	var tabela = document.getElementById("tbCidade");
    	var row = document.createElement("tr");
    	if (i % 2 == 0){
		    row.style.backgroundColor="#F0F0F0";
	    }else{
		    row.style.backgroundColor="#dddddd";
		}
		row.style.textAlign="left";
		
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");
		var td3 = document.createElement("td");

		td1.appendChild(document.createTextNode(myJSONObject.cidades[i].descricao));		

		var regional;
	    if (myJSONObject.cidades[i].regional==1){
    		regional='Leste';
	    }
	    if (myJSONObject.cidades[i].regional==2){
    		regional='Mantiqueira';
    	}
	    if (myJSONObject.cidades[i].regional==3){
    		regional='Metalúrgica';
	    }
	    if (myJSONObject.cidades[i].regional==4){
    		regional='Norte';
	    }
	    if (myJSONObject.cidades[i].regional==5){
    		regional='Oeste';
    	}
	    if (myJSONObject.cidades[i].regional==6){
    		regional='Vale do Aço';
	    }
	    if (myJSONObject.cidades[i].regional==7){
    		regional='Triângulo';
	    }
	    if (myJSONObject.cidades[i].regional==8){
    		regional='Outras Bases';
	    }
		td2.appendChild(document.createTextNode(regional));		
		
		var link1 = document.createElement("a");
		link1.href = 'javascript:getCid(' + myJSONObject.cidades[i].codigo + ')';
		link1.innerHTML = '<input type="image" src="${pageContext.request.contextPath}/images/find16.gif">';
		td3.appendChild(link1);
		
		row.appendChild(td1);
		row.appendChild(td2);
		row.appendChild(td3);
		alert(row);
		tabela.appendChild(row);		
	}		
}

Lá no JSP :

<table id="tbCidade" width="50%" align="center" class="stylesmall" cellspacing="0">
		<tr>
			<td width="50%" align="center">Descrição</td>
			<td width="40%" align="center">Regional</td>
			<td width="10%" align="left"></td>
		</tr>
		<tr>
			<td width="50%" align="left"></td>
			<td width="40%" align="left"></td>
			<td width="10%" align="left"></td>
		</tr>
	</table>

Criado 8 de maio de 2008

Ultima resposta 12 de mai. de 2008

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados