Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] zastępowanie wgranego wcześniej zdjęcia nowym
Forum PHP.pl > Forum > Przedszkole
followc
Witam,
jako że moja wiedza odnośnie javascriptu ogranicza sie praktycznie tylko do jQuery, a korzystam z gotowego kodu i próbuję go nieco zedytować, błądzę dość poważnie i potrzebuję Waszej pomocy. Otóż poniższa funkcja ajaxowo wyświetla wgrane wcześniej zdjęciA. Chciałbym, żeby ograniczało się to do jednego i zastępowało wcześniej wgrane nowym.
  1. function showUploadedItem (source) {
  2. var list = document.getElementById("image-list"),
  3. li = document.createElement("li"),
  4. img = document.createElement("img");
  5. img.src = source;
  6. li.appendChild(img);
  7. list.appendChild(li);
  8. }


Moje próby typu
  1. function showUploadedItem (source) {
  2. var list = document.getElementById("image-list"),
  3. li = document.getElementById("image-list-li"),
  4.  
  5. img = document.createElement("img");
  6. img.src = source;
  7. li.appendChild(img);
  8. list.appendChild(li);
  9. }


Kończą się jednakowo żałośnie, więc proszę o jakieś wskazówki
Comandeer
li polecałbym tworzyć (tak, jak w pierwszym kodzie), natomiast nie ma sensu dowalać go na koniec listy (list.appendChild), tylko zastąpić istniejący element listy nowym (replaceChild). Coś typu:
Kod
var oldLi = list.firstElementChild; //jak musisz wspierać IE < 9, to można zrobić list.getElementsByTagName('li')[0]
var newLi = document.createElement('li');
list.replaceChild(newLi, oldLi);
followc
Dzięki, ale to nie jest tak że aby to co zaprezentowałeś działało dobrze musiałby już być utworzony pierwszy element, a w przypadku gdy zaczynamy od zera nam się to nie uda? Może źle się wyraziłem, ale chodzi mi o to, że na początku nie mamy nic, wgrywamy zdjęcie (do tego momentu działa tak jak sobie wymarzyłem), ale kolejne są dodawane, nie zastępowane. I gdyby nie ten szczegół Twój kod byłby git. Tak mi się wydaję, racja?
Comandeer
Racja, ale to wystarczy sprawdzić długość "tablicy" zwróconej przez list.getElementsByTagName('li') i jeśli wynosi 0, to dodać element przez appendChild, a jeśli więcej niż 0, to zastosować zastępowanie.

Można też po prostu od razu stworzyć listę z jednym, pustym elementem wink.gif
followc
Niestety moje niezrozumienie JS jest zbyt duże, powstają więc takie twory...
  1. function showUploadedItem (source) {
  2. var list = document.getElementById("image-list"),
  3. //li = document.createElement("li"),
  4. img = document.createElement("img");
  5. img.src = source;
  6.  
  7. if(list.getElementsByTagName('li') == 0){
  8. li = document.createElement("li"),
  9. li.appendChild(img);
  10. list.appendChild(li);
  11. }else{
  12. var oldLi = list.firstElementChild; //jak musisz wspierać IE < 9, to można zrobić list.getElementsByTagName('li')[0]
  13. var newLi = document.createElement('li');
  14. li.appendChild(img);
  15. list.replaceChild(newLi, oldLi);
  16. }
  17. }


Które niewiele zmieniają...

edit. w sumie to problem jest z ifem, bo jesli zrobie if(1) to wykonuje sie tak jak trzeba (nie wiem jak z else)
edit2.
  1. var x = list.getElementsByTagName('li');
  2. if(x.length == 0){

miało większe szanse powodzenia;)
Comandeer
http://jsfiddle.net/Comandeer/r985w37k/
followc
Powoli wyhaczałem moje dramatyczne błędy, nie wiem jednak czy jeszcze we wrześniu skończyłbym ten prosty problem bez Twojej pomocy. Dzięki wielkie!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.