[ JS ] Probleem met script

[CH4OS]

Ik heb een probleem met een javascript.
Het script werkt wel, maar doet niet helemaal wat ik wil dat ie doet.
Weet ook wel een oplossing er voor, maar ik weet niet helemaal hoe ik dat het beste op kan lossen.
Ik wil namelijk een tabel rij unhiden, als er op een link geklikt word, of op de wel zichtbare gedeelte van een stukje uit een tabel.

Op zich werkt het huidige scriptje die ik heb goed, alleen... Als ik dan in de 2e tabel klik (of op de link daarvan) dan word de eerste reservering uitgeklapt. En dit is natuurlijk niet de bedoeling.

Ik denk zelf, dat dit op te lossen is, door elke tabel zijn eigen id te geven bijv. block 0, block 1, block 2 en ga zo maar door... Uiteraard moet dit dynamisch gebeuren... En het scriptje die zeg maar kan hiden en unhiden, die moet dan uiteraard middels een for of while loop, die dingen hiden (of unhiden)

Probleem is, is dat ik niet weet, hoe ik dat het beste kan oplossen. Heb nu namelijk dit scriptje:

JavaScript:

function toggle() {
 if(document.getElementById("block").style.display == 'none' || document.getElementById("block2").style.display == 'none'){
   document.getElementById("block").style.display = '';
   document.getElementById("block2").style.display = '';
 }else{
   document.getElementById("block").style.display = 'none';
   document.getElementById("block2").style.display = 'none';
 }
}

En die hinde of unhide dus alleen de eerste tabelrow.
Een demo is te zien op http://www.fi.uu.nl/~gertjanp
Heb nu ook die block2 er in gezet, omdat anders maar 1 rij gehide of ge de-hide werd...

De XHTML-code klopt ook niet helemaal, omdat (uiteraard) een id een uniek 'iets' is, wat in mijn XHTML-code nu dus niet het geval is. Is daar ook een oplossing voor? Want die kan ik mezelf namelijk niet echt bedenken...

Heb met Google ook al gezocht, maar die geven alleen resultaten voor een enkele hide / unhide of een statische, maar dat is niet mogelijk bij de mijne, omdat er ook nieuwe 'reserveringen' op de agenda kunnen komen...

Heb ook hier gezocht, kwam toen <tr></tr> unhiden/hiden dmv javascript. tegen, maar de code die daar gepost word, mocht geen roelaas bieden helaas... En mijn JS skills zijn ook niet al te best...
Ja ik weet dat ik beter eerst JS moest gaan leren, nadat ik voor mezelf dacht, HTML goed te kunnen, in plaats van PHP te gaan doen...

Op deze pagina staat in feite wat ik wil... Nadeel is alleen, dat die pagina dus statisch is, waar mijn pagina dus dynamisch is...

[ Voor 49% gewijzigd door CH4OS op 15-02-2005 15:03 ]

[Morrar]

JavaScript:

var oActBlockA = null;
var oActBlockB = null;

function toggle(iBlockNr)
{ //Get block elements
    var sBlockId = "block" + iBlockNr;
    var oElementA = document.getElementById(sBlockId + "A");
    var oElementB = document.getElementById(sBlockId + "B");
  if(!oElementA) { return; }

  //Als er een block zichtbaar is:
  if(oActBlockA)
  { //Hide de actieve blocken
    oActBlockA.style.display = 'none';
    oActBlockB.style.display = 'none';
    
    //Toon eventueel het element wat zichtbaar moet worden
    //Als het een ander element is dan degene die zichtbaar was
    if(oElementA != oActBlockA)
    {  oElementA.style.display = '';
         oElementB.style.display = '';
       oActBlockA = oElementA;
       oActBlockB = oElementB;
    }
    else { oActBlockA = oActBlockB = null; }
  }
  else
  {  oElementA.style.display = '';
     oElementB.style.display = '';
     oActBlockA = oElementA;
     oActBlockB = oElementB;
  }
}

OK, dit is em dan eindelijk. Geef je eerste twee blokken als id "block1A", "Block1B", de tweede blokken "block2A" en "block2B" etc. Vervolgens verbergen / tonen door toggle(1) voor blokken "block1A" / "block1B" en en toggle(2) voor "block2A" en "block2B". je kunt natuurlijk ook nog meer blokken aanmaken.

[ Voor 216% gewijzigd door Morrar op 15-02-2005 15:54 ]

[CH4OS]

Morrar schreef op dinsdag 15 februari 2005 @ 15:09:
Geef toggle het id van een element mee en laat het script werken met dat id

Je bedoelt dus zoiets als

JavaScript:

function toggle(block, block2) {
 if(document.getElementById("block").style.display == 'none' || document.getElementById("block2").style.display == 'none'){
   document.getElementById("block").style.display = '';
   document.getElementById("block2").style.display = '';
 }else{
   document.getElementById("block").style.display = 'none';
   document.getElementById("block2").style.display = 'none';
 }
}

Maar deze werkt waarschijnlijk nog niet helemaal dan...
* CH4OS schaamt zich nu te pletter, de JS-n00b...

Want de huidige code, die hide / unhide de eerste ID met naam block (of block2) die hij tegenkomt... En dat moet dus niet... Moet dus elke block (en de block2) een eigen ID geven (bijv. block-1 en block2-1, block-2 en block2-2 en ga zo maar door...)

Of is er ook een andere oplossing?

[ Voor 25% gewijzigd door CH4OS op 15-02-2005 15:14 ]

[Vinzzz243]

en dan wel de aanhalingstekens weg natuurlijk, anders neemt ie de variabelen niet...

[Battle Bunny]

Volgens mij moet je roepen display = "table-row"

[edit]

code:

   <script type="text/javascript">
      function toggleRow(rowID)
      {
         var rowStyle = document.getElementById(rowID).style;
         //var rowParent = document.getElementById(rowID+"parent");
         if (rowStyle.display=="table-row") {
            rowStyle.display="none";
            //rowParent.style.borderleft = "1px solid red;";
            }
         else
            {rowStyle.display="table-row"}

      }
   </script>

[ Voor 84% gewijzigd door Battle Bunny op 15-02-2005 15:18 ]

[CH4OS]

Battle_Bunny schreef op dinsdag 15 februari 2005 @ 15:17:
Volgens mij moet je roepen display = "table-row"

[edit]

code:

   <script type="text/javascript">
      function toggleRow(rowID)
      {
         var rowStyle = document.getElementById(rowID).style;
         //var rowParent = document.getElementById(rowID+"parent");
         if (rowStyle.display=="table-row") {
            rowStyle.display="none";
            //rowParent.style.borderleft = "1px solid red;";
            }
         else
            {rowStyle.display="table-row"}

      }
   </script>

Table-row word niet ondersteund door IE, dus dat gaat niet... En aangezien het beheer hier IE gebruikt als standaard browser, en geen andere er naast wil gaan gebruiken...

[ Voor 7% gewijzigd door CH4OS op 15-02-2005 15:20 ]

[Battle Bunny]

Table-row word niet ondersteund door IE, dus dat gaat niet... En aangezien het beheer hier IE gebruikt als standaard browser, en geen andere er naast wil gaan gebruiken...

Aaaah, daarom werkte dat niet in IE (Couldn't care less, interne app dus dan gebruik je maar Firefox).

Wat geeft JavaScript als je de style.display opvraagt wanneer 'ie nog zichtbaar is?

[CH4OS]

Battle_Bunny schreef op dinsdag 15 februari 2005 @ 15:32:
Aaaah, daarom werkte dat niet in IE (Couldn't care less, interne app dus dan gebruik je maar Firefox).

Tja, als ik FireFox als dé browser kon aansmeren, bij de beheerders... En ik test gewoon met beiden, omdat ik goede XHTML wil hebben (al dan niet uitgepoept) dus met dat ID zie ik (het liefste, maar hoeft niet per se) opgelost...

Wat geeft JavaScript als je de style.display opvraagt wanneer 'ie nog zichtbaar is?

Wat bedoel je daar mee als ik vragen mag? Standaard word er gewoon 2 rows uit een tabel gehide... En die moeten tevoorschijn komen (door middel van klikken op de link, of op het stukje wat je ziet...)

[Morrar]

Heb mijn oplossing aangepast en hier werkt het nu... Was te snel met posten de eerste keer... HTML bij het script is als volgt (ter verduidelijking / alleen eerste blokken):

HTML:

<table border="0" onmouseover="this.className='TableHoverOver'" onmouseout="this.className='TableHoverOut'" onclick="toggle(1);">
  <tr>
     [snip]
  </tr>
  <tr>
    [snip]
  </tr>
  <tr id="block1A" style="display:none;">
    [snip]
  </tr> 
  <tr id="block1B" style="display:none;">                           
    [snip]
  </tr>
</table>
<p><a href="#" onclick="toggle(1);">Meer info over reservering</a></p>

De tweede set blokken moet dus "block2A" en "block2B" heten. En die toon / verberg je dan met toggle(2). De derde set telt gewoon verder etc.

[ Voor 107% gewijzigd door Morrar op 15-02-2005 15:56 ]

[Battle Bunny]

Ik bedoelde wat de initiele waarde is van die display property was. Maar die's leeg heb ik net getest....

[CH4OS]

@ Morrar:
Ik vind het echt super geweldig van je, dat je een script hebt gemaakt, maar als ik je verhaal / uitleg zo lees, dan moet dus elke block apart in de HTML gemeld worden? Dat gaat namelijk vrij lastig, want als er een reservering erbij komt, dan heeft die het toggle meganisme niet... En die moet ie dus wel hebben eigenlijk... En daar zit ik een beetje vst eigenlijk... n00bish /me GJ-tje

Heb net ff de code getest, op mijn webpagina, maar ook deze heeft hetzelfde effect, als wat mijn scriptje doet in de topicstart... Desalniettemin vind ik het top van je, dat je meedenkt en me helpt etc.

[ Voor 21% gewijzigd door CH4OS op 15-02-2005 16:00 ]

[Morrar]

Je bedoeld dat dat er naast A en B een C bij kan komen? Of dat je door moet nummeren met block1, block2, block3 etc? Oftewel, waar komen ze erbij (valt op te lossen hoor, maar mijn scriptje is nogal een snelle hack)? Ik kan evt een script maken dat alle TR's na een bepaalde TR hide / showt dan is het probleem opgelost?

Owja en display = 'block' moet idd display = '' zijn anders wordt da pagina steeds langer... Vage zooi...

Edit:
Check ff www.lukaskoning.nl/tweak/test.html. Je hebt je ID's nog niet goed staan... Daar werkt het nl wel. De tweede tabel moet "block2A" en "block2B" zijn en die moet je aanroepen met "toggle(2)"

[ Voor 66% gewijzigd door Morrar op 15-02-2005 16:07 ]

[CH4OS]

Morrar schreef op dinsdag 15 februari 2005 @ 15:57:
Je bedoeld dat dat er naast A en B een C bij kan komen? Of dat je door moet nummeren met block1, block2, block3 etc? Oftewel, waar komen ze erbij (valt op te lossen hoor, maar mijn scriptje is nogal een snelle hack)? Ik kan evt een script maken dat alle TR's na een bepaalde TR hide / showt dan is het probleem opgelost?

Owja en display = 'block' moet idd display = '' zijn anders wordt da pagina steeds langer... Vage zooi...

Nee, een C komt er niet (gelukkig niet) Het probleem is, dat als ik in de tabel waar de 2e (of 3e) reservering staat klik (of de link die er onder staat) dat dan de eerste tabel, met de eerste reservering uitgeklapt word. En dit is een beetje scheef, daar bij de 2e tabel, de 2e tabel moet expanden, en bij de derde, de derde natuurlijk...

En van dat display: 'block' had ik vrij snel door, dus dat is opgelost inmiddels

Morrar schreef op dinsdag 15 februari 2005 @ 15:57:
Edit:
Check ff www.lukaskoning.nl/tweak/test.html. Je hebt je ID's nog niet goed staan... Daar werkt het nl wel.

Maar jouw pagina is static, mijne dynamisch, en word uitgepoept door PHP

[ Voor 16% gewijzigd door CH4OS op 15-02-2005 16:07 ]

[Morrar]

Dus? Dan kun je nog makkelijker die ID's genereren... Gewoon een tellertje op laten lopen en het ID / de toggle aanroep uitpoepen Pass anders het PHP stukje waar de code in gebakken wordt, dan fix ik het even...

[ Voor 26% gewijzigd door Morrar op 15-02-2005 16:09 ]

[CH4OS]

Morrar schreef op dinsdag 15 februari 2005 @ 16:08:
Dus? Dan kun je nog makkelijker die ID's genereren... Gewoon een tellertje op laten lopen en het ID / de toggle aanroep uitpoepen Pass anders het PHP stukje waar de code in gebakken wordt, dan fix ik het even...

Het ID probleem heb ik opgelost nu, aangezien hij nu het id van de reservering er tussen plakt, maar op de een of andere manier wil die niet echt

En hier de PHP-code waar je om vroeg

PHP:

print "<br /><table border=\"0\" onmouseover=\"this.className='TableHoverOver'\" onmouseout=\"this.className='TableHoverOut'\" onclick=\"toggle(1);\">
                <tr>
                    <td>Datum en tijd</td>
                    <td>Onderwerp</td>
                    <td>Kamer</td>  
                </tr>
                <tr>
                    <td>$row[2] - $row[3] $row[4]u tot $row[5]u</td>
                    <td><a href=\"onderwerpdetail.php?id=$row[0]\" target=\"_blank\">$row[8]</a></td>
                    <td><a href=\"kamerdetail.php?kamer=$row[1]\" target=\"_blank\">$row[1]</a></td>    
                </tr>
                <tr id=\"block$row[0]A\" style=\"display:none;\">
                    <td>Website</td>
                    <td>Lokatie Extern?</td>
                    <td>Werkveldnaam</td>
                    <td>Deelnemers</td>
                    <td>Gereserveerd door</td>
                    <td>Gereserveerd voor</td>                          
                    <td>Reserverings ID</td>    
                </tr>    
                <tr id=\"block$row[0]B\" style=\"display:none;\">                            
                    <td>$row[10]</td>
                    <td>$row[11]</td>
                    <td>$row[12]</td>
                    <td>$row[6]</td>
                    <td>$row[7]</td>                            
                    <td>$row[0]</td>    
                </tr>
            </table>
    <p><a href=\"#\" onclick=\"toggle();\">Meer info over reservering</a></p>
    <hr style=\"color: #FAFAFA;\" />";
            }

PHP:

$row[0]

Is de row die de ID's tussen black an A / B plakt.

[Morrar]

PHP:

<?
print "<br /><table border=\"0\" onmouseover=\"this.className='TableHoverOver'\" onmouseout=\"this.className='TableHoverOut'\" onclick=\"toggle($row[0]);\">
                  <tr>
                    <td>Datum en tijd</td>
                    <td>Onderwerp</td>
                    <td>Kamer</td>    
                  </tr>
                  <tr>
                    <td>$row[2] - $row[3] $row[4]u tot $row[5]u</td>
                    <td><a href=\"onderwerpdetail.php?id=$row[0]\" target=\"_blank\">$row[8]</a></td>
                    <td><a href=\"kamerdetail.php?kamer=$row[1]\" target=\"_blank\">$row[1]</a></td>    
                  </tr>
                  <tr id=\"block$row[0]A\" style=\"display:none;\">
                    <td>Website</td>
                    <td>Lokatie Extern?</td>
                    <td>Werkveldnaam</td>
                    <td>Deelnemers</td>
                    <td>Gereserveerd door</td>
                    <td>Gereserveerd voor</td>                            
                    <td>Reserverings ID</td>    
                  </tr>    
                  <tr id=\"block$row[0]B\" style=\"display:none;\">                            
                    <td>$row[10]</td>
                    <td>$row[11]</td>
                    <td>$row[12]</td>
                    <td>$row[6]</td>
                    <td>$row[7]</td>                            
                    <td>$row[0]</td>    
                  </tr>
            </table>
    <p><a href=\"#\" onclick=\"toggle($row[0]);\">Meer info over reservering</a></p>
    <hr style=\"color: #FAFAFA;\" />";
            }
?>

Alleen de toggle() aanroepen veranderd in toggle($row[0]) eigenlijk

[CH4OS]

Hehe, het was een beetje prutsen, maar hij doet het nu eindelijk...
Het probleem was, dat ik de boel verkeerd op liet roepen. Ik riep hem op als zijn block$row[0] in de onclick events, en dit moest alleen row[0] zijn...

Even ter illustratie:

JavaScript:

onclick="toggle($row[0])"

Zo moet het zijn, in de onclick events. Maar ik had:

JavaScript:

onclick="toggle(block$row[0])"

Ik weet dat het eigenlijk niet hoeft, ik doe het lekker toch...
* CH4OS dankt Morrar en iederen voor hun inzet, om mij met mijn probleem te helpen!!

offtopic:
En dan posten ze de oplossing net wat eerder dan mij...

[ Voor 10% gewijzigd door CH4OS op 15-02-2005 16:37 ]

[Morrar]

"En dan posten ze de oplossing net wat eerder dan mij..." ... Ja moet je maar wat sneller leren devven hoor

Anyways, graag gedaan en succes met je site!

[CH4OS]

Morrar schreef op dinsdag 15 februari 2005 @ 16:40:
"En dan posten ze de oplossing net wat eerder dan mij..." ... Ja moet je maar wat sneller leren devven hoor

Anyways, graag gedaan en succes met je site!

offtopic:
thnQ

En die snelheid komt vast en zeker nog wel...