Baza filmów xml w ajaxie - po kliknięciu nie pokazuje informacji

0

Witam. Zacząłem uczyć się ajaxa i mam problem, nie wiem w którym miejscu zrobiłem błąd. Strona ma pokazywać informacje z pliku xml po kliknięciu + i chować po naciśnięciu -:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function getXMLHttpRequest()
{
  var request = false;
    
  try {
    request = new XMLHttpRequest();
  } catch(err1) {
    try {
      request = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(err2) {
      try {
        request = new ActiveXObject('Microsoft.XMLHTTP');                
      } catch(err3) {
        request = false;
      }
    }
  }
  return request;
}     

var r;
r = getXMLHttpRequest();    

var opis= new Array(20);
opis[0] = 'tytul';
opis[1] = 'rok';
opis[2] = 'rezyser';


var element; 

function processResponse()
{
  if (r.readyState == 4) {
    if (r.status == 200) {

      var x = r.responseXML.getElementsByTagName('film')[0].childNodes;

      var tmp = '';

      for (i = 1; i < x.length; i++) {
        tmp = tmp
          + '<strong>' + opis[i] + ':</strong> '
	  + x[i].childNodes[0].nodeValue
	  + '<br />';
      }

      element.innerHTML = tmp;
    };
  }
}

function expandCollapse(Id, Numer)
{
  element = Id.parentNode.parentNode.childNodes[1];
  if (element.style.display == 'block') {
    element.style.display = 'none';
    Id.innerHTML = '+';
  } else {
    element.style.display = 'block';
    Id.innerHTML = '-';

    r.open('GET', 'dane-xml/' + Numer + '.xml', true);
    r.onreadystatechange = processResponse;
    r.send(null);

  }
}

</script>
</head>
<body>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 1);">+</a>Zielona Mila</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 2);">+</a>Pulp Fiction</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 3);">+</a>Ojciec Chrzestny</h3><div></div></div>
</body>
</html>

Pliki xml w takim formacie:

<?xml version="1.0" encoding="utf-8"?>
<film>
<tytul>Zielona Mila</tytul>
<rok>1999</rok>
<rezyser>Frank Darabont</rezyser>
</film>

Po kliknięciu + znak zmienia się na -, ale nie pokazuje danych.

Uczę się z tego kursu: http://gajdaw.pl/ajax/wprowadzenie/p6.html#P6-3 (na podobny przykład tylko jako baza aparatów, a nie filmów)

Pliki xml zapisane jako 1.xml, 2.xml, 3.xml w folderze dane-xml. Plik html w tym folderze co dane-xml.

0

ten kurs ma ponad trzy lata
dwa słowa: jQuery... użyj

największe strony go używają i nie ma co się oszukiwać i męczyć
w ten sposób zrobisz więcej i szybciej

jeśli jednak naprawdę jesteś masochistą lub jednym z tych haterów jQuery którzy właściwie sami nie mają argumentów to naucz się debugować samemu - firebug Twoim przyjacielem
albo chociaż powiedz czy i jakie błędy wyskoczyły w konsoli błędów

poza tym:

Zwróć uwagę, że zmienna element jest zmienną globalną.

no właśnie zwróciłem i mnie to przeraża

Id.parentNode.parentNode.childNodes[1];

omg... mógł jeszcze wrzucić parę parentNode żeby wrócić do window i stamtąd z powrotem schodzić żeby było bardziej elastycznie...
o czymś takim jak chociażby .nextSibling oczywiście nikt nie słyszał

tam jeszcze jakaś drabinka try, żeby później zrobić return...
srsly, weź ten kurs spal czy coś

a na oko wygląda że powinno działać

0

A mógłbyś mi polecić jakiś kurs jquery (za kurs ajaxa też byłbym wdzięczy, bo chciałbym umieć)? Ten z Webhosting.pl (link do pierwszej części - http://webhosting.pl/Kurs.jQuery.Czesc.1.Wprowadzenie.Zalety.podstawowe.zasady.pierwszy.skrypt.i.rozszerzenia , wszystkich jest chyba 6) może być?

0
szisoweder napisał(a)

A mógłbyś mi polecić jakiś kurs jquery (za kurs ajaxa też byłbym wdzięczy, bo chciałbym umieć)? Ten z Webhosting.pl (link do pierwszej części - http://webhosting.pl/Kurs.jQuery.Czesc.1.Wprowadzenie.Zalety.podstawowe.zasady.pierwszy.skrypt.i.rozszerzenia , wszystkich jest chyba 6) może być?

no jQuery to między innymi taka nakładka upraszczająca na AJAX
po tym pierwszym kursie już wiesz z czym się je AJAX w formie najniższej możliwej, więc nie widzę potrzeby dalej się tym zajmować

kursu żadnego jako takiego nie polecę bo ja się zazwyczaj uczę bezpośrednio z dokumentacji
http://docs.jquery.com/Main_Page

BTW W tamtym kodzie błąd jest w tym miejscu:

      for (i = 1; i < x.length; i++) {
        tmp = tmp
          + '<strong>' + opis[i] + ':</strong> '
          + x[i].childNodes[0].nodeValue
          + '<br />';
      }

problemem jest to że childNodes[0] nie występuje w co drugim elemencie, bo co drugi element jest po prostu tekstem oznaczającym nową linię i skrypt się wywala
musiałbyś dodać warunek na przykład if(x[i].childNodes[0]) lub if(x[i].nodeType == 1 /* ELEMENT_NODE */) lub usunąć z xmla znaki nowych linii
w dodatku to zdaje się jest uwarunkowane od przeglądarki i na IE by to zadziałało
właśnie na takie między innymi różnice między przeglądarkami jest uodporniony jQuery

1 użytkowników online, w tym zalogowanych: 0, gości: 1