[Resolvido] chamar um arquivo XML

Raah Santos · Dezembro 4, 2012

Esse é um exemplo bem simples que eu to treinando aqui pra poder implementar no meu Projeto da faculdade, sei muito pouco de chamar arquivo XML com JavaScript/jQuery.. Então gostaria de algo simples mesmo, utilizando o que eu ja criei. Objetivo principal com esse teste ai embaixo é só pra eu clicar em um menu e aparecer a idade da pessoa que eu cliquei.

Meu arquivo XML está assim:


<?xml version="1.0" encoding="utf-8"?>

<pessoas>

<pessoa id="1">
	<nome>Rafael</nome>
	<idade>18</idade>
</pessoa>

<pessoa id="2">
	<nome>Carlos</nome>
	<idade>16</idade>
</pessoa>

<pessoa id="3">
	<nome>Pedro</nome>
	<idade>20</idade>
</pessoa>


<pessoa id="4">
	<nome>Ana</nome>
	<idade>17</idade>		
</pessoa>


</pessoas>

O body do meu HTML assim :


<body>

   <div id="geral">

       <div id="cabecalho"> </div>

       <div id="menu"> <ul></ul> </div>

       <div id="corpo">

       	<div id="idade">Idade: </div>

       </div>

   </div>

</body>

Eu já consegui chamar os nomes no menu assim:


window.onload = function(){


$(function(){

	var cont=0;

	$.ajax({

		type: 'GET',
		url: "Nomes.xml",
		dataType: 'xml',
			success: function(xml){
				$(xml).find("nome").each(function() {

					var nome = $(this).text();	

					$("#menu>ul").append("<li onclick='idade()' id='nome"+ cont  +"'>" + nome + "</li>");

					cont++;

				});
			},


			error: function(){
				alert("Mensagem de erro.");
			}	

	});

});

}

Agora eu gostaria de clicar em um dos nomes e aparecer a idade da pessoa na div com id 'idade', e deopis quando clicar no outro substituir pela idade deste.

Aguardando .. rs :D/>/>/>

William Bruno · Dezembro 4, 2012

isso aqui:

window.onload = function(){


       $(function(){

ta errado cara. Deixa só:

$(function(){

para mostrar a idade, eu faria assim:

$("#menu>ul").append("<li class='nome'>" + nome + "<span style='display: none;'>" + idade + "</span></li>");

e ai para fazer aparecer:

$('.nome').click(function(){
  $(this).find('span').show();
});

Zé Roberto · Dezembro 4, 2012

Já que você está usando JQuery poderia construir o node todo com ele facilmente...

E ao invés de procurar por nome, você poderia procurar por pessoa...

$(xml).find("pessoa").each(function() {
   var nome = $(this).find("nome").text();
   var idade = $(this).find("idade").text();

   $("<li />", {"class":"nome", "data-idade":idade})
       .text(nome)
       .click(function(){
           $('#idade')
               .text($(this).attr('data-idade'));
       }).appendTo($("#menu>ul"));
   cont++;
});

Assim você guarda a idade no node <li /> e recupera o valor no evento click.

Raah Santos · Dezembro 4, 2012

O do zé roberto eu apenas substitui pelo o meu, e deu certinho. Eu até tinha feito um aqui ( gabiarra!!! ) e daí aparecia as idades, mas ao invés de substituir ele ia colocando idade no elemento html. O do zé roberto, substituiu legal, do jeito que eu queria, o problema que ta dificil pra entender 100%, sou iniciante em jQuery, e chamar um arquivo XML está super complicado ( já estou 3 dias, treinando diversas maneiras, o dia inteiro, e o jeito que eu fiz a chamada, só funciona para o Mozilla e o IE, não sei o porque :S ). Implementar o seu no meu projeto vai ser complicado :/, ainda tenho muitas dúvidas.

ze roberto e se eu quisesse colocar mais algum valor, ex: Idade e Estado Civil. Esse que voce não é algo meio que dinamico né ? pra eu atribuir mais valores, né ?

Zé Roberto · Dezembro 4, 2012

Vou explicar melhor o que eu fiz.

$(xml).find("pessoa")

irá buscar todas todos os nodes <pessoa> e retornar um objeto jQuery com eles...

.each(function(){ ... });

vai executar a função anônima (sem nome) dentro de cada node, assim, this vai ser o node que está sendo processado.

Como estamos em <pessoa>, queremos <nome> e <idade> que estão dentro dela, então:

$(this).find("nome")

irá buscar dentro de <pessoa> todos os nodes <nome>, que no caso só vai encontrar um pois this é um node <pessoa>

var nome = $(this).find("nome").text();
var idade = $(this).find("idade").text();

Assim lemos o nome e a idade, os dados são textnodes e o método text() do jQuery lê os textnodes dentro dos nodes e retorna.

$("<li />", {"class":"nome", "data-idade":idade})

Aqui criamos um node <li /> e já atribuímos os atributos class e data-idade, a idade vindo da variável idade.

Caso você não saiba, no HTML5 podemos definir atributos para guardar dados desde que eles precedam com "data-", essa linha de código cria:

<li class="nome" data-idade="#numero-variavel#"></li>

caso você não tenha entendido essa parte:

{"class":"nome", "data-idade":idade}

Aqui eu crio um objeto já populando os dados dele, acredito que o JSON veio disso.

Depois disso eu não pus ; porque o jQuery retorna ele mesmo na maioria dos métodos, assim nós podemos chamar vários métodos sem ter que ficar dizendo que é com ele o tempo todo

.text(nome)

Defino o conteúdo da tag para o valor de nome, a diferença de text() para html() é que text() já vai escapar caractéres inválidos para HTML e html() não vai verificar isso e fica vulnerável a ataques se não tomar cuidado.

.click(function(){
           $('#idade')
               .text($(this).attr('data-idade'));
       })

adicionamos uma função anônima ao evento de clique na tag <li>, quando ela for clicada essa função vai ser executada, e o que ela faz:

$('#idade').text($(this).attr('data-idade'));

this neste caso se refere a tag <li> pois o evento foi lançado por ela, então eu leio o atributo data-idade e coloco como o conteúdo da tag com id idade.

.appendTo($("#menu>ul"));

e depois de definir tudo isso eu coloco o <li> dentro de <ul>

No caso de mais dados, você pode salvar o ID ao invés de salvar a idade no <li>, por exemplo:

$("<li />", {"class":"nome", "data-idpessoa":$(this).attr('id')})

então para obter os dados busque no xml assim:

.click(function(){
           $('#idade')
               .text($(xml).find('pessoa[id='+$(this).attr('data-idpessoa')+']').find('idade').text());
       })

ou outra alternativa é armazenar o node na tag li com jQuery.data(node, key, value)

estou ficando sem tempo tenho que sair :P/>/> , se ainda ficou com duvida em algo diga, e faça experiências com o código para aprender, você não vai aprender se só usar o que eu fiz sem tentar você mesmo ;)

Raah Santos · Dezembro 5, 2012

Zé Roberto, muito obrigado mesmo! Você não sabe o quanto ajudou eu e o meu grupo do projeto rs :D

Deu pra entender bem legal agora com a explicação.

A forma que eu utilizei pra chamar o arquivo Xml só funciona no Mozilla e no IE né ?

muito obrigado, qualquer dúvida ( como eu só volto a mexer no projeto amanhã. ) daí eu posto aqui. falow :D

Zé Roberto · Dezembro 5, 2012

Zé Roberto, muito obrigado mesmo! Você não sabe o quanto ajudou eu e o meu grupo do projeto rs :D/>/>

Deu pra entender bem legal agora com a explicação.

A forma que eu utilizei pra chamar o arquivo Xml só funciona no Mozilla e no IE né ?

muito obrigado, qualquer dúvida ( como eu só volto a mexer no projeto amanhã. ) daí eu posto aqui. falow :D

De nada ;)

Você utilizou jQuery, ele vai lidar sozinho com a compatibilidade, não sei de cor quais navegadores suportam ele, mas acredito que sejam muitos.

Só não se esqueça de corrigir o que o colega disse:

isso aqui:
window.onload = function(){


       $(function(){
ta errado cara. Deixa só:
$(function(){

Se você passar uma função para o jQuery ele vai executar ela quando o documento ter sido carregado, por isso a forma que você fez está errada, ela pode inclusive quebrar essa funcionalidade do jQuery, faça apenas

$(function(){ ... });

Raah Santos · Dezembro 5, 2012

Então, é que nem no Chrome e nem no Opera ele abriu o XML, daí da a mensagem de erro que eu coloquei caso de erro no carregamento do XML.

Aqui ele abriu no IE, no Mozilla e no Safari por enquanto rs :D/>/>/>/> Depois tenho que ve uma forma pra eu poder fazer com que carregue no Chrome e no Opera, é que hoje eu peguei mais pra mexer com a formatação ( CSS ) que é o mais facil KK

aah siim, eu tava usando o window.onload porque até agora, eu ja sei mexer com javaScript, até que tranquilo, mas jQuery ainda estou meio leigo, mas hoje treinei bastante coisa também, ja to pegando mais o jeito rsrs ^_^ ^_^

Arquivado

[Resolvido] chamar um arquivo XML

Recommended Posts

Raah Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zé Roberto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raah Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zé Roberto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raah Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zé Roberto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raah Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Fóruns

Tempo Real

Informação importante