Dynamicznie wyswietlane opisy

0

Witam,
Mam taki problem, na stronie którą tworzę chcę zrobić listę elementów- tekst i link. Chcę aby po kliknięciu w link, pokazywał się „div” z jego opisem. Robię to przy pomocy skrypt JavaScript który zamieszczam w tym poscie. Chcę żeby tekst opisu był pobierany dynamicznie z bazy danych. Potrafię napisać skrypt PHP który pobierze te dane z bazy. Mój problem polega na tym że nie potrafię przekazać id (parametr funkcji szczegoły) do skryptu PHP oraz nie wiem jak wpisać dane pobrane przez skrypt do wybranego diva bez odświeżania strony.

Dużo szukałem po necie ale nie znalazłem niczego konkretnego. Czytałem coś na temat AJAX’u bo chyba to potrzebuje wykorzystać ale nie znalazłem rozwiązania mojego problemu. Proszę o pomoc
Pozdrawiam

Oto kod strony wraz ze skryptem JS:

<html>
<head>
<script type="text/javascript">
function szczegoly(nr_id)
{
	
	var div = document.getElementById(nr_id);
	var view = div.style.display; //stan - czy ukryte czy nie
	
	if (view == "none")
	{
           div.style.display = "block";
	}

	if (view == "block")
	{
           div.style.display = "none";
	} 
}
</script>

</head>
<body>
<li>linia 1 <a href="javascript:szczegoly('001')">szczegoly</a>
<div style="display: none" id="001">ten tekst ma byc dynamiczny</div>
</li>
<li>linia 2 <a href="javascript:szczegoly('002')">szczegoly</a>
<div style="display: none" id="002">ten tekst ma byc dynamiczny</div>
</li>
<li>linia 3 <a href="javascript:szczegoly('003')">szczegoly</a>
<div style="display: none" id="003">ten tekst ma byc dynamiczny</div>
</li>
<li>linia 4 <a href="javascript:szczegoly('004')">szczegoly</a>
<div style="display: none" id="004">ten tekst ma byc dynamiczny</div>
</li>
</body>

</html>
0

Proponuję coś takiego:

<html>
	<head>
		<script type="text/javascript">
			function szczegoly(nr_id){
				var div = document.getElementById(nr_id);
				var view = div.style.display; //stan - czy ukryte czy nie
				if (view == "none") div.style.display = "block"; 
				else if (view == "block") div.style.display = "none"; 
			}
		</script>
	</head>
	<body>
	<?php
		function connect(){
			$link = mysql_pconnect('host','user','pass');
			mysql_select_db('baza');
			mysql_query("SET NAMES 'utf8'");
			mysql_query("SET CHARACTER SET 'utf8_general_ci'");
			return $link;
		}
		connect();
		$sel = mysql_query("SELECT * FROM `teksty`");
		while($line = mysql_fetch_array($sel)){
			echo '
			<li>
				<a href="javascript:szczegoly(\''.$line['id'].'\')">'.$line['text1'].'</a>
				<div style="display: none" id="'.$line['id'].'">'.$line['text2'].'</div>
			</li>
			';
		}
	?>
	</body>
</html>

Strona generuje się pobierając dane z bazy.

Zrzut przykładowej bazy:

CREATE TABLE IF NOT EXISTS `teksty` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `text1` varchar(200) NOT NULL,
  `text2` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

INSERT INTO `teksty` (`id`, `text1`, `text2`) VALUES
(1, 'Text1', 'Dynamiczny text 1'),
(2, 'Text2', 'Dynamiczny text 2');
0

Dzięki za odpowiedz, niestety to rozwiązanie nie jest dla mnie optymalne. Problem polega na tym że opisy są długie a ilość pozycji bardzo duża. Nie chcę więc pobierać wszystkiego "od razu".
Może ktoś zaproponuje coś innego...

0

a weź użyj cluetip proste i przyjemne

z opcji zainteresuj się dokładnie tą o ajax

1 użytkowników online, w tym zalogowanych: 0, gości: 1