[AJAX][JS] Zamykanie (ukrywanie) pozostalych divów, po rozwinięciu jednego. Opcje

[puz219]

Witam.

Mam strone z edycją rekordów w bazie. Jest to zrobione w formie tabelki:


AKTOR | ... | POSTAĆ |Edycja |Usunięcie
--------------------------------------------------------------------------------------
aktor 1 | ... | postać 1 | Edytuj | Usuń
--------------------------------------------------------------------------------------
aktor 2 | ... | postać 2 | Edytuj | Usuń

itd...

Teraz pod każdą linijką mam pusty wiersz (a w nim div), do którego wyczytuję za pomocą ajaxa (advAJAX) zawartośc formularza edycji (po kliknięciu w Edytuj).

I teraz chcialbym zrobić tak, że jak kliknę w Edytuj jednego rekordu, to żeby po wczytywało po nim formularz do diva, a pozostałe divy na stronie zostały automatycznie zwinięte.

Oto kod całej strony:

[PHP] pobierz, plaintext 
<?php
echo "<table width=\"640\" height=\"60\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border: 2px dashed #CCCCCC\">
			 <tr><td width=\"640\" height=\"60\" align=\"center\" valign=\"middle\">
			 <a href=\"javascript:void(0)\" onclick=\"getData('actors_main.php?id=".$id."&co=1', 'addNewCast')\"><img src=\"../images/add.png\" border=\"0\" style=\"margin-right: 10px; vertical-align: middle;\"><font color=\"#72d145\" size=\"4\"><b>Dodaj do obsady</b></font></a>
			 <div id=\"addNewCast\"></div>
			 </td></tr>
			 </table><br>";
		echo "<table width=\"640\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"border-collapse: collapse; border:1px dotted #000000\">";
		echo "<tr>
				<td width=\"300\" bgcolor=\"#990000\"><center><font style=\"color : #FFFFFF; font-size : 12px; font-family : Tahoma,Verdana,Arial;\"><b>Aktor:</b>&nbsp;</font></center></td>
				<td width=\"40\" bgcolor=\"#990000\">&nbsp;</td>
				<td width=\"300\" bgcolor=\"#990000\"><center><font style=\"color : #FFFFFF; font-size : 12px; font-family : Tahoma,Verdana,Arial;\"><b>Postać grana w serialu:</b>&nbsp;</font></center></td>
				<td width=\"60\" bgcolor=\"#990000\"><center><font style=\"color : #FFFFFF; font-size : 12px; font-family : Tahoma,Verdana,Arial;\"><b>Edycja:</b>&nbsp;</font></center></td>
				<td width=\"60\" bgcolor=\"#990000\"><center><font style=\"color : #FFFFFF; font-size : 12px; font-family : Tahoma,Verdana,Arial;\"><b>Usunięcie:</b>&nbsp;</font></center></td>
			  </tr>";
		for ($i=0; $i<$znalezionych; $i++){
		$wiersz=mysql_fetch_array($wynik);
		if($i % 2 == 0) { $_table_color="#f0f1f7"; } else { $_table_color="#FFFFFF"; }
		if(ShowCharacterName($wiersz["characterID"], "2") == NULL){ $_character=trim(zutf(ShowCharacterName($wiersz["characterID"], "1"))); } else { $_character="<a href=\"../?module=character&ch=".$wiersz["characterID"]."\"><font color=\"#000000\">".trim(zutf(ShowCharacterName($wiersz["characterID"], "1")))."</font></a>"; }
		echo "<tr>
						<td bgcolor=\"".$_table_color."\" align=\"right\" width=\"300\" style=\"padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px;\"><font style=\"color : #000000; font-size : 12px; font-family : Tahoma,Verdana,Arial;\">
						<a href=\"../?module=actor&osoba=".$wiersz["peopleID"]."\"><font color=\"#0000CC\">".trim(zutf(showPplName($wiersz["peopleID"])))."</font></a></font></td>
						<td bgcolor=\"".$_table_color."\" align=\"center\" width=\"40\" style=\"padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px;\"><font style=\"color : #000000; font-size : 12px; font-family : Tahoma,Verdana,Arial;\">
						...</font></td>
						<td bgcolor=\"".$_table_color."\" align=\"left\" width=\"300\" style=\"padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px;\"><font style=\"color : #000000; font-size : 12px; font-family : Tahoma,Verdana,Arial;\">
						".$_character."</font></td>
						<td bgcolor=\"".$_table_color."\" align=\"center\" width=\"60\" style=\"padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px;\"><font style=\"color : #000000; font-size : 12px; font-family : Tahoma,Verdana,Arial;\">
						<a href=\"javascript:void(0)\" onclick=\"getData('actors_main.php?actid=".$wiersz["actorID"]."&co=1', 'edit".$wiersz["actorID"]."')\"><font color=\"#0000CC\"><b>[edytuj]</b></font></a></font></td>
						<td bgcolor=\"".$_table_color."\" align=\"center\" width=\"60\" style=\"padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px;\"><font style=\"color : #000000; font-size : 12px; font-family : Tahoma,Verdana,Arial;\">
						<a href=\"?action=1&sid=".$id."&actid=".$wiersz["actorID"]."\" onclick=\"return confirm('Czy na pewno chcesz usunąć wybraną pozycję?');\"><font color=\"#990000\">[usuń]</font></a></font></td>
					</tr>
			<tr>
			<td width=\"640\" colspan=\"5\" bgcolor=\"".$_table_color."\"><div id=\"edit".$wiersz["actorID"]."\"></div></td>
			</tr>";
		}
	echo "</table>";
	}
?>
[PHP] pobierz, plaintext 

Proszę o pomoc.

[specialplan]

Uzywasz jakiegos JS frameworka?

[puz219]

Nie, żadnego nie używam

[Maciekbjw]

W JS można to całkiem prosto zrobić, poszukaj czegoś tutaj:

http://www.google.pl/search?hl=pl&clie...=Szukaj&lr=

[specialplan]

http://www.google.pl/search?hl=pl&clie...=Szukaj&lr=

Tez moze pomoc ;]

[puz219]

dobra poczytałem trochę i dalej nie potrafię rozwiązać tego problemu, gdyż w tamtych przykładach była wiadoma liczba divów, a
moje wyglądają tak:

[PHP] pobierz, plaintext 
<?php
echo "<div id=\"edit".$wiersz["actorID"]."\"></div>";
?>
[PHP] pobierz, plaintext 

czyli ich liczba jest równa ilości rekordów w bazie danych.

I teraz skąd mój skrypt ma wiedzieć, że kliknąłem np taki, który ma wczytać formularz do diva o id edit5, a pozostałe id, czyli np. jak będę miał 10 rekordów, to skąd ten skrypt ma wiedzieć, że ma divy od 0-4 ukryć, 5 rozwinąć, a 6-10 ukryć.

Nie mam, żadnego pomysłu jak coś takiego przekazać temu skryptowi.

Proszę o jakiś wskazówki.

I nie chodzi tu o samo to jak okryć lub wyświetlić zawartość diva, bo to wiem, tylko jak zrobić tak, że jak kliknę w link, to wczytuje mi dane do jednego diva, a pozostałe divy na stronie ukrywa.

Ten post edytował puz219 7.02.2008, 11:32:44

[specialplan]

Uzyj petli ;]

[puz219]

NO w końcu coś napisałem, ale nie działa za bardzo.

Więc tak oto funkcja javascript (w HEAD)

[HTML] pobierz, plaintext 
<script language="JavaScript">
//Funkcja EditMainCast_VarDivElements ładuje do tej zmiennej nazwy wszystkich divów na stronie.
var ids=new Array(<?php EditMainCast_VarDivElements($_id, $_co) ?>);
 
function switchid(id){	
	hideallids();
	showdiv(id);
}
 
function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}
 
function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}
 
function showdiv(id) {
	//safe function to show an element with a specified id
 
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>
[HTML] pobierz, plaintext 

i teraz tak:

jak do linku dodam switchid(id diva), to nie działa w ogóle i nie wiem dlaczego.

Oto kod:

[PHP] pobierz, plaintext 
<?php
echo "<a href=\"javascript:void(0)\" onclick=\"getData('actors_main.php?actid=".$wiersz["actorID"]."&co=1', 'edit".$wiersz["actorID"]."'); switchid('edit".$wiersz["actorID"]."')\"><font color=\"#0000CC\"><b>[edytuj]</b></font></a>";
?>
[PHP] pobierz, plaintext 

Natomiast jak switchid dam przed getData, to wtedy nic sie nie dzieje, ale to z oczywistych względów.

Jak zrobić, żeby działało.

Prosze o pomoc.

[daris]

A to nie możesz zrobić tak że po kliknięciu na Edytuj w js zapisujesz id do zmiennej i po następnym kliknięciu ukrywasz diva o tym id i ustawiasz nowe id (aktualne)