Witam wszystkich.

No to prosto z mostu:
Czego chce dokonac?
Formularz z jednym polem tekstowym i przyciskiem "wyslij", ktory wysylalby tekst z tego pola do bazy uzywajac Ajax'u. Odpowiedz typu "dane zostaly dodane" wyswietlalyby sie w miejscu formularza poprzedzajac to wszystko paskiem postepu.

Dodam, ze opieralem sie dosc mocno na opisie tego ze strony webmade, ale to chyba nie ma wiekszego znaczenia.

add_db.php dodaje co trzeba do bazy wiec nie ma imho sensu opisywac bo to oczywista rzecz.
add_show.php jest plikiem wyjsciowym ktory po dodaniu wszystkiego do bazy ma cos pokazac, powiedzmy ze to bedzie napis "dane zostaly dodane do bazy"
Kod wyglada mniej wiecej tak:

Kod
<script language="JavaScript" type="text/javascript" src="advajax.js">
    // Wysylanie tresci formularza do pliku add_db
    function send() {
    advAJAX.submit(document.getElementById("dodaj"), {
      onSuccess : function(obj) { },
      onError : function(obj) { alert("Error: " + obj.status); }
    });
    }
    // pierwsza czesc kodu  
    if (window.XMLHttpRequest)
      {
       ObiektXMLHttp = new XMLHttpRequest(); }
       else if (window.ActiveXObject)
          {
           ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
    
    // druga czesc kodu
    function getData(zrodlo, cel) {
     if(ObiektXMLHttp)
      {
       var cel = document.getElementById(cel);
       ObiektXMLHttp.open("GET", zrodlo);
    
    ObiektXMLHttp.onreadystatechange = function()
    {
      if (ObiektXMLHttp.readyState == (0 || 1 || 2 || 3))
      {
            cel.innerHTML = "<center>Proszę czekać...<br><img src=\"images/loading.gif\"><br><br></center>";
      }
     if (ObiektXMLHttp.readyState == 4)
       {
        cel.innerHTML = ObiektXMLHttp.responseText;
       }
    }
    // trzecia czesc kodu
    ObiektXMLHttp.send(null); } }
    
     function show(name)
     {
      var obj = document.getElementById(name);
      if(obj)
      {
       if(obj.style.display == 'none') obj.style.display = 'block'; else obj.style.display = 'none';
      }
      return false;
     }

function disableEnterKey(e)
{
     var key;


     if(window.event)
          key = window.event.keyCode;     //IE
     else
          key = e.which;     //firefox

     if(key == 13)
          return false;
     else
          return true;
}
</script>


Do tego formularz:

Kod
<form action="scripts/add_db.php" method="post" id="dodaj">
Tekst: <input type="text" name="txt" onKeyPress="return disableEnterKey(event)"><br><br>      
<input type="button" onclick="send(); getData('scripts/add_show.php', 'div')" value="Dodaj"><br>
</form>


Teraz problemy z tym zwiazane (prosze chociaz polowicznie odpowiedziec na niektore):
1. Za nic w swiecie nie moge uzyskac tego samego efektu jesli przycisniemy przycisk "dodaj" i jesli nacisniemy enter gdyz w przypadku przycisku "dodaj" wszystko jest OK (prawie, ale o tym pozniej), to w przypadku entera wykonuje sie tylko to co jest w akcji formularza. Jest to w sumie oczywiste bo funkcje send i getData przypisane sa do zdarzenia onclick, dlatego tez zastosowalem fukcje blokujaca wcisniecie entera. Wolalbym jednak zeby enterem tez mozna bylo.

2. W operze wcisniecie przycisku "dodaj" dodaje wszystko co powinno, ale niestety nie pokazuje paska postepu. Co ciekawe jesli ponownie wcisniemy przycisk to wszystko jest OK. Sadze, ze problem lezy stanach: if (ObiektXMLHttp.readyState == (0 || 1 || 2 || 3)) bo jesli wyrzuce stan pierwszy i zostawie if (ObiektXMLHttp.readyState == (0 || 2 || 3)) to wszystko jest OK, po pierwszym kliknieciu ladnie pokazuje pasek postepu a nastepnie strone wyjsciowa czyli np. napis ze "dane zostaly dodane".

3. W operze i FF jesli gdzies w innym miejscu strony uzyje ponownie Ajax'u i ponownie wymusze pokazanie sie paska postepu to pasek ten nie znika tylko wyswietlony jest caly czas. Nie przechodzi do wspomnianej strony wyjsciowej (czyli strony z komunikatem "dane zostaly dodane"). Co znowu bardzo ciekawe, jesli usune stan pierwszy to wszystko dziala jak powinno smile.gif.

Ogolnie rzecz biorac, da sie zrobic tak ze wszystko dziala albo dla Opery albo dla IE albo dla FF, ale zeby dzialalo wszedzie to nie ma szans :/. Juz pomijajac pare niedociagniec ktore moglbym przezyc to kod ten bylby akceptowalny gdyby nie to, ze ten pasek postepu sie zawiesza jak uzyje kilka razy Ajaxa no i te podwojne klikniecia w operze. Dodam jeszcze, ze w IE wszystko jest dobrze.



Edit: Pisanie powyzszego posta dalo mi troche do myslenia, pogrzebalem wiecej w necie i znalazlem rozwiazanie smile.gif. Przy okazji zauwazylem, ze wielu ludzi ma podobny problem. Tak wiec aby post ten nie poszedl na marne i zostal na potomnych moge z satysfakcja powiedziec, ze lekiem na cale zlo (oprocz koniecznosci blokowania entera przy wysylania formularza) jest kod:

Kod
     function getData(zrodlo, cel)
     {
     var ObiektXMLHttp;
    
    if (window.ActiveXObject)
    {
     ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     ObiektXMLHttp = new XMLHttpRequest();
    }
    
    if(ObiektXMLHttp)
      {
       var cel = document.getElementById(cel);
       ObiektXMLHttp.open("GET", zrodlo);  
       ObiektXMLHttp.onreadystatechange = function()
    {
     if (ObiektXMLHttp.readyState == 4)
       {
        cel.innerHTML = ObiektXMLHttp.responseText;
       }
      else
      {
        cel.innerHTML = "<center>Proszę czekać...<br><img src=\"images/loading.gif\"><br><br></center>";
      }
    }
    ObiektXMLHttp.send(null); }
    }


Funkcje ta testowalem na IE, FF i Operze, nigdzie nie zauwazylem zadnych problemow. Mozna uzywac ja wielokrotnie, nie powoduje to juz uzywanie tego samego obiektu XMLHttpRequest. Nic sie nie wiesza, nic nie blokuje.

PS. Przepraszam za marna przejrzystosc moich zrodel, ale skupilem sie glownie na rozwiazaniu problemu wiec czesto wklejalem czyjes rozwiazania zeby sprawdzic czy dzialaja, stad tez wyglada to troche chaotycznie.