Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> AJAX: dwa zalezne do siebie selecty - zauwazylem problem
luckyluc
post
Post #1





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 11.04.2006

Ostrzeżenie: (0%)
-----

Cytat(TomASS @ 2.03.2006, 08:21:24 ) *
Witam ponownie wszystkich forumowiczów (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif)

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 <span style="font-style: italic;">"sprzężone"</span> ze sobą w ten sposób, że wybór odpowiedniej pozycji na <span style="font-weight: bold;">selekcie1</span> wpływa na zawartość <span style="font-weight: bold;">selecta2</span> - np. mamy wybrać ze spisu jedną wieś w Polsce. Przeszukując selectem cały spis wszystkich miejscowości moglibyśmy się zaszukać na śmierć (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) . 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 
  1. #
  2. # Struktura tabeli dla  `powiaty`
  3. #
  4.  
  5. CREATE TABLE `powiaty` (
  6.   `ID` int(10) NOT NULL AUTO_INCREMENT,
  7.   `ID_wojewodztwo` int(10) DEFAULT NULL,
  8.   `Powiat` varchar(20) DEFAULT NULL,
  9.   UNIQUE KEY `ID` (`ID`)
  10. ) TYPE=MyISAM AUTO_INCREMENT=15 ;
  11.  
  12. #
  13. # Zrzut danych tabeli `powiaty`
  14. #
  15.  
  16. INSERT 
  17. INTO `powiaty` VALUES (1, 1, 'Wroclawski');
  18. INSERT 
  19. INTO `powiaty` VALUES (2, 1, 'Sroda Slaska');
  20. INSERT 
  21. INTO `powiaty` VALUES (3, 1, 'Miekinia');
  22. INSERT 
  23. INTO `powiaty` VALUES (4, 1, 'Legnica');
  24. INSERT 
  25. INTO `powiaty` VALUES (5, 1, 'Lubin');
  26. INSERT 
  27. INTO `powiaty` VALUES (6, 2, 'Opole');
  28. INSERT 
  29. INTO `powiaty` VALUES (7, 2, 'Brzezie');
  30. INSERT 
  31. INTO `powiaty` VALUES (8, 2, 'Grodkow');
  32. INSERT 
  33. INTO `powiaty` VALUES (9, 2, 'Brzeg');
  34. INSERT 
  35. INTO `powiaty` VALUES (10, 2, 'Nysa');
  36. INSERT 
  37. INTO `powiaty` VALUES (11, 3, 'Szczecin');
  38. INSERT 
  39. INTO `powiaty` VALUES (12, 3, 'Szczecinek');
  40. INSERT 
  41. INTO `powiaty` VALUES (13, 3, 'Gryfow');
  42. INSERT 
  43. INTO `powiaty` VALUES (14, 3, 'Miedzyzdroje');
[SQL] pobierz, plaintext

Jak zwykle mamy 4 pliki. Pierwszy z nich to dobrze wszystkim znay plik <span style="font-weight: bold;">advajax.js</span>. Kolejnym plikiem jest <span style="font-weight: bold;">dzialaj.html</span> (plik który uruchamia użytkownik), plik <span style="font-weight: bold;">odpowiedz.php </span>- generujący odpowiedź z serwera w postaci XML oraz plik z funkcjami JS - <span style="font-weight: bold;">function.js</span>.

Plik uruchamiany przez użytkownika nie jest wielce skomplikowany:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. </head>
  5. <body>
  6.  
  7. <select name="wojewodztwa" id="wojewodztwa" onchange="getRecords();">
  8. <option></option>
  9. <option value="1">Dolnośląskie</option>
  10. <option value="2">Opolskie</option>
  11. <option value="3">Zachodnio Pomorskie</option>
  12. </select>
  13.  
  14. <select name="gminy" id="gminy" style="width: 200px;">
  15. </select>
  16.  
  17. <script type="text/javascript" src="advajax.js"></script>
  18. <script type="text/javascript" src="function.js"></script>
  19. </body>
  20. </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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) :
[PHP] pobierz, plaintext 
  1. <?
  2. header("Content-type: text/xml; charset=UTF-8"); 
  3. echo '<?xml version="1.0" encoding="UTF-8"?>';
  4.  
  5. $dbhost = localhost;
  6. $dblogin = root;
  7. $dbhaslo = '';
  8. $db = uop;
  9. mysql_connect (localhost,root,'') or die ("Nie masz uprawnien");
  10. mysql_select_db (uop);
  11. $wojewodztwo = (int)$_GET['wojewodztwo'];
  12. if(!$wojewodztwo) $wojewodztwo = 1;
  13.  
  14. echo '<records>';
  15.   $query = "SELECT ID, Powiat FROM powiaty WHERE ID_wojewodztwo='$wojewodztwo'";
  16.   $result = mysql_query($query);
  17.   echo mysql_error();
  18.   while ($row = mysql_fetch_array($result)){
  19. 	  echo '<record>';
  20. 	  echo '<ID>'.$row['ID'].'</ID>';
  21. 	  echo '<nazwa>'.$row['Powiat'].'</nazwa></record>';
  22.   }
  23.  
  24. echo '</records>';
  25. ?>
[PHP] pobierz, plaintext

Bardzo ważny jest nagłówek - aby był to plik XML:
[PHP] pobierz, plaintext 
  1. header("Content-type: text/xml; charset=UTF-8"); 
  2. 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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Bardzo istotnym plikiem jest plik function.js:
[HTML] pobierz, plaintext 
  1. function $(id){
  2.  return document.getElementById(id);
  3. }
  4. function parseRecords(xml) {
  5.  
  6.     var opttypes = document.getElementById("gminy");
  7.     record = xml.getElementsByTagName("record");
  8. 	ID = new Array();
  9. 	nazwa = new Array();
  10.     for (i = 0; i < record.length; i++) {        
  11.     	nazwa[i] = record[i].childNodes[1].childNodes[0].nodeValue;
  12.     	ID[i] = record[i].childNodes[0].childNodes[0].nodeValue;
  13.  
  14.     }    
  15.  
  16. for (i = opttypes.options.length-1; i >= 0; i--) {
  17. opttypes.remove(i);
  18. }
  19.  
  20.     for(var i = 0; i < nazwa.length; i++) {
  21.        opttypes.options[i] = new Option(nazwa[i],ID[i]);
  22.    }
  23. }
  24. function getRecords() {
  25.  	var wojewodztwo = $("wojewodztwa").value;
  26.  
  27.         advAJAX.get({
  28.             url : "odpowiedz.php?wojewodztwo="+wojewodztwo,
  29.             onInitialization : function(obj) {
  30.             	$("gminy").disabled="true";
  31.             },
  32.             onSuccess : function(obj) {
  33.                 parseRecords(obj.responseXML);
  34.                 $("gminy").disabled="";
  35.             }
  36.         });
  37. }
[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 
  1. record[i].childNodes[0].childNodes[0].nodeValue;
  2. 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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
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 (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)




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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
luckyluc
post
Post #2





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 11.04.2006

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Prosze o podpowiedz.

Ten post edytował luckyluc 22.01.2007, 23:15:22
Go to the top of the page
+Quote Post

Posty w temacie
- luckyluc   AJAX: dwa zalezne do siebie selecty - zauwazylem problem   16.01.2007, 01:06:20
- - kukix   oczywiście, ze mozna: [HTML] pobierz, plaintext ...   21.01.2007, 11:35:53
- - luckyluc   Jest to rozwiazanie, ale polowiczne poniewaz po pr...   22.01.2007, 23:14:41
- - astropanic   Też z tym długo walczyłem, Ja mam zrobione to tak ...   17.02.2007, 23:41:25
- - luckyluc   Cytat(astropanic @ 17.02.2007, 23:41...   21.03.2007, 22:30:17

« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 9.10.2025 - 23:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn