Divi select (dropdown) bez lapas pārlādes

[senters]

Labvakar, man ir preces pievienošanas forma katalogam. Lai pievienotu preci 1) izvēlās kategoriju 2) izvēlās apakškategoriju ieraksta citas lietas (nosaukums, cena, aprakts utt) un spiež submit. Dati tie insertoti db. Tātad man vajag lai izvēloties pirmajā dropdownā kādu kategoriju tiktu otrajā dropdownā piedāvātas visas tai piederošās apakškategorijas - nepārlādējot lapu. Kā šādu lietu panākt. Esmu izmēģinājies ar js dažādiem skriptiem onchange, bet rezultāta pagaidām nav.

 

Ir divas tabulas iekš db:

KATEGORIJAS

id,

nosaukums

seciba

 

APAKSKATEGORIJAS

id

nosaukums

seciba

kategorija_id

[2easy]

uzraksti apaksh_kategorijas.php, kuram padod kategorijas id un tas echo atbilstošo dropdown ar apakškategorijām <select><option>...</option>...</select>

 

savukārt kategoriju dropdownam onchange brīdī izpildi js http get pieprasījumu (piemēram, ar jquery) uz to apaksh_kategorijas.php un saņemto html ievieto tajā div, kur atrodas apakškategoriju dropdowns: document.getElementById("subcategory-container").innerHTML = sSanemtaisDropdownHtml;

 

neapvainojies, bet visu kodu priekšā gan nerakstīšu ;)

[codez]

$('#categories').change(function(){
 $.get('/sub-cats.php',{catid:$(this).val()},function(h){$('#sub-cats-cont').html(h);},'html');
});

 

es gan drīzāk šādā gadījumā datus sūtītu json formā.

 

$('#categories').change(function(){
 $.get('/sub-cats.php',{catid:$(this).val()},function(h){
   var s='';
   s+='<select>';
   for(var i in h){s+='<option value="'+h[i].id+'">'+h[i].title+'</option>';
   }
   s+='</select>';
   $('#sub-cats-cont').html(s);
 },'json');
});

[2easy]

"sub-kaķi" :D:D:D

 

es gan uzreiz padodu html, jo man visa html automatizācija ir php pusē :P

un vsp main logic labāk lai centralizējas uz php. visādiem ajax un citai js apstrādei labāk uzticu max vnkāršus darbus, lai tikai uzseto to ko vajag un viss. tas vnk tāds funktieris no web applikācijas arhitektūras viedokļa ;)

[codez]

man gan šķiet, ja tu nolasi no Mysql datus, tad ar json_encode un echo, tas prasa daudz mazākus servera resursus (CPU,RAM), ātrāku responsi, mazāku trafiku.

[2easy]

paļubomu tas ir ātri. tāpēc šajā gadījumā prioritāte ir paša ērtība

[codez]

sub-cats.php

$catid=(int)$_GET['catid'];
if ($rez=DB::i()->q('SELECT id,title FROM catid=%s',$catid)){  //DB::i()->q datubāzes singletons, kurš atgriež 2d masīvu no kverija
 echo json_encode($rez);
}

 

js daļa

$('#categories').change(function(){
 $.get('/sub-cats.php',{catid:$(this).val()},function(h){    
   $('#sub-cats-cont').html(HTML.select(h,{value:'id',text:'title'}));  //HTML. funkciju kopa, kas ģenerē html;
 },'json');
});

 

Manuprāt, vienkāršāk un ērtāk vairs nav kur.

[2easy]

...  //HTML. funkciju kopa, kas ģenerē html;

hehe, saprātīgi izveidojot/pielietojot funkcijas, visu var izdarīt pāris rindiņās ;)

 

Manuprāt, vienkāršāk un ērtāk vairs nav kur.

true ^^

Edited March 2, 2010 by 2easy

[senters]

Diemžēl neizprotu šo kodu.

 

Jaunas preces pievienošanas formas fragments:

<tr>
 <td>Kategorija:</td>
 <td><select name="kategorija"><?php echo $kategorijaslv; ?></select></td>
</tr>
<tr>
 <td>Apakškategorija:</td>
 <td><selectname="apakskategorija"><?php echo $apakskategorijaslv; ?></select></td>
</tr>

 

Šobrīd abos dropdownos rādās visas kategorijas un visas apakškategorijas. Nemāku dabūt lai otrais dropdowns mainītos atkarībā no pirmā - izvēlētās kategorijas.

 

Te tiek iegūtas vērtības:

 

// Kategorijas LV
$sql="select * from kategorijas order by seciba asc";
$qry=mysql_query($sql);
while($row = mysql_fetch_assoc($qry))
{ 
$kategorijaslv.="<option value='".$row['id']."'>".$row['nosaukums_lv']."</option>";
}


// Apakškategorijas LV
$sql="select * from apakskategorijas order by seciba asc";
$qry=mysql_query($sql);
while($row = mysql_fetch_assoc($qry))
{ 
$apakskategorijaslv.="<option value='".$row['id']."'>".$row['nosaukums_lv']."</option>";
}

Edited March 3, 2010 by senters

[codez]

Tu to vari darīt 2 veidos:

1)Iepriekš aprakstītais, kad uz pirmā select-a onchange eventa tiek ar ajax pieprasīti dati no servera un ievietoti otrā select-ā.

Tajos piemēros ir izmantot jquery javascript bibliotēka.

 

2)Ielasīt visas apakškategorijas vienā js masīvā un tad oncgange eventā mainīt otro seletc-u. Šo variantu var izmantot, ja apakškategoriju kopējais skaits ir samērīgs, piemēram, ne vairāk kā daži simti.

 

Otro variantu var realizēt šādi, jāpievieno tik jquery js bibliotēka.

$cats - kategoriju masīvs no db;

$sub_cats - subkategoriju masīvs no db;

 

<?php
$cats=array(
 array("id"=>1,"title"=>"kategorija 1"),
 array("id"=>2,"title"=>"kategorija 2"),
 array("id"=>3,"title"=>"kategorija 3")    
);

$sub_cats=array(
 array("id"=>1,"catid"=>1,"title"=>"Apakškategorija 1.1"),
 array("id"=>2,"catid"=>1,"title"=>"Apakškategorija 1.2"),
 array("id"=>3,"catid"=>2,"title"=>"Apakškategorija 2.1"),
 array("id"=>4,"catid"=>2,"title"=>"Apakškategorija 2.2"),
 array("id"=>5,"catid"=>2,"title"=>"Apakškategorija 2.3"),
 array("id"=>6,"catid"=>3,"title"=>"Apakškategorija 3.1")
);
?>

<select id="cats">
<?php foreach($cats as $cat){ ?> 
 <option value="<?php echo $cat['id']; ?>"><?php echo $cat['title']; ?></option>
<?php } ?>
</select>
<br />
<select id="sub_cats">
</select>

<script>
sub_cats=<?php echo json_encode($sub_cats); ?>;
$(function(){
 set_sub_cats();
 $('#cats').change(function(){
   set_sub_cats();
 });
});

function set_sub_cats(){
 var catid=$('#cats').val();
 var s='';
 for(var i in sub_cats){
   if (catid==sub_cats[i].catid){
     s+='<option value="'+sub_cats[i].id+'">'+sub_cats[i].title+'</option>';
   }
 }
 $('#sub_cats').html(s);
}
</script>

 

Ja kaut kas nav skaidrs, tad raksti tieši kas nav skaidrs.

[2easy]

zna4it jāmācās javascript un/vai jquery. keywords ir "ajax"

 

codez, tu jau visu pareizi raksti, tikai lai to saprastu, ir vajadzīgas zināšanas ;)

Edited March 3, 2010 by 2easy

[senters]

codez, sametu visu tavu postoto skriptu iekš viena test.php faila un pieslēdzu jquery bibl. -

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" />

joprojām otrais dropdowns neielasa vērtības atkarībā no pirmā.

Edited March 3, 2010 by senters

[codez]

Tev firebug plugins ir uzlikt firefox-am?

Ja ir, tad skaties kādas kur ir kļūdas.

Debugo - izvadi datus dažādās to fāzēs un skaties kur nenotiek tā, kā tu vēlies.

 

ieliec pilnu sava test.php kodu iekš http://paste.php.lv/ un ieposto linku.

[senters]

Ir ir, to es tūlīt paskatīšos.

 

Kods te - php.lv paste

[2easy]

vsp pietiek jau, ka inklūdo vienu jquery ;)

 

kkā nekur nemanīju $.get() pielietojumu

http://api.jquery.com/jQuery.get/