Avatar billede cautoo Nybegynder
14. august 2011 - 13:39 Der er 7 kommentarer og
1 løsning

jQuery animation ved XML opdatering

Er der nogen der har erfaring med at bruge Ajax jQuery animationer, eller lign. på en sådan måde, at hvis man har en XSLT fil der generer en for-each liste ud fra en XML fil, at når man gør dette med ajax, efter sideload. Kan man så indføre animationer på evt. nye elementer, forsvundne elementer, eller opdaterede elementer. Evt. ud fra et ID, eller DOM træ eller noget?

Jeg tænker dette som en mere generel metode, end en specieltlavet metode til hver XML fil.
Avatar billede jokkejensen Novice
17. august 2011 - 15:38 #1
Er dette forstået korrekt?

Du har et xml ark, du vil gerne i din xsl:foreach afvikle et ajax kald for hver loop i for-each'en ?

Dette bør udføres vha ajax only.

Psuedo:

$.ajax({
  url: "ditXmlark.xml",
  success: function(data){
    //data = xmldocument, loop igennem dem, i stedet for xsl:for-each, og udfør din animation
  }
});
Avatar billede jokkejensen Novice
17. august 2011 - 16:16 #2
du kan også bare lave din

<ul id="list"> gennem xsl:foreach

og så

$(function(){ //document.ready
$("#list li").each(function(){ //for hver li

$(this).click(function(){ //ved klik på hver li
      $(this).find("div.hidden").toogle(); //finder et div, med class=hidden, og "toogler" det  :)
});

});
});
Avatar billede cautoo Nybegynder
14. september 2011 - 19:43 #3
Jeg tror ikke rigtig det der gør hvad jeg gerne vil have den til.

Jeg tænker at jeg henter en xml liste fra en tabel ca. hvert 10. sek, og genererer en html kode via en xslt. Hvis der nu er kommet et nyt element, vil jeg gerne "animere" dette ind mellem de andre. Jeg ved hvordan det skal laves hvis man vil lave det for en specifik case, men tænke om man kunne lave noget generelt som altid virker.

Måske det er smartere at spørge, er der en smart måde hvorpå man kan "sammenligne" elementer i 2 DOM træer (det man viser, og det man har genereret genindlæsning af xml filen)?
Avatar billede jokkejensen Novice
15. september 2011 - 11:20 #4
Hvis du alligevel henter alle nyheder ud kan du jo bare sammenligne de 2 tekster, og hvis der er forskel animere den sidste nyhed frem.

Dog ville jeg:

1: Hente alle nyheder til dem (ren xslt), til seo.
2: Sætte en cookie med tidspunkt de renderede listen første gang
3: Tage cookie tidspunkt og "currentTime", med over i dit ajax kald, så den kun spørger efter nyeder der er "nye", når den finder en ny, opdateres tidspunkt i cookie.
4: Animer den nye nyhed ind i listen med
var data = $("<li class='new'>data</li>").hide();
$("#list").append($data)
$(".new").animate().show().cssClass("old");


/J
Avatar billede jokkejensen Novice
15. september 2011 - 11:59 #5
sig til hvis jeg igen har misforstået :), men ovenstående vil jeg benytte hvis jeg havde en nyhedsliste der asynkront skulle opdateres
Avatar billede cautoo Nybegynder
28. september 2011 - 05:46 #6
Jeg tror du rammer bedst det svar jeg ville have, så du få pointsne..
Avatar billede cautoo Nybegynder
05. oktober 2011 - 21:47 #7
jokkejensen.. sender du ikke lige et svar.. ?
Avatar billede cautoo Nybegynder
16. januar 2014 - 14:43 #8
lukker...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester