[js] lista zależna od selecta Opcje

[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

[HTML] pobierz, plaintext 
<select name="cat" onChange="show_products(this)">
   <option value="0">wybierz</option>
   {section name=i loop=$cats_list}
      <option value="{$cats_list[i].cat_id}">
      {$cats_list[i].cat_name}
      </option>
   {/section}
</select>
 
{section name=i loop=$products_list}
<div id="{$products_list[i].product_id}">{$products_list[i].product_name}</div>
{/section}
[HTML] pobierz, plaintext 

funkcja wysyłająca ID wybranej kategorii

[HTML] pobierz, plaintext 
function show_products(sel)
{
   var cat = sel.options[sel.selectedIndex].value;
 
   new Ajax.Request("action.php", { 
   method: "post", 
   parameters: { id : cat }
      });
}
[HTML] pobierz, plaintext 

action.php

[PHP] pobierz, plaintext 
<?php
if($_POST['id']!='')
	  {		 
	  $q = mysql_query("SELECT * FROM products WHERE product_cat = '$cat'");
	  $products_list = array();
	  while ($tab = mysql_fetch_assoc($q))
		 {
			  $products_list[] = $tab;
		 }
		 $smarty->assign('products_list', $products_list);
	  }
?>
[PHP] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<select name="cat" onChange="show_products(this)">
<option value="0">wybierz</option>
{section name=i loop=$cats_list}
<option value="{$cats_list[i].cat_id}">
{$cats_list[i].cat_name}
</option>
{/section}
</select>
 
<div id="plist"></div>
[HTML] pobierz, plaintext 

javascript (dla kolorania użyłem php):

[PHP] pobierz, plaintext 
<?php
function show_products(sel)
{
  var cat = sel.options[sel.selectedIndex].value;
 
  new Ajax.Request("action.php", {
	method: "post",
	parameters: { id : cat },
	onSuccess: function(obj){ document.getElementById("plist").innerHTML = obj.responseText;
  });
}
?>
[PHP] pobierz, plaintext 

action.php, dodajemy nazwe templatki na koncu do wyswietlenia;:

[PHP] pobierz, plaintext 
<?php
if($_POST['id']!='')
	  {		 
	  $q = mysql_query("SELECT * FROM products WHERE product_cat = '$cat'");
	  $products_list = array();
	  while ($tab = mysql_fetch_assoc($q))
		 {
			  $products_list[] = $tab;
		 }
		 $smarty->assign('products_list', $products_list);
		 $smarty->display('products_list.tpl');
	  }
?>
[PHP] pobierz, plaintext 

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):

[HTML] pobierz, plaintext 
{section name=i loop=$products_list}
<div id="{$products_list[i].product_id}">{$products_list[i].product_name}</div>
{/section}
[HTML] pobierz, plaintext 

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 :/

Ten post edytował wicc 14.01.2008, 15:10:31

[Cezar708]

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...

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