Witam,
napisałem skrypty do obsługi drzew w PHP w połączeniu z przechowywaniem ich w MySQL. Następnie dodałem sobie skrypt w JS żeby to ładnie śmigało bez przeładowywania strony.

Mam problem tego rodzaju, że w Chromie i Operze wszystko ładnie chodzi bez zająknięcia. W IE (8) wyświetla się tylko część strony (ta pod formularzami), a już w FF nic nie działa.

Proszę o podpowiedź, pomoc w rozwiązaniu problemu.
Dodam tylko, że zastanawiałem się nad dodaniem stosu z akcjami przed wykonaniem XMLHttpRequest, ale nie wiem czy w tym problem tkwi.
Wiem też, że taka struktura aż prosi się o wykorzystanie plików XML i do tego dążę, ale zacząłem od samego kodu PHP i dlatego na chwilę obecną jest to wszystko bez XMLów. Teraz zależy mi żeby to działało na każdej przeglądarce, a jak się z tym uporam to będę się męczył z XMLami.

Poniżej listeningi dla mojego kodu:
pliki
Dodałem na zewn. server, bo post był za długi.

Tutaj zamieszczam tylko kod JS,index.html i plik ze stylami (w archiwum są jeszcze pliki PHP)
index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 	<meta name="description" content="Drzewa w PHP i MySQL.">
  6. 	<title>Drzewa w PHP i MySQL</title>
  7.  
  8. 	<link href="styl.css" rel="stylesheet" type="text/css" />
  9. 	<script type="text/javascript" src="js/funkcje.js"></script>
  10. </head>
  11. <body onload="pre_load();">
  12. <table>
  13.   <tr>
  14.     <td>
  15. 	  <form id="dodaj" name="dodaj">
  16. 	    Dodaj element (nazwa): 
  17. 	    <input type="text" id="nazwa" name="nazwa"/><br />
  18. 		pod:
  19. 		<select id="id_dodaj_pod" name="id_dodaj_pod">
  20. 		</select><br />
  21. 		<input type="button" name="b_add" value="Dodaj" onclick="addItem();" />
  22. 	  </form>
  23. 	</td>
  24. 	<td>
  25. 	  <form id="usun" name="usun">
  26. 	    <select id="id_usun" name="id_usun">
  27. 		</select><br />
  28. 		<input type="button" name="b_del" value="Usuń" onclick="delItem();" />
  29. 	  </form>
  30. 	</td>
  31. 	<td>
  32. 	  <form id="przenies" name="przenies">
  33. 	    Przenieś: 
  34. 		<select id="id_przenies_co" name="id_przenies_co">
  35. 		</select><br />
  36. 		pod: 
  37. 		<select id="id_przenies_pod" name="id_przenies_pod">
  38. 		</select><br />
  39. 		<input type="button" name="b_move" value="Przenieś" onclick="moveItem();" />
  40. 	  </form>
  41. 	</td>
  42.   </tr>
  43. </table>
  44. <br />
  45. <div id="info" class="info_hide"></div>
  46. <div id="content"></div>
  47. </body>
  48. </html>
[HTML] pobierz, plaintext


funkcje.js - znajduje się w folderze js
Kod
//przechowuje obiekt XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
//wyśiwtlać błędy?
var debugMode = true;
//adres i parametry
var url = "drzewo.php";
var toReload = "drzewo.php?action=reload";
var toTreeList = "drzewo.php?action=showList";
var actionAddItem = "drzewo.php?action=add";
var actionDelItem = "drzewo.php?action=del";
var actionMoveItem = "drzewo.php?action=move";
//cache dla zapytań
var cache = new Array();

//tworzenie obiektu XMLHttpRequest
function createXmlHttpRequestObject()
{
  //odwołanie do obiektu XMLHttpRequest
  var xmlHttp;
  //all, za wyjątkiem IE6 i wcześniejszych
  try
  {
    //tworzenie obiektu XMLHttpRequest
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    //dla IE6 i wcześniejszych
    var XmlHttpVersions = new Array(
    "MSXML2.XMLHTTP.6.0",
    "MSXML2.XMLHTTP.5.0",
    "MSXML2.XMLHTTP.4.0",
    "MSXML2.XMLHTTP.3.0",
    "MSXML2.XMLHTTP",
    "Microsoft.XMLHTTP");
    //przeszukanie w celu znalezienie prog id
    for(var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
    {
      try
      {
        //tworzenie obiektu XMLHttpRequest
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch(e) {}
    }
  }
  //zwrócenie stworzonego elementu lub błedu
  if(!xmlHttp)
    alert("Błąd podczas tworzenia obiektu XMLHttpRequest.");
  else
    return xmlHttp;
}

function display(message)
{
  //odwołanie do elemntu "<div>" na stronie
  myDiv = document.getElementById("content");
  //wyświetla komunikat
  myDiv.innerHTML = message;
}

function displayList(message)
{
  var listy = ["id_dodaj_pod","id_usun","id_przenies_co","id_przenies_pod"];
  var i=0;
  for(i=0;i<listy.length;i++)
  {
  //odwołanie do elemntu "<div>" na stronie
  myList = document.getElementById(listy[i]);
  //wyświetla komunikat
  myList.innerHTML = message;
  }
}

//funkcja wyświetla komunikat o błędzie
function displayError(message)
{
  //jeżeli zmienna debugMode ustawiona na "true" wyświetla szczegóły błędu
  var infoDiv = document.getElementById("info");
  infoDiv.className = "info_err";
  infoDiv.innerHTML = message;
}

//wyśiwtlanie informacji o ostatniej wykonanej czynności
function showInfo(message)
{
  var infoDiv = document.getElementById("info");
  infoDiv.className = "info_ok";
  infoDiv.innerHTML = message;
}

//wywołanie serwera
function pre_load()
{
  //jeżeli xmlHttp nie jest pusty
  if(xmlHttp)
  {
    //łączenie z serwerem
    try
    {
      //żądanie HTTP
      xmlHttp.open("GET", toTreeList, false);
      xmlHttp.onreadystatechange = handleResponseList;
      xmlHttp.send(null);
    }
    catch(e)
    {
      displayError(e.toString());
    }
    //łączenie z serwerem
    try
    {
      //żądanie HTTP
      xmlHttp.open("GET", toReload, false);
      xmlHttp.onreadystatechange = handleResponse;
      xmlHttp.send(null);
    }
    catch(e)
    {
      displayError(e.toString());
    }
  }
}

//funkcja wywoływana przy zmianie statusu żądania
function handleResponse()
{
  if(xmlHttp.readyState == 4)
  {
    if(xmlHttp.status == 200)
    {
      try
      {
        //przetwarza wiadomość z serwera
        getResults();
      }
      catch(e)
      {
        displayError(e.toString());
      }
    }
    else
    {
      displayError(xmlHttp.statusText);
    }
  }
}

function handleResponseList()
{
  if(xmlHttp.readyState == 4)
  {
    if(xmlHttp.status == 200)
    {
      try
      {
        //przetwarza wiadomość z serwera
        getResultsList();
      }
      catch(e)
      {
        displayError(e.toString());
      }
    }
    else
    {
      displayError(xmlHttp.statusText);
    }
  }
}

//obsługuje odpowiedź z serwera
function getResults()
{
  //pobieranie odpowiedzi z swrera
  var response = xmlHttp.responseText;
  //błąd?
  if(response.indexOf("ERRNO") >= 0 || response.indexOf("error") >= 0 || response.length == 0 ? "Bład serwera." : response);
  //wyświetla wiadomość
  display(response);
}

function getResultsList()
{
  //pobieranie odpowiedzi z swrera
  var response = xmlHttp.responseText;
  //błąd?
  if(response.indexOf("ERRNO") >= 0 || response.indexOf("error") >= 0 || response.length == 0 ? "Bład serwera." : response);
  //wyświetla wiadomość
  displayList(response);
}

//dodawanie elementu
function addItem()
{
  //pobieranie wartości dla $name i $id (funkcja php)
  var item_name = document.getElementById("nazwa").value;
  var item_id = document.getElementById("id_dodaj_pod").value;
  //czy wpisano nazwę nowej kategorii?
  if(item_name == "") alert("Nie podano nazwy kategorii!");
  else
  {
    //jeżeli xmlHttp nie jest pusty
    if(xmlHttp)
    {
      //łączenie z serwerem
      try
      {
        //żądanie HTTP
        xmlHttp.open("GET", actionAddItem + "&name=" + item_name + "&id1=" + item_id, false);
        xmlHttp.onreadystatechange = handleResponseList;
        xmlHttp.send(null);
      }
      catch(e)
      {
        displayError(e.toString());
      }
    }
  }
  //wykasowanie wpisanej nazwy katalogu
  document.getElementById("dodaj").reset();
  //przeładowanie list i drzewa
  pre_load();
  //wyśiwtlenie informacji dla użytkownika
  showInfo("Element został poprawnie dodany.");
}
//usuwanie elementu
function delItem()
{
  //pobieranie wartości dla $name i $id (funkcja php)
  var item_id = document.getElementById("id_usun").value;
  //czy na pewno usunąć?
  var sure = confirm("Na pewno usunąć wybrana kategorię?");
  if(sure)
  {
    //jeżeli xmlHttp nie jest pusty
    if(xmlHttp)
      {
      //łączenie z serwerem
      try
      {
        //żądanie HTTP
        xmlHttp.open("GET", actionDelItem + "&id1=" + item_id, false);
        xmlHttp.onreadystatechange = handleResponseList;
        xmlHttp.send(null);
      }
      catch(e)
      {
        displayError(e.toString());
      }
    }
    //wyśiwtlenie informacji dla użytkownika
    showInfo("Element został usunięty z listy.");
  }
  else displayError("Element nie został usunięty!");
  //przeładowanie list i drzewa
  pre_load();
}
//przenoszenie elementu
function moveItem()
{
  //pobieranie wartości dla $name i $id (funkcja php)
  var item_id1 = document.getElementById("id_przenies_co").value;
  var item_id2 = document.getElementById("id_przenies_pod").value;
  
  //jeżeli xmlHttp nie jest pusty
  if(xmlHttp)
  {
    //łączenie z serwerem
    try
    {
      //żądanie HTTP
      xmlHttp.open("GET", actionMoveItem + "&id1=" + item_id1 + "&id2=" + item_id2, false);
      xmlHttp.onreadystatechange = handleResponseList;
      xmlHttp.send(null);
    }
    catch(e)
    {
      displayError(e.toString());
    }
  }
  //przeładowanie list i drzewa
  pre_load();
  //wyśiwtlenie informacji dla użytkownika
  showInfo("Element został poprawnie przeniesiony.");
}


styl.css
Kod
body {
    background-color:LightGrey;
}
table {
    border:2px solid #000;
    width:100%;
}
td {
    width:32%;
    border:1px solid Grey;
    text-align:center;
}
.info_ok {
    padding:3px;
    background-color:lightGreen;
    color:#000;
    font-size:14px;
    font-family:Verdana,Arial;
    text-align:center;
}
.info_err {
    padding:3px;
    background-color:Red;
    color:#000;
    font-size:14px;
    font-family:Verdana,Arial;
    text-align:center;
}
.info_hide {
    display:none;
}