Sofortbearbeitung -> Input um Text generieren

Kalma

Kalma

Erfahrenes Mitglied
Guten Morgen,


mich bewegt seit gestern die Frage, ob man folgendes Problem anders, oder vor allem besser lösen kann, als ich es getan habe:


Es geht um folgendes:
Ein Benutzerprofil, wo der User seine Daten angezeigt bekommt wie es auch auf einer öffentliche Seite aussähe, also:

Geburtsdatum: dd.mm.yyyy
Wohnort: Hier wohne ich, Deutschland

Und so weiter.

Jetzt kann man auf ein "Bearbeitungszahnrad" klicken, und um die Inputs soll ein Input gemacht werden, oder eben ein Selectfeld.

Bisher habe ich das so gelöst:

HTML: 
<did id="show_gebdatum">dd.mm.yyyy</div>
<div id="edit_gebdatum" style="display:none;">
<select name="gebdatum">dd</select>
<select name="gebdatum2">dd</select>
<select name="gebdatum2">dd</select>
</div>

Bei einem Klick auf bearbeiten würde nun der div "show_gebdatum" ausgeblendet, und der Div "edit_gebdatum" eingeblendet.


Gibt es dafür noch bessere Lösungen?
Weil so ist ja zum Beispiel im Quelltext immer auch der zweite Div "edit_xy" sichtbar!
 
Moin,

man könnte die nötigen Formularelemente erst bei Bedarf per JS erzeugen.
Ob das besser ist, ist wohl Ansichtssache.

Ich finde deine Lösung nicht unbedingt schlechter, wenn sie für dich gut funktioniert.
Es gibt natürlich fertige Lösungen, welche den anderen Weg gehen und geringere Änderung der serverseitigen Anwendung erfordern, aber nur für sowas irgendeine Riesen-Bibliothek wie bspw. Prototype+Scriptaculous einzubinden, ist auch nicht optimal.

Was ich also sagen will: Wenn es für dich gut funktioniert, ist es gut so :)
 
Ja es funktioniert wohl gut, was mich halt nervt, dass ich jeden DIV einzeln einblenden muss bisher, da ich nicht weiß ich so etwas in einer Schleife lösen kann!

Wenn mir da jemand einen Denkanstoß geben könnte wär das super!
 
Du könntest per getElementsByTagName() alle div's durchlaufen und prüfen, ob ihre ID mit edit_ beginnt...falls ja, halt einblenden.

Eleganter und performanter wäre jedoch dies:

Die <div>'s befinden sich ja sicher alle in einem gemeinsamen Elternelement(vermutlich ein <form>).
Dann liesse sich das sehr bequem per CSS über Änderung eines einzigen Selektors regeln.

Teste mal folgendes Konstrukt, es dürfte dich weiterbringen:)
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
form div.editable{display:none}
form.editable div.editable{display:block }
-->
</style>
</head>
<body>
<form>
  <strong onclick="this.parentNode.className='editable'">edit</strong>
  <div class="editable"><input></div>
  <div class="editable"><input></div>
  <div class="editable"><input></div>
</form>
</body>
</html>

...keine Schleife, einfach den Klassennamen des gemeinsamen Elternelements ändern...fertsch :)
 
Hi,

ich muss noch einmal diesen Thread aufgreifen.

Mittlerweile nutze ich Zend Framework und suche immernoch eine Lösung um ein Edit-In-Place elegant hinzukriegen.
Bei Facebook habe ich gesehen, die nutzen gar nicht mehr das Edit in Place wie damals, sondern gehen auf eine komplett neue Seite.

Der Nachteil dabei ist, finde ich persönlich, dass man die Auflistung nochmal neu machen muss, und sobei, sobald ein Attribut hinzukommt, 2 Dateien anpassen muss.
// Edit:
Vor allem weil es bei mir nachher 3 unterschiedliche Benutzerformen, die alle ein unterschiedliches Profil bekommen. Da wird der Aufwand ja nochmal höher!

Hat schonmal jemand ein Edit-in-Place (auf mehrere Daten) bei Zend umgesetzt?
(So wie bei Facebook, wie wenn man die angelegten Seiten bearbeitet! Also nicht sein eigenes Profil, sondern zum Beispiel wenn man eine Seite für einen Musiker erstellt und diese Daten bearbeitet..)

Gruß und vielen Dank!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück