Forum PHP.pl > AJAX: dwa zalezne do siebie selecty

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: AJAX: dwa zalezne do siebie selecty - zauwazylem problem

Forum PHP.pl > Forum > XML, AJAX

luckyluc

16.01.2007, 01:06:20

Cytat(TomASS @ 2.03.2006, 08:21:24 )

Witam ponownie wszystkich forumowiczów

Postanowiłem opisać jeszcze jeden przykład na wykorzystanie AJAXa oraz na rozwiązanie popularnego problemu od czasu do czasu poruszanego na tym forum.

Chodzi tutaj o dwa selecty "sprzężone" ze sobą w ten sposób, że wybór odpowiedniej pozycji na selekcie1 wpływa na zawartość selecta2 - np. mamy wybrać ze spisu jedną wieś w Polsce. Przeszukując selectem cały spis wszystkich miejscowości moglibyśmy się zaszukać na śmierć

. Wygodniej byłoby wybierać po kolei: Województwo -> Powiat -> Gmina -> Miejscowość.

Przedstawie tuta tylko pierwszy etap (Województwo -> Powiat) - dorobienie reszty jest już dziecinnie proste.

Noto zaczynamy.
Na początek podam definicję bazy danych abyście nie musieli się trudzić - oczywiście ktoś może ją wypełnić swoimi danymi:

[SQL] pobierz, plaintext 
#
# Struktura tabeli dla  `powiaty`
#
 
CREATE TABLE `powiaty` (
  `ID` int(10) NOT NULL AUTO_INCREMENT,
  `ID_wojewodztwo` int(10) DEFAULT NULL,
  `Powiat` varchar(20) DEFAULT NULL,
  UNIQUE KEY `ID` (`ID`)
) TYPE=MyISAM AUTO_INCREMENT=15 ;
 
#
# Zrzut danych tabeli `powiaty`
#
 
INSERT 
INTO `powiaty` VALUES (1, 1, 'Wroclawski');
INSERT 
INTO `powiaty` VALUES (2, 1, 'Sroda Slaska');
INSERT 
INTO `powiaty` VALUES (3, 1, 'Miekinia');
INSERT 
INTO `powiaty` VALUES (4, 1, 'Legnica');
INSERT 
INTO `powiaty` VALUES (5, 1, 'Lubin');
INSERT 
INTO `powiaty` VALUES (6, 2, 'Opole');
INSERT 
INTO `powiaty` VALUES (7, 2, 'Brzezie');
INSERT 
INTO `powiaty` VALUES (8, 2, 'Grodkow');
INSERT 
INTO `powiaty` VALUES (9, 2, 'Brzeg');
INSERT 
INTO `powiaty` VALUES (10, 2, 'Nysa');
INSERT 
INTO `powiaty` VALUES (11, 3, 'Szczecin');
INSERT 
INTO `powiaty` VALUES (12, 3, 'Szczecinek');
INSERT 
INTO `powiaty` VALUES (13, 3, 'Gryfow');
INSERT 
INTO `powiaty` VALUES (14, 3, 'Miedzyzdroje');
[SQL] pobierz, plaintext

Jak zwykle mamy 4 pliki. Pierwszy z nich to dobrze wszystkim znay plik advajax.js. Kolejnym plikiem jest dzialaj.html (plik który uruchamia użytkownik), plik odpowiedz.php - generujący odpowiedź z serwera w postaci XML oraz plik z funkcjami JS - function.js.

Plik uruchamiany przez użytkownika nie jest wielce skomplikowany:

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 
<select name="wojewodztwa" id="wojewodztwa" onchange="getRecords();">
<option></option>
<option value="1">Dolnośląskie</option>
<option value="2">Opolskie</option>
<option value="3">Zachodnio Pomorskie</option>
</select>
 
<select name="gminy" id="gminy" style="width: 200px;">
</select>
 
<script type="text/javascript" src="advajax.js"></script>
<script type="text/javascript" src="function.js"></script>
</body>
</html>
[HTML] pobierz, plaintext

Składa się on z dwóch selectów (wojewodztwa - z wypełnioną listą) oraz gminy (będzie dopiero wypełniany)

Plik odpowiedz.php jest bardzo ładny

[PHP] pobierz, plaintext 
<?
header("Content-type: text/xml; charset=UTF-8"); 
echo '<?xml version="1.0" encoding="UTF-8"?>';
 
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
mysql_connect (localhost,root,'') or die ("Nie masz uprawnien");
mysql_select_db (uop);
$wojewodztwo = (int)$_GET['wojewodztwo'];
if(!$wojewodztwo) $wojewodztwo = 1;
 
echo '<records>';
  $query = "SELECT ID, Powiat FROM powiaty WHERE ID_wojewodztwo='$wojewodztwo'";
  $result = mysql_query($query);
  echo mysql_error();
  while ($row = mysql_fetch_array($result)){
	  echo '<record>';
	  echo '<ID>'.$row['ID'].'</ID>';
	  echo '<nazwa>'.$row['Powiat'].'</nazwa></record>';
  }
 
echo '</records>';
?>
[PHP] pobierz, plaintext

Bardzo ważny jest nagłówek - aby był to plik XML:

[PHP] pobierz, plaintext 
header("Content-type: text/xml; charset=UTF-8"); 
echo '<?xml version="1.0" encoding="UTF-8"?>';
[PHP] pobierz, plaintext

Potem zwykłe zapytanie do bazy danych wybierające odpowiednie rekordy - nic szczególnego.
Po zapytaniu następuje generacja XML - także nic co mogło by być bardzo szczególnym zajęciem. Nie zagłębiam się tutaj w puste znaczniki (aby zamiast <nazwa></nazwa> pisać </nazwa>) nie zajmuję się także polskimi znaczkami aby nie komplikować kodu - i muszę coś pozostawić jeszcze Wam

Bardzo istotnym plikiem jest plik function.js:

[HTML] pobierz, plaintext 
function $(id){
 return document.getElementById(id);
}
function parseRecords(xml) {
 
    var opttypes = document.getElementById("gminy");
    record = xml.getElementsByTagName("record");
	ID = new Array();
	nazwa = new Array();
    for (i = 0; i < record.length; i++) {        
    	nazwa[i] = record[i].childNodes[1].childNodes[0].nodeValue;
    	ID[i] = record[i].childNodes[0].childNodes[0].nodeValue;
 
    }    
 
for (i = opttypes.options.length-1; i >= 0; i--) {
opttypes.remove(i);
}
 
    for(var i = 0; i < nazwa.length; i++) {
       opttypes.options[i] = new Option(nazwa[i],ID[i]);
   }
}
function getRecords() {
 	var wojewodztwo = $("wojewodztwa").value;
 
        advAJAX.get({
            url : "odpowiedz.php?wojewodztwo="+wojewodztwo,
            onInitialization : function(obj) {
            	$("gminy").disabled="true";
            },
            onSuccess : function(obj) {
                parseRecords(obj.responseXML);
                $("gminy").disabled="";
            }
        });
}
[HTML] pobierz, plaintext

Trzy skromne funkcje, a właściwie tylko dwie: jedna parsująca wynik XML na kod HTML. Dzieje sie to za pomocą new Option(Nazwa,Value), a wartości są zczytywane z odpowiedzi XML za pomocą:

[HTML] pobierz, plaintext 
record[i].childNodes[0].childNodes[0].nodeValue;
record[i].childNodes[1].childNodes[0].nodeValue;
[HTML] pobierz, plaintext

Jest jeszcze funkcja "uruchamiająca" AJAXa. Najpierw prosi go o to aby wyczytał odpowiedni URL z odpowiednia opcia (?wojewodztwo) a nastepnie podczas inicjalizacji blokuje selecta gminy. Po zakonczeniu wczytywania (onSuccess) XML jest parsowany a select gminy odblokowywany.

To tyle - it`s simply

Nie powinno nastarczyć to kłopotu ludziom z podstawową znajomością JS, php, MySQL.

P.S Proszę nie zwracać na błedy w postaci że dany powiat nie jest powiatem albo nie leży w odpowiednim województwie

Skrypt jest dobry, ale ma pare mankamentow. Mianowicie przy przeladowaniu strony w celu weryfikacji formularza select wojewodztwo pozostaje na wybranym obiekcie, natomiast select gmina jest pusty. PRZYKLAD:

Dolnoslaskie
Lubuskie
Malopolskie
Wielkopolskie

Wybieram Lubuskie. Laduja mi sie gminy:

Nowa Sol
Zielona Gora
Zagan
Zary

Wybieram Zielona Gora. Klikam na wyslij. Przeladowuje mi sie strona. Ze wzgledu na blad musze uzupelnić niewypelnione pole. I teraz jest problem ze skryptem. Select wojewodztwa jest ustawione za pomoca selected na wybranym poprzednio lubuskim. Natomiast w select gminy nic nie ma i jest pusto. Klikam na wojewodztwa i na lubuskie i niestety nic to nie daje. Musze dopiero wybrac inne wojewodztwo, nastepnie kliknac ponownie na lubuskie i wtedy dopiero wyswietli sie lista gmin z lubuskiego. Strasznie to nieporeczne. Czy mozna to jakos poprawic. Chodzi mi o to, zeby zapamietywal po przeladowaniu liste gmin i za pomoca selected ustawial na wybranej wczesniej gmine.

Mysle, ze to poprawi funkcjonalnosc skryptu. Z gory dziekuje za odpowiedz.

kukix

21.01.2007, 11:35:53

oczywiście, ze mozna:

[HTML] pobierz, plaintext 
<BODY onLoad="getRecords();">
[HTML] pobierz, plaintext

luckyluc

22.01.2007, 23:14:41

Jest to rozwiazanie, ale polowiczne poniewaz po przeladowaniu wyswietla dane w gminach, ale nie ustawia select na pozycji, ktora zostala wybrana przed przeladowaniem. Gdyby to sie udalo rozwiazac skrypt bylby idealny

Prosze o podpowiedz.

astropanic

17.02.2007, 23:41:25

Też z tym długo walczyłem,
Ja mam zrobione to tak że mam tradycyjnie dwa pola select w szablonie (działam na opt, ale bez szablonów będzie podobnie, chodzi o samą ideę).
Jeżeli muszę ponownie zwrócić szablon na wskutek niepoprawnie wypełnionych pól, wyświetlam te tradycyjne selecty z ustawionymi polami option pobranymi z metody POST/GET(w zależności od metody formularza), lecz do obydwóch dołączam kod JS powodujący że przy zmianie stanu selecta AJAX dogrywa dalszą część. Proste i skuteczne roziwązanie. Nadmienię że do pola do wyboru miast na starcie nie wyświetlam wcale, dogrywam go dopiero w momencie wyboru województwa.

Zastanawiam się nad wykorzystaniem AJAX + zwykle pole typu text do wpisywania samego miasta, coś w stylu google suggest, a jeśli ktoś wpisze miasto którego nie ma, żeby lądowało w bazie jako sugerowane do moderatora. Być może to też będzie sensowne rozwiązanie eliminujące ogromną listę miast.

Pozdrawiam

luckyluc

21.03.2007, 22:30:17

Cytat(astropanic @ 17.02.2007, 23:41:25 )

Do tej pory nie moge sobie z tym poradzic, chociaz probowalem wielokrotnie. Czy mozesz pokazac swoje rozwiazanie na jakims przykladzie, bo nie rozumiem jak sobie z tym problem poradziles. Bede wdzieczny.

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.