[JS] Problem z AJAX'em

0

Witam,
Chciałbym nadmienić, że to mój pierwszy skrypt wykorzystujący AJAX'a i jeszcze nie za bardzo czaje ocb.
Skrypt ma na bieżąco sprawdzać dostępne godziny w na liście 'termin'. Wygląda to tak:

termin.php:

<?php
if($_POST['confirm']){
require("mysql.php");
$query="UPDATE wizyty SET zajety=1 WHERE godz='".$_POST['termin'].":00'";
$result = mysql_query($query) or die ("Blad przy wykonywaniu zapytania: " .mysql_error());
echo "Termin: ".$_POST['termin'];
echo " Zmianiono ".mysql_num_rows($result)." wpis w bd.";
}
?>
<html>
<script>
function populate(inForm){
ajax();
(...)
}
(...)
function ajax(){
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();
 	r.open('GET', 'response.php', true);
	r.send(null);
	r.onreadystatechange = processResponse;
function processResponse(){
if (r.readyState == 4) {
     if (r.status == 200) {
		 
		 for(i=0; i<r.responseXML.getElementsByTagName('godz').length; i++){
		 form1.termin.options[i] = new Option(r.responseXML.getElementsByTagName('godz')[i].childNodes[0].nodeValue, r.responseXML.getElementsByTagName('godz')[i].childNodes[0].nodeValue);
		 }
}
}
}
}
</script>
<body onLoad="populate(form1);">
    <form name="form1" method="post">
Termin:<select name="termin" onFocus="ajax()"></select>
<input type="submit" name="confirm" value="OK">
</form>
</body>
</html>

response.php:

<?php
header('Content-type: text/xml');
require ("mysql.php");
$query = "SELECT godz FROM wizyty WHERE zajety=0";
$result = mysql_query($query) or die ("Blad przy wykonywaniu zapytania: " .mysql_error());
$num = mysql_num_rows($result);
  if ($num > 0) {
	$zmienna='<?xml version="1.0" encoding="utf-8"?>';
	$zmienna.='<response>';
                while ($row = mysql_fetch_row($result)) {
					  $part =str_split($row[0], 5);
					  $zmienna.='<godz>'.$part[0].'</godz>';
				}
	$zmienna.='</response>';
	echo $zmienna;
}
else
{
echo "Nie ma rekordów w bazie!";
}
?>

Problem w tym, że jeśli otworzę sobie w przeglądarce 2 takie formularze i zatwierdzę godzinę w pierwszym, to w pierwszym wszystko ładnie się przeładuje, a w drugim po kliknięciu na listę znika zatwierdzona w pierwszym form. godzina, ale ostatnia na liście powtarza się dwa razy. Jak to zlikwidować?

0
function ajax(){
function getXMLHttpRequest() {

Funkcja w funkcji? Wygląda to dość niepokojąco jak na funkcję która jest wywoływana cyklicznie.

0

Funkcja w funkcji?
Tak, to niewątpliwa zaleta JavaScript :)
Tutaj jednak służy tylko do tworzenia obiektu XMLHttpRequest.

Pytanie zasadnicze do korysa: co tutaj nie działa ? Na pierwszy rzut oka kod wygląda całkiem poprawnie...
Oprócz tego, że zmienna form1 wygląda nie zdefiniowaną nigdzie i ten kawałek
form1.termin.options[i] powoduje błąd.
Nadaj formie atrubut id, np, <form id="form1">, a potem dobieraj się tak:

var form1 = document.getElementById("form1");
0

Heh no rzeczywiście form1 nie zdefiniowany, ale wszystko działa. Zdefiniowałem tak jak zapodałeś, ale jest ciągle to samo. Chodzi o to, że jak odpalę jeden form w przeglądarce to ładnie wszystko śmiga, ale jak odpalę jeszcze drugi, żeby sprawdzić czy lista się w nim zaktualizuje po zatwierdzeniu terminu w pierwszym, to na liście w drugim wybrana godzina znika, ale ostatni wpis się dubluje (liczba el. ciągle taka sama) chyba, że wybrany zostanie ostatni wpis na liście, wtedy działa ok.
Lepiej zobaczyć to w praktyce. Tu jest ten formularz.

0

Nie rozumiecie mnie :) W onFocus funkcja może być wywołana kilka razy. Nie można deklarować więc getXMLHttpRequest za każdym razem -_-

0

Ok teraz rozbiłem to tak, ale problem występuje.

(...) //to samo
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();

function ajax(){
//var r;
 //r = getXMLHttpRequest();
 	r.open('GET', 'response.php', true);
	r.onreadystatechange = processResponse;
	r.send(null);

function processResponse(){
	var form1 = document.getElementById("form1");
if (r.readyState == 4) {
     if (r.status == 200) {
		 for(i=0; i<r.responseXML.getElementsByTagName('godz').length; i++){
		 form1.termin.options[i] = new Option(r.responseXML.getElementsByTagName('godz')[i].childNodes[0].nodeValue, r.responseXML.getElementsByTagName('godz')[i].childNodes[0].nodeValue);
		 }
}
}
}
}
(...)//to samo
0

No to chyba już wiem o co Ci chodzi :)
Spróbuj czyścić za każdym razem element <select> z terminami:

...
if (r.status == 200) {
    form1.termin.innerHTML = '';
    for(i=0; i<r.responseXML.getElementsByTagName('godz').length; i++){
...

0

A czy nie możesz po prostu kodu HTML dla selectu przesłać przez skrypt PHP zamiast robić plik XML? Wtedy tylko robisz tak:

<span id="spanAjaxSelect"><select>[...]</select></span>

I podpinasz nowy content pod spanAjaxSelect-innerHTML.

0

kubARek genialne w swojej prostocie :-) Demonical Monk sprawdzę też ten sposób. THX

0

Witam,

tak na marginesie zupelnie:
po co XMLHttpRequest skoro jest boskie JQuery
i po co XML skoro jest prawie natywny Json.
linijek byloby kilka a nie kilkadziesiąt;)
pozdrawiam

0

A po co XML jak jest HTML? -_-

header('Content-type: text/xml');
require ("mysql.php");
$query = "SELECT godz FROM wizyty WHERE zajety=0";
$result = mysql_query($query) or die ("Blad przy wykonywaniu zapytania: " .mysql_error());
$num = mysql_num_rows($result);
  if ($num > 0) {
        $zmienna.='<select>';
                while ($row = mysql_fetch_row($result)) {
                                          $part =str_split($row[0], 5);
                                          $zmienna.='<option name="' . $part[0] . '">' . $part[0] . '</option>';
                                }
        $zmienna.='</select>';
        echo $zmienna;
}
else
{
echo "Nie ma rekordów w bazie!";
}
<body onLoad="populate(form1);">
    <form name="form1" method="post">
Termin:<span id="terminy"><select name="termin" onFocus="ajax()"></select></span>
<input type="submit" name="confirm" value="OK">
</form>
</body>
</html>
function processResponse() {
if (r.readyState == 4) {
document.getElementById('terminy').innerHTML = r.responseText;
}}

Krócej? Krócej. Łatwiej? Łatwiej. Zawsze lepiej trochę obciążyć serwer, bo pamiętajmy że każda operacja JS może powodować niższą kompatybilność z wybranymi przeglądarkami.

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