Javascript toggle mit PHP While Schleife
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
binde
boxen
code
element
fehler
funktion
funktionieren
hilfe
http
idee
informieren
jeweiligen box
sache
sagen
schleife
url
verwenden
zeile
zusatz
-
Zuerst einmal: Falls das hier, das falsche Forum ist, bitte verschieben.
Ich möchte in einem Formular bei Klick auf einen Link zusätzliche Textfelder anzeigen.
Dazu habe ich diese toggle Javascript Funktion:
<script type="text/javascript"><!-- var elemente = ['einsaetze', 'einnahmen']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = ''; // oder 'block' ... else element.style.display = 'none'; } function toggleAll() { for(var i = 0; i < elemente.length; i++) toggleElement(elemente[i]); } // --></script>
Und den PHP Code, mit einer While Schleife:
<?php ...... while ( $row = $abstract->fetchRow ( $res ) ) { $letter = $row ['l']; $zusatz = $row ['z']; $verlust = $row ['ver']; $time = $row ['time']; $id = $row ['id']; echo '<div class="day_box"> <form method="post" class="form" action="index.php?id=' . $id . '"> <ul> <div class="item"> <li><label for="letter">Letter:</label> <input type="text" name="letter" id="letter" size="20" value="' . $letter . '" /></li> </div> <div class="item"> <li><label for="zusatz">Zusatz:</label> <input type="text" name="zusatz" id="zusatz" size="20" value="' . $zusatz . '" /></li> </div> //Das ist der Link zur toggle-Funktion <a href="#" onclick="toggleAll();">Eingabefelder einblenden</a> <ul> <div class="item"> <li id="einsaetze" style="display: none"><label for="einsaetze">Einsätze:</label> <input type="text" name="einsaetze" id="einsaetze" size="20" /></li> </div> <div class="item"> <li id="einnahmen" style="display: none"><label for="einnahmen">Einnahmen:</label> <input type="text" name="einnahmen" id="einnahmen" size="20" /></li> </div> </ul> <input type="submit" name="edit_day" value="Daten aktualisieren" /> </form> </div>'; } ..... ?>
Diese While Schleife gibt mehrere Daten in einer Div Box aus einer Datenbank aus.
Hier gibt es aber folgendes Problem:
Wenn ich auf den Link
<a href="#" onclick="toggleAll();">Eingabefelder einblenden</a>
gehe, werden die zusätzlichen Eingabefelder nur in der obersten Box angezeigt.
Aber wenn ich in einer der unteren Boxen auf den Link gehe, werden die zusätzlichen Felder auch nur in der 1. Box angezeigt. Die Felder sollten aber in der jeweiligen Box erscheinen, wo auch der Link geklickt wird.
Wie kann ich es so ändern, dass immer in der jeweiligen Box, wo ich auch den Link klicke, die zusätzlichen Eingabefelder angezeigt werden?
Meine erste Idee war, jeder Box eine id zu geben. Aber wie soll der Code dann aussehen? Oder habt ihr andere Ideen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich denke, die beste Lösung ist mit IDs für Deine Boxen.
Dann übergibst Du die ID in der Funktion toggleAll() und führst sie dann genau für dieses Element aus. -
tobiworlds schrieb:
Ich denke, die beste Lösung ist mit IDs für Deine Boxen.
Dann übergibst Du die ID in der Funktion toggleAll() und führst sie dann genau für dieses Element aus.
Ja, hab ich mir schon gedacht
Wie muss der Javascript Code aussehen?
Der Link in der Schleife muss dann so aussehen:
<a href="#" onclick="toggleAll(' . $id . ');">Eingabefelder einblenden</a>
oder? -
Nutzt Du jQuery? Das würde die Sache vereinfachen...
-
tobiworlds schrieb:
Nutzt Du jQuery? Das würde die Sache vereinfachen...
Nein, was wäre denn der Vorteil? -
Das viele Javascript-Befehle vereinfacht werden würden.
Du kannst Dich ja hier mal kurz über jQuery informieren: jquery.org.
Du würdest einfach diese Zeile ändern:
.echo '<div class="day_box" id=" ' . $id . ' ">
Mit jQuery würde der Code dann wie folgt aussehen:
<script type="text/javascript"><!-- var elemente = ['einsaetze', 'einnahmen']; // hier gehören die Element-IDs rein function toggleAll(id) { for(var i = 0; i < elemente.length; i++) $('#'+id).find(elemente[i]).toggle(); } // --></script>
Ich habe es nicht getestet, müsste aber so funktionieren... -
tobiworlds schrieb:
Das viele Javascript-Befehle vereinfacht werden würden.
Du kannst Dich ja hier mal kurz über jQuery informieren: jquery.org.
Du würdest einfach diese Zeile ändern:
.echo '<div class="day_box" id=" ' . $id . ' ">
Mit jQuery würde der Code dann wie folgt aussehen:
<script type="text/javascript"><!-- var elemente = ['einsaetze', 'einnahmen']; // hier gehören die Element-IDs rein function toggleAll(id) { for(var i = 0; i < elemente.length; i++) $('#'+id).find(elemente[i]).toggle(); } // --></script>
Ich habe es nicht getestet, müsste aber so funktionieren...
Ich habe den Javascript Code jetzt so:
<script type="text/javascript"><!-- var elemente = ['einsaetze', 'einnahmen']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = ''; // oder 'block' ... else element.style.display = 'none'; } function toggleAll(id) { for(var i = 0; i < elemente.length; i++) $('#'+id).find(elemente[i]).toggle(); } // --></script>
und die Boxen jeweils so:<div class="day_box" id=" ' . $id . ' ">
Aber jetzt tut sich jetzt garnichts mehr beim Klick auf die Links.
Ist im Code irgendwo ein Fehler drin? -
Für diesen Code benötigst Du jQuery, was Du aber nicht eingebunden hast.
Wenn Du das verwenden würdest, müsste eigentlich alles funktionieren.
Also binde noch in deinen Head ein:
.<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Beitrag zuletzt geändert: 20.6.2012 20:58:28 von tobiworlds -
tobiworlds schrieb:
Für diesen Code benötigst Du jQuery, was Du aber nicht eingebunden hast.
Wenn Du das verwenden würdest, müsste eigentlich alles funktionieren.
Also binde noch in deinen Head ein:
.<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Da tut sich leider immer noch nichts.
Ist noch was am Code falsch? -
Ohne den Code jetzt genau durchgeschaut zu haben kann ich dir nicht sagen ob Fehler drin sind.
Was ich dir aber sagen kann ist, dass du wohl hoffentlich selbst in der Lage bist, syntaktische Fehler zu finden.
Als kleine Hilfestellung bietet sich die Fehlerkonsole deines Browsers an. Zusätzlich kannst du die Webdeveloper-Tools deines Browser zu rate Ziehen (zumindest in Firefox und Chrome), oder dir (im Firefox) Firebug installieren und damit deinen Code auf Fehler zu testen.
Wenn das alles nichts hilfe empfehle ich alternativ einen Editor mit Syntaxhighlighting (zB Notepad++).
Einfach mal pauschal hier Code ins Forum zu posten und die User nach Fehler suchen lassen ist nicht nur nervig sonder vorallem faul.
mfg -
Dann habe ich leider auch keine Ahnung, aber Du hast auch noch mehr verändert, oder?
-
tobiworlds schrieb:
Dann habe ich leider auch keine Ahnung, aber Du hast auch noch mehr verändert, oder?
Ich habe versucht alles an die Seite anzupassen, du kannst ja nochmal drüberschauen.
Den Link hab ich dir geschickt.
Ich sehe jetzt auch keinen Fehler mehr. -
Deine ifs und fors sind nicht richtig implementiert, oder?
Da fehlt immer die umschließende Klammer... -
tobiworlds schrieb:
Deine ifs und fors sind nicht richtig implementiert, oder?
Da fehlt immer die umschließende Klammer...
Ich glaube schon.
auf einer anderen seite von mir sind die auch so, und da geht es.
Ich schau dann halt morgen nochmal drüber, aber schonmal danke für deine Hilfe! :D -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
