[Resolvido] Leitura de arquivo XML com Javascript

ricardo-ptr · Março 16, 2012

Boa tarde galera,

Estou com um problema bem chato e gostaria de saber se alguem pode me ajudar.

O caso é o seguinte, preciso criar uma página com um mapa do brasil (separado apenas por estados) e, ao clicar em um estado, exibir todas as filiais e distribuidores do mesmo, ao lado do mapa.

o problema é que apesar de conseguir exibir o XML na página, não sei como separá-lo por estados...

um modelo simples do xml que estou tentando criar seria:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ESTADOS>
  <SP>
    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>

    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>

    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>
  </SP>

  <RJ>
    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>

    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>

    <DISTRIBUIDOR>
      <RAZAO_SOCIAL>exemplo</RAZAO_SOCIAL>
      <ENDERECO>exemplo</ENDERECO>
      <CNPJ>exemplo</CNPJ>
    </DISTRIBUIDOR>
  </RJ>
</ESTADOS>

já usei diversos códigos de diversos sites, porém o máximo que consegui foi abrir o 1º <DISTRIBUIDOR> e ao apertar um botão "seguinte" ele exibir o próximo, e o próximo, até chegar no último.

alguem saberia me ajudar?

Givisiez · Março 16, 2012

Bom , amigo, de fato nao vou poder te ajudar, mas sim compartilhar da mesma duvida!

BEm parecido com a sua:

Tenho uma tabela em HTML com clientes e Equipamentos. e um XML com os clientes cadastrados

O que eu quero é ler no HTML na "Celula correta" associando o CLIENTE X EQUIPAMENTO .

O que consegui ate agora, é listar os clientes , mas nao ficam separados por equipamento como no caso do nosso amigo Ricardo.

Agum da uma luz pra nos??

Abracos

Marcos

Henrique Barcelos · Março 17, 2012

Usando jQuery, veja se isso imprimirá os nomes dos estados...

jQuery(function(){
			var dfd = jQuery.ajax('teste.xml', {
				dataType: "xml",
			});
			dfd.success(function(xml) {
					var $estados = $(xml).find('ESTADOS').children();
					$estados.each(function(){
						alert(this.nodeName);
					});
				});
		});

A partir daí, use sua imaginação... =]

Ted k' · Março 17, 2012

Uma dúvida de cada vez, vamos para a do ricardo-ptr

Prefiro 1000000000% usar jSON, mas vamos para o XML:

Usei o ajax do jQuery e ficou bem legal!

Segue exemplo como fiz e que talvez ajude:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
	$("#resultado").html("");
	var retorno_click = $(this).attr("id");

	$.ajax({
		type: "GET",
		url: "jquery-xml.xml",
		dataType: "xml",
		success: function(data){
			$(data).find("ESTADOS").each(function(){
				var resultado;

				$(this).find(retorno_click).find("DISTRIBUIDOR").each(function(){
					resultado = '<strong>Razão Social: </strong>' + $(this).find("RAZAO_SOCIAL").text() + '<br />';
					resultado = resultado + '<strong>Endereço: </strong>' + $(this).find("ENDERECO").text() + '<br />';
					resultado = resultado + '<strong>CNPJ: </strong>' + $(this).find("CNPJ").text() + '<br /><br />';

					$("#resultado").append(resultado);
				});

			}); 
		}
	});
});
});
</script>
<title>Teste</title>
</head>
<body>
<strong>Estados:</strong> <a href="javascript:;" id="SP">SP</a>, <a href="javascript:;" id="RJ">RJ</a>
   <br><br>
   Resultado: <div id="resultado"></div>
</body>
</html>

Apelidei seu xml de jquery-xml.xml, veja como ficou!

OBS: Troque os valores do XML, para ver a dinamica de mudança!

ricardo-ptr · Março 19, 2012

Bom dia galera,

Primeiramente gostaria de agradecer a vocês todos por dar uma força, realmente sou muito fraco com js e optei por isso porque precisava "unir" este script com um efeito "agradavel" para exibir os distribuidores.

Consegui usar o código que o companheiro Ted k' passou, e agradeço, pois ficou bem simples de entender, com isso também foi possivel criar os efeitos.

Minha dúvida foi tirada, porém acredito q seja melhor deixar o tópico aberto mais alguns dias, pra ver se os códigos passados podem ajudar tb o Givisiez.

Novamente muito obrigado a vocês :thumbsup:

William Bruno · Março 19, 2012

@Givisiez, poste um trecho do teu XML para entendermos melhor a sua estrutura.

Não conhecemos o projeto, então sem ver os códigos, fica complicado entendermos completamente.

Givisiez · Março 19, 2012

@Givisiez, poste um trecho do teu XML para entendermos melhor a sua estrutura.

Não conhecemos o projeto, então sem ver os códigos, fica complicado entendermos completamente.

beleza pessoal, agradeco desde já a ajuda. Vou tentar explicar o que preciso:

Tenho uma tabela com uma coluna de equipamentos. em cada equipamento tem uma linha com os dias da semana ( seg a Dom)

Ou seja, no Html tenho na coluna A uma lista com 10 equipmanetos e na lina 1 tenho os dias da semana.

Como preciso alterar isso com frequencia durante o dia, pensei em um xml para preencher os dados na linha que tem os dias da semana :

Ex: equipamento"Y" na segunda feira vai estar no cliente "x"

So preciso preencher o campo do cliente no dia certo. O XML esta assim:

<?xml version="1.0" encoding="UTF-8"?>
<AGENDA>
<SEMANA>
<DIA>SEG</DIA>
<EQUIPAMENTO>COMPUTADOR 2</EQUIPAMENTO>
<CLIENTE>GLOBO</CLIENTE>

</SEMANA>

<SEMANA>
<DIA>TER</DIA>
<EQUIPAMENTO>NOTEBOOK 1</EQUIPAMENTO>
<CLIENTE>BAND</CLIENTE>
</SEMANA>

<SEMANA>
<DIA>QUA</DIA>
<EQUIPAMENTO>IMPRESSORA</EQUIPAMENTO>
<CLIENTE>SBT</CLIENTE>
</SEMANA>

</AGENDA>

No XML esta discrimidado o equipamento , que NAO é necessario. So preciso alterar o cliente e este deve aparecer o dia certo da semana.

Eu poderia colocar no XML assim: ?

<?xml version="1.0" encoding="UTF-8"?>
<AGENDA>
<SEMANA1>
<DIA>SEG</DIA>
<CLIENTE>GLOBO</CLIENTE>

</SEMANA1>

<SEMANA2>
<SEG>BAND</SEG>
</SEMANA2>

<SEMANA3>
<SEG>SBT</SEG>
</SEMANA3>

</AGENDA>

Conseguiram entender??

Abracos,

Marcos

ricardo-ptr · Março 26, 2012

achei um pouco confusa a maneira que você postou amigo, realmente não entendi :upset:

voltando ao meu problema inicial, estou com uma pequena dificuldade em relação aos efeitos aplicados na exibição dos meu distribuidores...

Explicando melhor, apliquei os botões de próximo e anterior com base n o seguinte tutorial:

http://codexico.com.br/projetos/slideshow/index.html

o problema é que se clico 1 vez em SP e depois em ES ele duplica o efeito, e se clicar outra vez em algum estado ele triplica, quadriplica, e porai vai... até atualizar a página.

alguem saberia como eu posso "reiniciar" ou "parar e iniciar denovo" o efeito de acordo com o onclick???

segue o código que estou usando:

<!DOCTYPE html>
<html lang="pt">
 <head>
   <meta charset="utf-8" />

   <style type="text/css">
#resultado{
 list-style-type: none;
 width: 200px;
 overflow: hidden;
}
.slide{
 width: 200px;
 height: 200px;
 border: 1px solid #000;
 left: -202px;
 position: absolute;
}
</style>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
       $("a").click(function(){

               $("#resultado").html("");
               var retorno_click = $(this).attr("id");

               $.ajax({
                       type: "GET",
                       url: "distribuidores_.xml",
                       dataType: "xml",
                       success: function(data){
                               $(data).find("ESTADOS").each(function(){
                                       var resultado;

                                       $(this).find(retorno_click).find("DISTRIBUIDOR").each(function(){
                                               resultado = '<li class="slide"><strong>Razo Social: </strong>' + $(this).find("razao_social").text() + '<br />';
                                               resultado = resultado + '<strong>Endereo: </strong>' + $(this).find("endereco").text() + '<br />';
                                               resultado = resultado + '<strong>CNPJ: </strong>' + $(this).find("cnpj").text() + '<br /><br /></li>';

                                               $("#resultado").append(resultado);
                                       });

                               }); 
                       }
               });



   //identifica o slideshow
   $slideshow = $("#slideshow");
   //inicialmente esconde os slides
   $slideshow.find("li.slide").hide();
   //encontra o prmeiro slide e ativa-o
   $slideativo = $slideshow.find("li.slide").first().addClass('slideatual').css("left","0").show();

//ao clicar mostra o proximo slide
$('#slideproximo').click(function(){
 //esconde o slide atual para a direita
 $slideativo.animate({
   "left": "+="+$slideativo.outerWidth(),  "opacity": "0"
 }, "slow",  function() {//callback
   //procura o proximo
   $slideativo = $slideshow.find("li.slideatual").next();
   if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").first();//volta ao primeiro

   //remove o marcador do slide anterior
   $slideshow.find("li.slideatual").removeClass("slideatual");

   //posiciona na esquerda
   $slideativo.show().css("left", $slideativo.outerWidth()*-1).css('opacity', '0');
   //coloca o marcador e mostra
   $slideativo.addClass("slideatual").animate({
     "left": "0", "opacity": "1"
   }, "slow");
 });
});

//ao clicar mostra o slide anterior
$('#slideanterior').click(function(){
 //esconde o slide atual para a esquerda
 $slideativo.animate({
   "left": "-="+$slideativo.outerWidth(), "opacity": "0"
 }, "slow");
 //procura o proximo
 $slideativo = $slideshow.find("li.slideatual").prev();
 if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").last();//volta ao ultimo

 //remove o marcador do slide anterior
 $slideshow.find("li.slideatual").removeClass("slideatual");

 //posiciona na direita
 $slideativo.show().css("left", $slideativo.outerWidth()).css('opacity', '0');
 //coloca o marcador e mostra
 $slideativo.addClass("slideatual").animate({
   "left": "0", "opacity": "1"
 }, "slow");
});





       });
});
</script>
 </head>
 <body>
 <strong>Estados:</strong> <a href="javascript:;" id="SP">SP</a>, <a href="javascript:;" id="ES">ES</a><br/>
 Resultado: 
 <br/>
   <div id="slideshow" >

     <p>
       <button id="slideanterior" class="slideshow-button" >anterior </button>  
       <button id="slideproximo" class="slideshow-button" > próximo</button>
     </p>


   <ul id="resultado"></ul>

   </div> 
 </body>
</html>

desde já muito obrigado!

ricardo-ptr · Março 27, 2012

Boa Tarde Galera,

Finalmente achei o problema no código (sou muito leigo em js :unsure: ), sem querer estava multiplicando os LIs que levariam a classe "slideatual" (que era pra ser somente 1 por acaso)

uma outra coisa que eu estou pesquisando mas não consigo achar a fonte do problema é:

o código passado pelo Ted k' não funciona no Google Chrome de jeito nenhum, não faz nem mensão a carregar o xml...

vi que poderia ser o evento $("a").click, mas n achei nada que solucionasse o problema, alguém tem alguma idéia?

ricardo-ptr · Março 28, 2012

problema resolvido, o google não deixa eu executar o código sem que o arquivo esteja no servidor :unsure:

obrigado a todos

Alexandre.S · Abril 23, 2016

Uma dúvida de cada vez, vamos para a do ricardo-ptr

Prefiro 1000000000% usar jSON, mas vamos para o XML:

Usei o ajax do jQuery e ficou bem legal!

Segue exemplo como fiz e que talvez ajude:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("a").click(function(){
		$("#resultado").html("");
		var retorno_click = $(this).attr("id");

		$.ajax({
			type: "GET",
			url: "jquery-xml.xml",
			dataType: "xml",
			success: function(data){
				$(data).find("ESTADOS").each(function(){
					var resultado;
	
					$(this).find(retorno_click).find("DISTRIBUIDOR").each(function(){
						resultado = '<strong>Razão Social: </strong>' + $(this).find("RAZAO_SOCIAL").text() + '<br />';
						resultado = resultado + '<strong>Endereço: </strong>' + $(this).find("ENDERECO").text() + '<br />';
						resultado = resultado + '<strong>CNPJ: </strong>' + $(this).find("CNPJ").text() + '<br /><br />';
	
						$("#resultado").append(resultado);
					});
	
				}); 
			}
		});
	});
});
</script>
<title>Teste</title>
</head>
<body>
	<strong>Estados:</strong> <a href="javascript:;" id="SP">SP</a>, <a href="javascript:;" id="RJ">RJ</a>
    <br><br>
    Resultado: <div id="resultado"></div>
</body>
</html>

Apelidei seu xml de jquery-xml.xml, veja como ficou!

OBS: Troque os valores do XML, para ver a dinamica de mudança!

Muito bom Ted K' também agradeço.

Poderia esclarecer duas duvidas a um iniciante?

1 - Lá onde está o jquery-xml.xml é onde coloco a localização do xml a ser lido, correto?

2 - Como fazer no caso deste xml para exibir as siglas dos estados também dinamicamente. ( tipo se eu alterar o xml colocando mais estados eles já apareçam na pagina principal sem necessidade de escrever o html)

Desde já agradeço.

Arquivado

[Resolvido] Leitura de arquivo XML com Javascript

Recommended Posts

ricardo-ptr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Givisiez 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo-ptr 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

Givisiez 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo-ptr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo-ptr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo-ptr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alexandre.S 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Ajuda en NFePhp para Sistema

PHP+Codeigniter - Teclas para Salvar (atalho)

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante