Tai jau ketvirtas serialo įrašas, galbūt kada nors šita seka pavirs melodrama, o kol kas prisiminkim, apie ką jau buvo rašyta. Pirmoje dalyje supažindinama kas yra ir pateikiamas paprastas pavyzdukas GET metodu. Antroje dalyje - POST būdu. Trečioje dalyje prieš atvaizduodami duomenis mes juos dar šiek tiek pakeičiam. Visos tos pamokos labai geros, dabar jūs tikrai mokate pagrindus, bet realiame pasaulyje niekas taip jau neberašo. Dabar yra prikurta daug įvairių bibliotekų, kurios ne tik sprendžia naršyklių suderinamumo problemas, bet taip pat savyje turi daug įvairių efektų. Šį kartą norėčiau supažindinti jus su

Pažinčiai su parašysime labai įdomų skriptą. Turbūt teko matyti, kai nuo vieno pasirinkimo priklauso kitų pasirinkimų reikšmės, angliškai vartojamas toks terminas kaip “chained select”, kaip jį išversti į lietuvių kalbą? Tarpusavyje susiję pasirinkimai? Būtent apie juos mes ir pakalbėsime.
Kaip padaryti, kad neperkrovus puslapio priklausomai nuo vieno pasirinkimo pasikeistų ir kiti? Šiai problemai spręsti žinau du būdus:

  1. Pasirinkus kažką, reikia grąžinti visą antrąjį pasirinkimą;
  2. Antram pasirinkimui grąžinamas , kurį apdoroja ir atvaizduoja.

Gal kas nors gali pasiūlyti geresnį variantą?
O mes tuo tarpu aptarsime mano anksčiau minėtus variantus.

Nesugalvoju geresnio būdo duomenims saugoti kaip mysql lentelės, lentelėje mus reikės, savaime suprantama, unikalaus id, kokio nors pavadinimo ir tėvinio elemento id, jeigu jis lygus nuliui, vadinasi tai yra pati viršūnėlė (arba šaknelė, priklausomai nuo požiūrio). SQL kodas atrodo taip:

CREATE TABLE `chained` (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `parent_id` int(10) UNSIGNED DEFAULT '0',
  `title` varchar(50) DEFAULT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

Taigi turim lentelę, prisirašom į ją atsitiktinių duomenų ir galime dirbti toliau. Pirmiausia reikia užpildyti pagrindinį pasirinkimo meniu iš duomenų bazės, čia ne SQL pamoka, todėl kodo straipsnyje nerodysiu.

Kai išvardiname pagrindinius elementus, turime maždaug tokį vaizdelį:
npsel1.png

Čia ir prasideda mūsų įdomioji pasakojimo dalis. Pasitelkę į pagalbą onChange, kviesime funkciją, kuri atliks visus veiksmus. HTML kode visa tai atrodo maždaug taip:

<script type="text/javascript">
function getSubSelect(x)
{
//gudrus kodas
}
</script>
<select name="products" onChange="getSubSelect(this.value)" >
   <option value ="0"> </option>
   <option value ="1">pieno produktai</option>
   <option value ="2">mesos produktai</option>
   <option value ="3">kepiniai</option>
</select>
<div id='subselect'></div>

Nesiruošiu veltis į filosofines diskusijas, tokias kaip reikia ar ne atvaizduoti antrąjį pasirinkimą “tik dėl vaizdo”, bet jūs galite išsakyti savo nuomonę šiuo klausimu. Kaip matote iš kodo savo sukurtai funkcijai getSubSelect, mes puikiai galime perduoti per parametrus pasirinkimo reikšmę, bet šiuo atveju norėdami geriau susipažinti su , šio būdo nenaudosime.

Pirmas būdas

Pirmąjį būdą aš vadinu labai paprastu, kodėl? Pažiūrėkite į kodą ir suprasite patys:

function getSubSelect()
{
 var parent_id=$F('products');
 var url ='subselect1.php';
 var pars ='pid='+parent_id;
 
 var myAjax = new Ajax.Request(
	url, 
	{
		method: 'post', 
		parameters: pars, 
		onComplete: showResponse
	});
}
 
function showResponse(originalRequest)
{
  		$('subselect').update(originalRequest.responseText);	
}

Taigi matote dvi funkcijas. Pirmiausiai paanalizuokime getSubSelect.
$F(’products’) - paima pasirinkimo reikšmę. $F yra Form.Element.getValue santrumpa. Vietoj products jūs galite įsirašyti bet kurį kintamąjį ir gausite jo reikšmę. Sekančiose eilutėse priskiriami du kintamieji, failas į kurį kreipiamasi ir parametrai, kuriuos norime perduoti. Jeigu nenorite, galite neperduoti nieko. new .Request sukuria naują objektą, palyginkite šitą eilutę su antruoju scenarijumi, ten reikėjo pasirašyti visą funkciją tokiam veiksmui. Atkreipkite dėmesį, jog duomenys, bus perduodami POST metodu, nors jeigu jums arčiau širdies GET, galite toje vietoje įrašyti GET. Ir paskutinis įrašas skirtas funkcijai, kuri kviečiama kaip skriptas grąžina duomenis.
showResponse tik viena eilutė, viskas ką jinai daro tai atvaizduoja duomenis. $ yra pati pagrindinė funkcija, ji daro viską. O jeigu kiek rimčiau tai šiuo atveju atlieka document.getElementById veiksmus, t.y. paima elementą ir suteikia galimybę naudotis visomis jo savybėmis.

Štai ir viskas, programa veikia, nepamirškite visiems elementams nurodyti jų id, kitaip skriptas neveiks ir nesuprasite kur bėda.

Antra dalis

Čia bus šiek tiek sudėtingiau. Kadangi mes gausime , jį apdorosime ir mums reikės dinamiškai pridėti reikšmes antrajam pasirinkimų meniu.
Dėl įdomumo failas atrodo taip:

<?xml version="1.0" ?>
<myselect>
   <option value ="4">suris</option>
   <option value ="5">varske</option>
   <option value ="6">jogurtas</option>
</myselect>
</xml>

Čia reikia pridėti pastabą, kad nėra nieko gudraus padaręs atveju, todėl teks padirbėti senuoju būdu.

function getSubSelect()
{
 var parent_id=$F('products');
 var url ='subselect2.php';
 var pars ='pid='+parent_id;
 
 var myAjax = new Ajax.Request(
	url, 
	{
		method: 'get', 
		parameters: pars, 
		onComplete: showResponse
	});
}
 
function showResponse(originalRequest)
{
     var xmldoc = originalRequest.responseXML;
     var root = xmldoc.getElementsByTagName('myselect').item(0);
     var count=0;
     $('subselect').options.length=count;
     for (var iNode = 0; iNode < root.childNodes.length; iNode++) {
          var node = root.childNodes.item(iNode);
          for (i = 0; i < node.childNodes.length; i++) {
	           var parent_id=node.getAttribute("value");
	           var mytitle= node.childNodes.item(i).data;
	           $('subselect').options[count] = new Option(mytitle,parent_id);
	           count+=1;
	           $('subselect').options.length=count;
 
	            }
           }
}

Ir ką gi mes čia turime? getSubSelect - funkcija atrodo lygiai taip pat, kaip ir pirmu atveju, tik čia dėl įdomumo nusprendžiau naudoti GET metodą. Tuo tarpu apie showResponse reikia pakalbėti daugiau. Visų pirma mes priimam ne tekstą, o . Norėdami būti tikri, kad pasirinkimo meniu yra tuščias, priskiriam jam nulį. Cikluose išsikratom failo turinį. Atkreipkite dėmesį kaip paimama elemento reikšmė, o kaip atributas. Na, o vėliau new Option(tekstas ,reiksme); komanda dinamiškai pridedame pasirinkimo meniu dar vieną reikšmę. Neužmirškite padidinti pasirinkimo meniu ilgio, nes matysite tik paskutinį elementą ir nesuprasit kodėl.

Štai ir viskas, susipažinote su , pagilinote savo žinias apdorojant su .

Tiesa, aš vos nepamiršau pasakyti iš kur parsisiųsti - oficialus puslapis.
Taip pat verta apsilankyti čia.

Visas straipsnio kodas.

Panašūs straipsniai


“Mano ketvirtas Ajax scenarijus - tarpusavyje susiję pasirinkimai” komentarų: 7

  1. Eimantas

    Ajax.Updater, NePo .) ir nors prototype.js nėra nieko padaręs dėl XML, jis yra daug padaręs DOM manipuliavimo aspektu.


  2. Drisiu su Eimantų nesutikti.

    Ajax.Updater yra, savaime aišku, gerai. Bet NePo straipsnis aprepia dar vieną svarbų aspektą - darba su XML per AJAX/JavaScript bei DOM Kurima su Prototype.

    Be to, čia galima ižvelgti labai gilią minti apie tai, kaip galima su viena AJAX užklausa gauti duomenis su XML (ne tik tos options, bet kokia sudėtingasnė lentelė), o po to su jais žaisti JavaScript pagalbą - jos rušioti, formuoti įvairias lenteles nedarant papildomų užklausų į serverį, išviesti po vieną, padaryti redagavimą, supuslapioti, ką tik širdis geidžia ar protas sumasto padaryti vartotojo puseje.

    Nepamirškite, kad kiekviena papildoma AJAX užklausą į serveri reikalaują resursų, laiko ir gali pristabdyti, ypač jai jų daroma labai daug.

  3. Žilvinas

    Kažkaip labai sudėtingai viskas parašyta.

  4. neworld

    Dar galiu parekomenduoti saituką: http://scripteka.com/ kuriame rasite prototype modulių, pluginu ir panašiai.

    http://script.aculo.us/ rasite, mano manymu, geriausią biblioteka WEB 2.0 efektams.

    Galbūt jum pravers :)

  5. nerims

    Na, šitaip sudėtingai rašyti chained select - tas pat kai lipti į namą pro kaminą. Ir koks tikslas kelias reikšmes saugoti SQL? :-)) Neužtektų tekstinio failiuko - kad ir XML?


  6. Nerims: Papildomas duomenų kešavimas (puodėliavimas, man rodos taip teisingai turėtu skambėti) niekam netrukdo, bet jis gali apsunkinti programinės įrangos kurimą pradineję stadijoje. Be to tai yra pavyzdys. O jai tu kalbi apie mano “kokia sudėtingasnė lentelė” aš turiu omeni kelių skirtingų objektų atnaujinimą per viena AJAX užklausą.

  7. Mano penktas Ajax scenarijus - rėksnių dėžė. » Pixel.lt

    […] turėjote progą susipažinti su prototype.js biblioteka, šiandien norėčiau jums pristatyti jQuery. Pirmą kartą pažvelgęs į jQuery […]

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.