Leggere documento xml con jquery

By a.stefano

Date 11-04-2009 20:34

modificando il file xml così:

<?xml version="1.0" encoding="utf-8"?>
<lista_utenti>
  <utente>
    <id_utente>[nome utente]</id_utente>
    <nickname_utente>[nickname utente]</nickname_utente>
  </utente>
</lista_utenti>

sono riuscito a creare questa funzione ajax con jquery:

$(document).ready(function()
{
  function AggiornaUtenti()
  {
    $.post("richiesta_ajax.asp", { azione:"utenti", rand:Math.random() }, function(xml)
    {
      $(xml).find("utente").each(function(){
        var id = $(this).find("id_utente").text();
        var nickname = $(this).find("nickname_utente").text();
        
        $("lista-utenti").html("Utente -> " + id + " nick " + nickname);
      });
    });
  }
  
  setTimeout(AggiornaUtenti(), 5000);
});

ma non funziona poichè non scrive niente come invece dovrebbe piangere

By maxk

Date 12-04-2009 21:55

> <id_utente>[nome utente]</id_utente>

Non so se è un errore di distrazione, ma i dati non numerici in un file XML devono essere racchiusi in <![CDATA[...]]

Per quanto riguarda la lettura di file XML con jQuery:

- se leggevi bene la documentazione relativa ad AJAX avresti visto che basta dichiarare nella funzione il formato dati che riceverai in risposta


$.post(
      "URL"
    , { parametri }
    , funzione () { }
    , tipo dati di risposta

dove tipo dati di risposta può contenere: "xml" o "json".

Prendendo i tuoi dati e il tuo file XML, la funzioncina diventerebbe


$.post(
      "richiesta_ajax.asp"
    , { azione:"utenti", rand:Math.random() }
    , function ( xml ) {
      $( "utente" , xml ).each(
        function () {
          var $this = $( this );
             var id = $( "id_utente" , $this ).text();
             var nickname = $( "nickname_utente" , $this ).text();
            $( "lista-utenti" ).append( "Utente -> " + id + " nick " + nickname + "<br />" );
        }
      );
    }
    , "xml"
);

By a.stefano

Date 13-04-2009 00:05

buona pasqua :felice: ti ringrazio dell'aiuto che mi stai dando, non so veramente come farei se non ci fossi tu applausi

un'ultima cosa: tempo fa mi avevi spiegato la funzione settimeout, ecco il codice che ho:

$(function() {
  $("#pannello-tabs").tabs();
});

$(document).ready(function()
{
  function AggiornaUtenti()
  {
    $.post("richiesta_ajax.asp", { azione:"utenti", rand:Math.random() }, function(xml)
    {
      $(xml).find("utente").each(function()
      {
        var id = $(this).find("id_utente").text();
        var nickname = $(this).find("nickname_utente").text();
        
        $('<div class="riga-utente"></div>').html('<a href="privati.asp?destinatario=' + id + '">' + nickname + '</a>').appendTo("#lista-utenti");
      });
    }
    , "xml"
    );
  }
  
  AggiornaUtenti();
  
  setTimeout("AggiornaUtenti()", 5000);
});

perchè non richiama ogni 5 secondi la funzione AggiornaUtenti?

By maxk

Date 13-04-2009 12:31

1) porta fuori la funzione dal controllo "onload" di jQuery

2) inserisci il setTimeout all'interno della funzione


$(document).ready(function()
{
     AggiornaUtenti();
});

function AggiornaUtenti()
  {
    $.post("richiesta_ajax.asp", { azione:"utenti", rand:Math.random() }, function(xml)
    {
      $(xml).find("utente").each(function()
      {
        var id = $(this).find("id_utente").text();
        var nickname = $(this).find("nickname_utente").text();
       
        $('<div class="riga-utente"></div>').html('<a href="privati.asp?destinatario=' + id + '">' + nickname + '</a>').appendTo("#lista-utenti");
      });

         setTimeout("AggiornaUtenti()", 5000);
    }
    , "xml"
    );
  }

By a.stefano

Date 13-04-2009 13:14

EDIT:
piccolo problema: ora funziona e aggiorna correttamente la pagina ogni 5 secondi dopo la prima chiamata della funzione solo che non rimpiazza la lista vecchia con quella aggiornata bensì continua a scrivere dopo quella vecchia generando una lista infinita dubbio

By maxk

Date 13-04-2009 21:42

Beh, se usi

.appendTo("#lista-utenti");

lo dice la parola stessa: "aggiungi a"

ciao ciao

By a.stefano

Date 13-04-2009 22:08

e come faccio per rimpiazziare la vecchia lista con quella nuova?

By maxk

Date 14-04-2009 12:22

Prima di cominciare il ciclo azzeri il contenitore:

$( "#lista-utenti" ).empty();

ciao ciao

By a.stefano

Date 14-04-2009 12:40

quindi lo script corretto è:

$(document).ready(function()
{
     AggiornaUtenti();
});

function AggiornaUtenti()
  {
    $.post("richiesta_ajax.asp", { azione:"utenti", rand:Math.random() }, function(xml)
    {
      $(xml).find("utente").each(function()
      {
        var id = $(this).find("id_utente").text();
        var nickname = $(this).find("nickname_utente").text();
        
        $( "#lista-utenti" ).empty();
        $('<div class="riga-utente"></div>').html('<a href="privati.asp?destinatario=' + id + '">' + nickname + '</a>').appendTo("#lista-utenti");
      });

        setTimeout("AggiornaUtenti()", 5000);
    }
    , "xml"
    );
  }

giusto?

By maxk

Date 14-04-2009 14:13

NO!!! Fuori dal ciclo, altrimenti così azzera il contenitore prima di stampare ogni utente!!!


      $( "#lista-utenti" ).empty();
      $(xml).find("utente").each(function()
      {
        var id = $(this).find("id_utente").text();
        var nickname = $(this).find("nickname_utente").text();
       
        $('<div class="riga-utente"></div>').html('<a href="privati.asp?destinatario=' + id + '">' + nickname + '</a>').appendTo("#lista-utenti");
      });

By a.stefano

Date 14-04-2009 15:00