Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JS] Zamykanie (ukrywanie) pozostalych divów, po rozwinięciu jednego.
Forum PHP.pl > Forum > Przedszkole
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:

  1. <?php
  2. echo "<table width=\"640\" height=\"60\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border: 2px dashed #CCCCCC\">
  3.  <tr><td width=\"640\" height=\"60\" align=\"center\" valign=\"middle\">
  4.  <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>
  5.  <div id=\"addNewCast\"></div>
  6.  </td></tr>
  7.  </table><br>";
  8. echo "<table width=\"640\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"border-collapse: collapse; border:1px dotted #000000\">";
  9. echo "<tr>
  10. <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>
  11. <td width=\"40\" bgcolor=\"#990000\">&nbsp;</td>
  12. <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>
  13. <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>
  14. <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>
  15. </tr>";
  16. for ($i=0; $i<$znalezionych; $i++){
  17. $wiersz=mysql_fetch_array($wynik);
  18. if($i % 2 == 0) { $_table_color="#f0f1f7"; } else { $_table_color="#FFFFFF"; }
  19. 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>"; }
  20. echo "<tr>
  21. <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;\">
  22. <a href=\"../?module=actor&osoba=".$wiersz["peopleID"]."\"><font color=\"#0000CC\">".trim(zutf(showPplName($wiersz["peopleID"])))."</font></a></font></td>
  23. <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;\">
  24. ...</font></td>
  25. <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;\">
  26. ".$_character."</font></td>
  27. <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;\">
  28. <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>
  29. <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;\">
  30. <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>
  31. </tr>
  32. <tr>
  33. <td width=\"640\" colspan=\"5\" bgcolor=\"".$_table_color."\"><div id=\"edit".$wiersz["actorID"]."\"></div></td>
  34. </tr>";
  35. }
  36. echo "</table>";
  37. }
  38. ?>


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:

  1. <?php
  2. echo "<div id=\"edit".$wiersz["actorID"]."\"></div>";
  3. ?>


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.
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)
  1. <script language="JavaScript">
  2. //Funkcja EditMainCast_VarDivElements ładuje do tej zmiennej nazwy wszystkich divów na stronie.
  3. var ids=new Array(<?php EditMainCast_VarDivElements($_id, $_co) ?>);
  4.  
  5. function switchid(id){
  6. hideallids();
  7. showdiv(id);
  8. }
  9.  
  10. function hideallids(){
  11. //loop through the array and hide each element by id
  12. for (var i=0;i<ids.length;i++){
  13. hidediv(ids[i]);
  14. }
  15. }
  16.  
  17. function hidediv(id) {
  18. //safe function to hide an element with a specified id
  19. if (document.getElementById) { // DOM3 = IE5, NS6
  20. document.getElementById(id).style.display = 'none';
  21. }
  22. else {
  23. if (document.layers) { // Netscape 4
  24. document.id.display = 'none';
  25. }
  26. else { // IE 4
  27. document.all.id.style.display = 'none';
  28. }
  29. }
  30. }
  31.  
  32. function showdiv(id) {
  33. //safe function to show an element with a specified id
  34.  
  35. if (document.getElementById) { // DOM3 = IE5, NS6
  36. document.getElementById(id).style.display = 'block';
  37. }
  38. else {
  39. if (document.layers) { // Netscape 4
  40. document.id.display = 'block';
  41. }
  42. else { // IE 4
  43. document.all.id.style.display = 'block';
  44. }
  45. }
  46. }


i teraz tak:

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

Oto kod:
  1. <?php
  2. 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>";
  3. ?>

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