Dynamisches Programmieren

[Casabalnca]

Hallo,

ich habe da zwei Probleme. Ich versuche diese verständlich zu erklären:

Es gib eine Layout-Seite, die fast jede Programmiersprache mittlerweile kennt. In diese werden dann partielle Seiten zur Laufzeit hinzugefügt. An das Layout komme ich nicht daran. Alles, was ich programmiere ist also in der partiellen Unterseiten.

Kurzgefasst, es gib in der partielle Seite ein Textfeld und einen Button und Javascript-Code wie z.B. unten:

<div id="myDiv">
   <input typ="text" name="myText" id="textId">
   <input type="button" name="myButton" id="buttonId" >
</div>

<div id="myDialog">
...
</div>

Die partielle Seite kann beliebig oft dupliziert und untereinander in das Layout hinzugefügt werden. Durch den Button geht eine jquery-dialogbox auf,

   dialog = $( "#myDialog" ).dialog({

      open: function() { ... }

   });

   $("#buttonId").button().on("click", function(e) {
   		e.preventDefault();
     	dialog.dialog("open"); 
   });

in der man z.B, einen Text auswählen kann. Nach dem Schließen der dialogbox, wird der ausgewählte Text in der dialogbox im oben genannten Textfeld, myText, eingetragen.

Nun zu meinen Problemen:

1. Wie bereits erwähnt, ich habe u.U. mehrere zur Laufzeit dynamisch in das hinzugefügten partiellen Seiten mit allen Textfeldern und Buttons, die alle über dieselben ids und Namen verfügen. Woher kann man nun das richtige Textfeld zum gedrückten Button finden, in den der Text aus der dialogbox hinzugefügt werden soll?

2. Die partielle Seite verfügt auch über die Jquery-Bereiche, die ich momentan leider nicht auslagern kann. Jedes mal, wenn die partielle Seite ins Layout hinzugefügt wird, damit das Feld und der Button angezeigt werden, wird auch der Jquery-Code mit dupliziert. So gibt es mehrere ähnliche Code-Bereiche auf der Seite, die alle dasselbe tun und treten sich gegenseitig auf die Füße. Gibt es einen Weg, um zu überprüfen, ob der besagte Code-Bereich bereits auf der Seite vorhanden ist, um so ein nochmaliges duplizieren zu verhindern.

Ich weiß, dass dies kein sauberer Programmierstil ist. Ich muss aber leider mit dem, was mir momentan zur Verfügung steht, arbeiten.

Gruß

[Der Martin]

Hi,

Es gib eine Layout-Seite, die fast jede Programmiersprache mittlerweile kennt.

den Satz verstehe ich nicht. Also die einzelnen Wörter schon, aber ich kann keinen Sinn erkennen.

In diese werden dann partielle Seiten zur Laufzeit hinzugefügt. An das Layout komme ich nicht daran. Alles, was ich programmiere ist also in der partiellen Unterseiten.

Das Rahmendokument ist also durch jemand anderen vorgegeben, und du kannst nur ganz bestimmte Bereiche des Inhalts bearbeiten. Ein Redaktionssystem oder sowas?

<div id="myDiv">
   <input typ="text" name="myText" id="textId">
   <input type="button" name="myButton" id="buttonId" >
</div>

<div id="myDialog">
...
</div>

Die partielle Seite kann beliebig oft dupliziert und untereinander in das Layout hinzugefügt werden.

Nein, kann sie nicht. Dann hättest du mehrere Elemente mit derselben ID im Dokument. IDs müssen aber dokumentweit eindeutig, also einzigartig sein. Wenn du doch mehrere gleichartige Elemente benennen musst, würde sich stattdessen eine Klasse anbieten. Aber selbst die ist vielleicht gar nicht nötig (siehe weiter unten).

Außerdem hast du da Formularelemente (input, button). <ins> Nein, du hast gar kein button-Element. Warum eigentlich nicht? Das wäre hier prädestiniert. </ins> Es bietet sich also an, sie nicht in ein nichtssagendes div zu verpacken, sondern in ein form-Element - schon der Semantik wegen, auch wenn du das Formular nicht "klassisch" abschicken willst.

   dialog = $( "#myDialog" ).dialog({

      open: function() { ... }

   });

   $("#buttonId").button().on("click", function(e) {
   		e.preventDefault();
     	dialog.dialog("open"); 
   });

in der man z.B, einen Text auswählen kann. Nach dem Schließen der dialogbox, wird der ausgewählte Text in der dialogbox im oben genannten Textfeld, myText, eingetragen.

Nun zu meinen Problemen:

1. Wie bereits erwähnt, ich habe u.U. mehrere zur Laufzeit dynamisch in das hinzugefügten partiellen Seiten mit allen Textfeldern und Buttons, die alle über dieselben ids und Namen verfügen. Woher kann man nun das richtige Textfeld zum gedrückten Button finden, in den der Text aus der dialogbox hinzugefügt werden soll?

Wenn du ein <form> anstelle des div-Elements nimmst, kannst du dieses komfortabel über die form-Eigenschaft des Buttons ermitteln. Und wenn du das zweite div, das den Dialog bildet, ebenfalls in das Formular steckst, kannst du dieses auch direkt im DOM ermitteln (als Geschwisterelement des Formulars übrigens auch). Ohne Klassen, ohne IDs.

2. Die partielle Seite verfügt auch über die Jquery-Bereiche, die ich momentan leider nicht auslagern kann. Jedes mal, wenn die partielle Seite ins Layout hinzugefügt wird, damit das Feld und der Button angezeigt werden, wird auch der Jquery-Code mit dupliziert.

Das hast du doch in der Hand. Dann füge den Javascript-Code nur beim ersten Mal mit ein, und bei folgenden Blöcken nur den HTML-Code.

Live long and pros healthy,
 Martin

[Casablanca]

Hallo Martin,

danke für deine Antwort.

Ein Layout ist, ein Rahmen, der die partiellen Unterseiten umfasst und verhindert, dass der gleiche Code mehrfach bei allen Seiten wiederholt werden muss. Dies ist besonders bei ASP.NET ausgeprägt.

Der Code, den ich gebracht habe, sollte nur ein Pseudocode sein. Sorry wenn dieser etwas verwirrend ist.

Ein Redaktionssystem oder sowas?

Ja. Ein cms.

du hast gar kein button-Element.

Was meinst du damit. Ist <input type="Button" ... /> kein Buttonelement, oder meinst du da was anderes?

Wenn du ein <form> anstelle des div-Elements nimmst, kannst du dieses komfortabel über die form-Eigenschaft des Buttons ermitteln.

Ein guter Einwand. Ich habe das mit onclick bereits versucht. Irgendwie hat das nicht das gewünschte Ergebnis geliefert.

Das hast du doch in der Hand. Dann füge den Javascript-Code nur beim ersten Mal mit ein, und bei folgenden Blöcken nur den HTML-Code.

Wie denn? Wie kann man zur Laufzeit herausfinden, dass der script-Bereich bereits auf der Seite vorhanden ist?

Gruß

[Der Martin]

Hallo,

Ein Redaktionssystem oder sowas?

Ja. Ein cms.

okay, dann kann ich es mir in etwa vorstellen.

du hast gar kein button-Element.

Was meinst du damit. Ist <input type="Button" ... /> kein Buttonelement, oder meinst du da was anderes?

Ich meinte tatsächlich <button>. Damit bist du mit der Gestaltung wesentlich flexibler als mit einem <input type="button">. Zum Beispiel kann ein <button> auch formatierten Text oder sogar ein Bild als Inhalt haben, ein <input> bestenfalls ein Hintergrundbild (und das nicht sicher, weil das Styling von Formularelementen in manchen Browsern vom Anwender eingeschränkt werden kann).

Rein von der Funktion her ist da allerdings kein Unterschied.

Wenn du ein <form> anstelle des div-Elements nimmst, kannst du dieses komfortabel über die form-Eigenschaft des Buttons ermitteln.

Ein guter Einwand. Ich habe das mit onclick bereits versucht. Irgendwie hat das nicht das gewünschte Ergebnis geliefert.

Naja, der Button braucht in jedem Fall einen click-Handler. Aber den hast du ja schon - wenn auch auf Umwegen über jQuery.

Das hast du doch in der Hand. Dann füge den Javascript-Code nur beim ersten Mal mit ein, und bei folgenden Blöcken nur den HTML-Code.

Wie denn? Wie kann man zur Laufzeit herausfinden, dass der script-Bereich bereits auf der Seite vorhanden ist?

Wieso zur Laufzeit? Ich dachte, du fügst diese Blöcke nach und nach manuell ein. Von "zur Laufzeit" oder "automatisch" war bisher nicht die Rede.

Dann eben anders: Füge als ersten Schritt von Hand einen Block ein, der nur das Script enthält, kein Markup. Dann kannst du in weiteren Schritten Blöcke mit HTML, aber ohne Script einfügen - ganz gleich ob von Hand oder automatisiert.

Live long and pros healthy,
 Martin

[Casablanca]

Hallo Martin,

das mit form-Element ist auch nicht ganz ohne. Nun hat jedes text/button-Block ein Form-Element, das gleich heißt. Bei deinem Beispiellink "Testform". Da hat man wieder eine Menge gleichnamigen Forms. Ich habe so etwas vor langer Zeit objektorientiert und mit einer Klasse realisiert. Wenn ich nicht weiterkomme, muss mich wohl wieder einarbeiten.

Leider kann ich das Script nicht zuerst einfügen. Mir stehen nur eine Seite, mit der ich arbeiten muss. Das heißt, ganz oder gar nicht.

Es gibt ein Button, worauf z.B. "Block Hinzufügen" steht. Jedes mal, wenn du darauf klickst, wird ein text/button-Block (wir nennen es partial.html ohne header und footer) samt Script in die Seite hinzugefügt. Das cms lässt mir leider an dieser Stelle kein Spielraum.

Das mit jquery benötigt anscheinend auch eine Element-Id für den eventlistener.

document.querySelector("#li").addEventListener("click", function() { getValue(this); });

Der Ansatz mit this wäre besser. Da will auch nicht ganz korrekt funktionieren.

Gruß