Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] lista zależna od selecta
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
wicc
Mam pole SELECT w którym są kategorie. Chcę zrobić tak, żeby po wybraniu którejś (bez klikania - onChange) w div'ie poniżej wyświetlała się lista produktów. Zrobiłem coś takiego (pracuję na SMARTY i korzystam z jQuery oraz script.aculo.us)

katalog.tpl
  1. <select name="cat" onChange="show_products(this)">
  2. <option value="0">wybierz</option>
  3. {section name=i loop=$cats_list}
  4. <option value="{$cats_list[i].cat_id}">
  5. {$cats_list[i].cat_name}
  6. </option>
  7. {/section}
  8.  
  9. {section name=i loop=$products_list}
  10. <div id="{$products_list[i].product_id}">{$products_list[i].product_name}</div>
  11. {/section}

funkcja wysyłająca ID wybranej kategorii
  1. function show_products(sel)
  2. {
  3. var cat = sel.options[sel.selectedIndex].value;
  4.  
  5. new Ajax.Request("action.php", {
  6. method: "post",
  7. parameters: { id : cat }
  8. });
  9. }

action.php
  1. <?php
  2. if($_POST['id']!='')
  3. {  
  4. $q = mysql_query("SELECT * FROM products WHERE product_cat = '$cat'");
  5. $products_list = array();
  6. while ($tab = mysql_fetch_assoc($q))
  7.  {
  8. $products_list[] = $tab;
  9.  }
  10.  $smarty->assign('products_list', $products_list);
  11. }
  12. ?>


nie wiem dlaczego tablica $products_list nie jest przekazywana do szablonu :/ funkcja na pewno wchodzi do pętli if($_POST['id']!='') w pliku action.php bo to sprawdzałem.
Cezar708
uu.. no tak kolego nie da rady...

spróbuj tak:
katalog.tpl
  1. <select name="cat" onChange="show_products(this)">
  2. <option value="0">wybierz</option>
  3. {section name=i loop=$cats_list}
  4. <option value="{$cats_list[i].cat_id}">
  5. {$cats_list[i].cat_name}
  6. {/section}
  7.  
  8. <div id="plist"></div>


javascript (dla kolorania użyłem php):
  1. <?php
  2. function show_products(sel)
  3. {
  4. var cat = sel.options[sel.selectedIndex].value;
  5.  
  6. new Ajax.Request("action.php", {
  7. method: "post",
  8. parameters: { id : cat },
  9. onSuccess: function(obj){ document.getElementById("plist").innerHTML = obj.responseText;
  10. });
  11. }
  12. ?>


action.php, dodajemy nazwe templatki na koncu do wyswietlenia;:
  1. <?php
  2. if($_POST['id']!='')
  3. {  
  4. $q = mysql_query("SELECT * FROM products WHERE product_cat = '$cat'");
  5. $products_list = array();
  6. while ($tab = mysql_fetch_assoc($q))
  7.  {
  8. $products_list[] = $tab;
  9.  }
  10.  $smarty->assign('products_list', $products_list);
  11.  $smarty->display('products_list.tpl');
  12. }
  13. ?>

no i na końcu trza stworzyć nowy plik products_list.tpl, do którego przekazujesz tablicę ze smarty (do już załadowanego templata się po prostu nie da):

  1. {section name=i loop=$products_list}
  2. <div id="{$products_list[i].product_id}">{$products_list[i].product_name}</div>
  3. {/section}


dopiero Tak Ci to zadziała
wicc
a nie wystarczyłoby po prostu dać
$smarty->display('katalog.tpl');
zeby zaladowac ten sam templat? tylko ze cos mi nie dziala to..

nie wierze zeby nie bylo latwiejszego sposobu.. AJAX'em na pewno sie to da jakos :/
Cezar708
Cytat(wicc @ 14.01.2008, 15:09:46 ) *
a nie wystarczyłoby po prostu dać
$smarty->display('katalog.tpl');


nie da rady, ponieważ w takim przypadku załaduję Ci całą stronę jeszcze raz do wskazanego miejsca. Czyli powstanie coś na wzór fraktala...

Cytat(wicc @ 14.01.2008, 15:09:46 ) *
nie wierze zeby nie bylo latwiejszego sposobu.. AJAX'em na pewno sie to da jakos :/


.. no w moim przykładzie korzystam z ajaxa i w sumie uważam sposób za prosty

Pozdrawiam
wicc
zrobiłem Twoją metodą ale coś nie gra... z tego co dałem radę sprawdzić to do funkcji na pewno dociera ID kategorii, funkcja "widzi" diva PLIST, do pliku action.php wchodzi ID, zapytanie do bazy jest dobre, niestety zawartość dodatkowego templata lista.tpl nie jest importowana do diva :/
Cezar708
był błąd (parser) w skrypcie, zabrakło } na końcu, wypróbuj:

Kod
function getCos(){
  var cat = sel.options[sel.selectedIndex].value;
  new Ajax.Request("test.html", {
    method: "post",
    parameters: { id : "cat" },
    onSuccess: function(obj){ $("plist").innerHTML = obj.responseText; }
  });
}


... u siebie sprawdziłem i zadziałało.

Pozdrawiam
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.