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 TaisStream
      Como configurar essa query com inner join, no arquivo .xml?
      Me ajudem pf eu comecei mas estou perdida,  pesquisei já vi algo de /root... mas minha query esta diferente, nao sei se falta algo
       
       
      QUERY ATUAL:
      set mapreduce.job.queuename=low_relatorios; 
      set mapreduce.job.max.split.locations=100;
      SELECT a.num_msisdn,
             a.max_date
      FROM fact.dw_f_rcrg_gems_rate_subsc t
      INNER JOIN
        (SELECT num_msisdn,
                MAX(dat_operacao) AS max_date
         FROM fact.dw_f_rcrg_gems_rate_subsc
         WHERE (ref_date)>=$startdate
           AND ref_date<=$finaldate
           AND ide_plano_tarifario_atual IN (48,
                                             50,
                                             51,
                                             52,
                                             53,
                                             59,
                                             61,
                                             62,
                                             63,
                                             67,
                                             73,
                                             74)
         GROUP BY num_msisdn)a ON a.num_msisdn = t.num_msisdn
      AND a.max_date = t.dat_operacao
      WHERE ref_date>=$startdate
      AND ref_date<=$finaldate;
       
      QUERY CONFIGURANDO NO XML: 
       
          <value><![CDATA[[
      INSERT
              overwrite TABLE fact.dw_f_rcrg_gems_rate_subsc t 
              (
                      a.num_msisdn,
                      a.max_date
              )
      (SELECT
          INNER JOIN
      SELECT      
              MAX(dat_operacao) AS max_date;
      FROM fact.dw_f_rcrg_gems_rate_subsc) a
         WHERE (ref_date)>='$startdate'
           AND ref_date<=$'finaldate'
           AND ide_plano_tarifario_atual IN (48,
                                             50,
                                             51,
                                             52,
                                             53,
                                             59,
                                             61,
                                             62,
                                             63,
                                             67,
                                             73,
                                             74)
         GROUP BY num_msisdn)a ON a.num_msisdn = t.num_msisdn
                  AND a.max_date = t.dat_operacao
      WHERE ref_date>='$startdate'
      AND ref_date<=$finaldate;]]>
      </value>
       
       
      Poderiam me ajudar por favor, sou estagiario na area e ainda estou aprendendo.
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
    • By mjf2004
      Alguém poderia me ajudar com a solução dessa questão abaixo?
       
      Dado o seguinte esquema relacional para um banco de dados de uma academia , escreva uma definição DTD que do seu ponto de vista mapeie a estrutura desse banco de dados para um banco de dados XML.

      Alunos(RG, Nome, Endereço, Telefone, Sexo, Idade)
      Instrutores(RG, Nome, Endereço, Titulação)
      Turmas(Numero, Atividade, Horário, NoVagas,
      RGInstrutor ref Instrutores(RG) , RGMonitor ref Alunos(RG)
      Matricula(RG ref Alunos(RG), Numero ref Turmas(Numero), Ausências)
    • By Infra Comnet
      Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.
      Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.
      Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.
      Veja o código completo abaixo:
      <html> <head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head> <!-- Script com link de JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},              {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},              {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},              {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},             ]; $('input[name="codigo"]').change(function(){   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val())); }); $('input[name="nome"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `)); }); $('input[name="tecnico"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `)); }); function pegaNome(cod){   var nome  = "Não existe na lista"   var nomes = "";      $.each(dados, function(i, val){     if (val.codigo == cod)       {         nome = val.Nome;         $.each(nome, function(index, value){           nomes += value + '\n\n';         });         }     });   return nomes; } String.prototype.replaceAll = function(searchStr, replaceStr) {     var str = this;     searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');     return str.replace(new RegExp(searchStr, 'gi'), replaceStr); }; </script> <body> <!-- Exibindo na página nos navegadores --> <tr>   <td>     Código:<input type="text" name="codigo" size="5">     Cliente: <input type="text" name="nome" size="28"></td></br>     Técnico: <input type="text" name="tecnico" size="28"></br></br>     <textarea name="nome pessoal" rows="10" cols="50"></textarea>   </td> </tr> </body> </html>  
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
×

Important Information

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