Jump to content
ozielusa

Ler XML com jquery e Atualizar dados na DIV sem Refresh na Pagina

Recommended Posts

Bom dia Pessoal.

Sou Leigo em Jquery e estou precisando da ajuda de vocês para o seguinte:

Tenho este arquivo XML que é gerado e atualizado automaticamente por um software a cada vez que uma música termina e outra se inicia (Este arquivo é enviado automaticamente via FTP para o servidor a cada nova atualização).

<?xml version="1.0" encoding="utf-8"?>
<Schedule System="Jazler">
 <Event status="happening" startTime="09:19:18" eventType="song">
    <Announcement Display="Now On Air:"/>
  <Song title="Rachel Malafaia">
   <Artist name="03">
   </Artist>
    <Jazler ID="131"/>
    <PlayLister ID=""/>
    <Media runTime="00:03:55"/>
    <Expire Time="09:23:12"/>
  </Song>
 </Event>
</Schedule>

Preciso que a página do site leia este arquivo com a estrutura acima (que é gerada automaticamente) e atualize as informações de <Song Title>, <Artist name>, etc... em uma tag <li> na página HTML, mas preciso que essa atualização ocorra em tempo real sem a necessidade de recarregar (Refresh) a página. (Por isso gostaria que fosse com JQuery), mas como sou leigo no assunto, gostaria da ajuda dos colega sobre como fazer isso, pois os exemplos que tenho achado na internet eu não estou conseguindo fazer funcionar.

Obrigado e forte abraço a todos. 

image.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By fabioamorais
      Ola pessoal, sou novo aqui no fórum e também no mundo da programação. 

      Estou criando um sistema de cadastro de clientes em PHP 7 e mysql
      para meu serviço para fins de organização, tenho ja pronto o sistema de cadastro e edição do cliente, tenho login por usuário e senha.
      preciso colocar nesse sistema uma forma que registre a ação e o usuário que fez a ação quando houver uma alteração no cadastro.
      exemplo;
      O usuario (jose) alterou o status de analise para concluído .
      o usuario (pedro) alterou a localização de mesa para armario.
      e que fosse exibido como um tipo de histórico de eventos no próprio cadastro do cliente.
      e nesse campo se ainda tiver como add cometários.
      Usuario (jose): Precisa entrar em contato com o cliente francisco. 
      Usuario (pedro): cliente foi avisado e está sabendo.
       
      quem souber uma forma de fazer isso, ficaria muito grato.

    • By Webster Moitinho
      Estou usando switch em minha página PHP, e para um dos cases está aparecendo o erro abaixo que eu não consigo identificar
       
      <Error><Code>BlobNotFound</Code><Message>The specified blob does not exist. RequestId:00c4ed11-e01e-0068-2b3a-575edd000000 Time:2019-08-20T09:33:50.2842035Z</Message></Error> Esse case chama o seguinte conteúdo do banco de dados:
      <p align="justify">Ao capacitar o seu <em>staff</em> de maneira satisfat&oacute;ria, a empresa assegura a qualidade do produto final ao cliente, influenciando de maneira significativa os resultados. Atrav&eacute;s da implanta&ccedil;&atilde;o de programas sistem&aacute;ticos de treinamento, pode-se proporcionar a melhoria do produto, al&eacute;m de serem dotados de forte apelo motivacional para a equipe, promovendo o desenvolvimento profissional espont&acirc;nea e naturalmente. &Eacute; comum nas corpora&ccedil;&otilde;es que o colaborador, ap&oacute;s algum tempo de capacita&ccedil;&atilde;o, busque melhores oportunidades no mercado, fazendo com que o empres&aacute;rio perca seu investimento. Todavia, n&atilde;o capacitar tamb&eacute;m tem o seu custo. E &eacute; bastante alto. Da&iacute; a import&acirc;ncia da forma&ccedil;&atilde;o continuada nas empresas, promovendo constantes atualiza&ccedil;&otilde;es e reciclagens dos profissionais.</p> <p align="justify"> <h4 style="text-align:left">Quanto custa n&atilde;o capacitar </h4> <ul style="margin-left: 5px;text-align:left; line-height: 35px; font-family: padrao;"> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Atendimento incompleto ou n&atilde;o compat&iacute;vel com a expectativa da empresa e do cliente.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Perda de neg&oacute;cios.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Insatisfa&ccedil;&atilde;o de clientes.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o do valor da marca.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;N&atilde;o cumprimento de metas.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Alto &iacute;ndice de <em>turnover</em>.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Insatisfa&ccedil;&atilde;o do funcion&aacute;rio.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Custos com retrabalho.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Sobrecarga de alguns funcion&aacute;rios (via de regra, aqueles melhores preparados).</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o da lucratividade.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o de faturamento.</li> </ul> <h4 style="text-align:left">O que o mercado est&aacute; fazendo para melhorar na gest&atilde;o e formar seus profissionais?</h4> <p style="text-align:left">Segundo estudos realizados pelo <a href="http://www.vistage.com.br/grupos-vistage" title="V&aacute; para o site" target="_blank" class="zloko">Grupo Vistage Brasil</a>:</p> <ul style="margin-left: 5px;text-align:left; line-height: 35px; font-family: padrao;"> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;Apenas 14&#37; dos executivos brasileiros n&atilde;o tem problemas ao buscar profissionais qualificados.</li> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;H&aacute; falta de m&atilde;o de obra qualificada para todos os n&iacute;veis de fun&ccedil;&atilde;o.</li> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;As maiores demandas s&atilde;o para profissionais com forma&ccedil;&atilde;o superior para a &aacute;rea de atua&ccedil;&atilde;o da empresa (65%) e forma&ccedil;&atilde;o t&eacute;cnica (60%).</li> </ul> </p> <p align="justify">Uma pesquisa do Jornal Bom Dia Brasil mostrou onde est&aacute; o emprego nas m&eacute;dias e grandes empresas. S&atilde;o setores onde sobram vagas porque falta qualifica&ccedil;&atilde;o e &aacute;reas onde o curso t&eacute;cnico j&aacute; garante a contrata&ccedil;&atilde;o. O curso t&eacute;cnico &eacute; suficiente para abrir as portas de entrada no mercado de trabalho.<br /> Entre as ind&uacute;strias pesquisadas, 65% reclamam da falta de m&atilde;o de obra especializada. As m&eacute;dias e grandes empresas procuram operadores.</p> <p align="justify">Exatamente o caso dessa empresa de automa&ccedil;&atilde;o de port&otilde;es em Bras&iacute;lia. &ldquo;A gente perde com nossa produtividade. A gente n&atilde;o consegue inovar com frequencia porque as pessoas n&atilde;o conseguem acompanhar essa demanda&rdquo;, afirma a gerente de RH Clara Moreira. <p style="text-align:justify;">A sa&iacute;da das empresas tem sido treinar os empregados: 81% fizeram investimentos em cursos dentro da pr&oacute;pria empresa. O que tamb&eacute;m n&atilde;o &eacute; f&aacute;cil, porque a maioria chega despreparada.</p> <h4 style="text-align:left;">Áreas dos cursos Gopinatha</h4> <br /> <div style="float:left; width:100%;"> <img src="images/colmeia.png" id="map-image" style="width: 480px; max-width: 100%; height: auto;" alt="" usemap="#cursos" /> <map name="cursos"> <area href="detalhe.php?id=200&gr=desh" alt="Desenvolvimento Humano" title="Desenvolvimento Humano" shape="poly" coords="176, 351, 258, 300, 345, 345, 348, 448, 262, 498, 184, 442" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cdes.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=info" alt="Informática" title="Informática" shape="poly" coords="431, 199, 517, 149, 599, 199, 598, 306, 514, 350, 431, 301" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cinf.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=gestao" alt="Gestão Avançada" title="Gestão Avançada" shape="poly" coords="262, 197, 347, 150, 430, 200, 430, 300, 344, 345, 258, 300" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cgest.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=contabil" alt="Contabilidade e Tributos" title="Contabilidade e Tributos" shape="poly" coords="90, 202, 178, 153, 262, 199, 260, 302, 177, 352, 92, 299" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/ccont.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=seguranca" alt="Segurança da Informação" title="Segurança da Informação" shape="poly" coords="345, 54, 428, 0, 515, 54, 516, 150, 430, 201, 345, 151" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cseg.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=201&gr=sistemas&ant=32" alt="Sistemas de Informação" title="Sistemas de Informação" shape="poly" coords="174, 49, 259, 1, 347, 56, 346, 152, 261, 199, 178, 153" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/csist.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=coaching" alt="Coaching" title="Coaching" shape="poly" coords="6, 49, 91, 2, 176, 50, 178, 153, 89, 202, 4, 146" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/ccoach.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> </map> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.js"></script> <script>$(document).ready(function(e){$("map").imageMapResize();});</script> </div>  
    • By Webster Moitinho
      Implementei em meu site o JQuery Autocomplete e consegui fazer ele funcionar na boa. Porém não estou conseguindo fazer com que, quando o usuário pesquisar pelo termo, e selecionar na lista, ele seja direcionado para a respectiva página.
       
      Meu código está assim:
      <div id="pesquisa"> <form action="index.php?id=<?php echo $target; ?>&tp=smp" method="post" name="autocomplete" target="_self"> <strong>Pesquisa:</strong> <input id="autocomplete" title="Digite algo" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;Digite algo"> <button id="button-icon">Pesquise</button> </form> </div><!--pesquisa--> <script src="libraries/jquery.js"></script> <script src="libraries/jquery-ui.js"></script> <script> <?php $sql = "SELECT pags.id, pags.title, pags.keywords, pags.tema FROM pags WHERE vendavel = 'S' ORDER BY pags.id"; $resultado = $PDO->query( $sql ); $rows = $resultado->fetchAll(PDO::FETCH_ASSOC); ?> var availableTags = [ <?php foreach ($rows as $key => $linha) { $target = $linha['id']; echo '"' . $linha['title'] .' | ' . $linha['keywords'] . '",'; } ?> "" ]; $( "#autocomplete" ).autocomplete({ source: availableTags }); $( "#button" ).button(); $( "#button-icon" ).button({ icon: "ui-icon-gear", showLabel: false }); </script>  
    • By skti
      Boa tarde, me chamo Augusto e gostaria de saber como preencher o campo automaticamente seguindo o formato descrito no título.. por exemplo, ao digitar os 3 primeiros números do cpf, o '.' (ponto) ser preenchido automaticamente. Sou iniciante e o mais perto que cheguei foi criar um input que, quando são digitados 3 caracteres, apareça um '-' (hífen), ficando xxx- por exemplo, porém, de maneira incorreta pois ao continuar digitando o texto ficava xxxxxx- ao inves de xxx-xxx e assim por diante. Agradeço quem puder ajudar! :)
    • By s3c0
      Boa tarde galera,
       
      estou precisando que a barra superior acompanhe o Scroll. Está funcionando de acordo com o propósito, porém se der um Refresh no meio da página por exemplo, a barra superior não aparece.
       
      $("document").ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 68) { $('.topo').fadeIn(); $('.topo').css("position","fixed") $('.topo').css("z-index","2") $('.topo').css("margin-top","-68px") } else { $('.topo').css("position","absolute") $('.topo').css("z-index","1") $('.topo').css("z-index","2") $('.topo').css("margin-top","0px") } }); });  
      Alguém possui alguma ideia do que está errado?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.