textarea transfer iframe

[Alex]

Hallihallo,

ich möchte einen Text aus einer textarea (Hauptseite) in eine andere texarea in ein Iframe übertragen.

Das ist meine Seite zu Ansicht: www.soon-mag.de
Da dann bitte mal auf einer Kategorieseite Artikel auswählen (SELECT). Die Titel füllen sich dabei in die content list (textarea). Nun möchte ich, dass wenn man auf "PRINT" klickt, sich diese aufgeführten Titel in die Mitte (iframe) übertragen.

Geht das mit Javascript? Irgendwas mit parent und transfer???

Sorry, ich bin Grafikdesignerin und Anfängerin in Sachen Scripts.

[kaefer]

Geht das mit Javascript? Irgendwas mit parent und transfer???

klar :)
=>
mit folgendem Code bekommst du den Inhalt des rechten TextArea:

  
var val_textarea = $('#areaID').val();  

den Inhalt vom iframe Textarea bekommst du so:

  
$('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val();  

so, jetzt noch das ganze zusammensetzen und den Inhalt auch in das zweite Feld reinschreiben, komplett fertiger Code:

  
$().ready(function () {  
var val_textarea = $('#areaID').val();  
$('iframe[name="SELFHTML_in_a_box"]').ready(function () {  
  $('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val(val_textarea);  
});  
});  

was hab ich noch geändert? ich warte, bis das document geladen hat (erste Zeile), dann bis das iframe fertig geladen hat (3. zeile) und tausche dann den Inhalt aus.

p.s...ich würde dir empfehlen bei den Textareas das http://de.selfhtml.org/html/formulare/eingabe.htm#nurlesen@title=readonly-Attribut zu setzen.

[Jeena Paradies]

Hallo,

Man sollte noch unbedingt dazu schreiben dass das was du da gepostet hast kein normales JavaScript ist sondern es die Methoden des beliebten Frameworks jQuery nutzt ohne das wird es nur einen Haufen Fehler werfen.

Jeena

[Alex]

Hallo kaefer.erlangen,

deine Antwort scheint mir schonmal super hilfreich und gut nachvollziehbar zu sein. Vielen Dank! Ich habe den Code in den Headbereich der index-Datei wie folgt eingefügt:

<script type="text/javascript">
$().ready(function () {
var val_textarea = $('#areaID').val();
$('iframe[name="SELFHTML_in_a_box"]').ready(function () {
  $('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val(val_textarea);
});
});
 </script>

Die Ansichtstexte aus der areaID2 des iframes habe ich mal rausgelöscht.
Irgendwie funktioniert die Übernahme der Texte aus der content list/textarea in die zweite textarea aber trotzdem noch nicht!
Was habe ich Dummchen denn vergessen?
LG

[kaefer]

Was habe ich Dummchen denn vergessen?

hm, war vlt. bisschen zu einfach gedacht von mir ;)

wenn du deine Seite aufrufst, ist die Box ganz rechts ja schon vorhanden. das JS wird auch sofort ausgeführt und speichert den Inhalt der Box in die Variable....nachdem die Box leer ist, ist die Variable auch leer -.-

ich denke es gibt (mind.) zwei Möglichkeiten:
a) du verschiebst die Speicherung der Variable in den Teil, der prüft, ob das iframe schon geladen ist..also so dann:

  
$().ready(function () {  
  
$('iframe[name="SELFHTML_in_a_box"]').ready(function () {  
   var val_textarea = $('#areaID').val();  
   $('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val(val_textarea);  
});  
});  

b) du machst einen onclick-Handler auf den "Print" Button der das dann erst ausführt, dafür wäre es sinnvoll dem Print Button/Link eine ID zuzuweisen...code:

  
$('#id_des_buttons').click( function () {  
   var val_textarea = $('#areaID').val();  
   $('iframe[name="SELFHTML_in_a_box"]').ready(function () {  
      $('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val(val_textarea);  
   });  
});  

das $().ready kannst du dir in dem Fall sparen, da die Seite ja schon geladen ist, wenn der Button gedrückt werden kann.
Ich denke, das ist auch die sinnvollere/schlauere Lösung, evtl. sogar beides gemischt einsetzen?
--- Die textareas sind übrigens noch immer nicht readonly => ich kann da munter i-was reinschreiben, deswegen meinte ich, dass du das vlt. ändern solltest.

so, ich hoffe jetzt klappts, ansonsten müsste ich mir den Seitenaufbau mal nachbasteln und es konkret austesten.
lg
kaefer

@Jeena: Nachdem auf seiner Seite jQuery schon eingebunden ist, hab ichs stillschweigend einfach verwendet, aber du hast Recht, ein kleiner Hinweis wäre angebracht gewesen.

[Klawischnigg]

Hi there,

das $().ready kannst du dir in dem Fall sparen, da die Seite ja schon geladen ist, wenn der Button gedrückt werden kann.

den ganzen $-Mist kannst Du Dir sparen. Das ist kein Javascript, das ist irgendein jS-Framework, das für die vorgestellte Aufgabe komplett überflüssig ist...

[kaefer]

Klar kann man es auch "normal" lösen, aber wenn jQuery eh schon eingebunden ist und anscheinend gebraucht/verwendet wird?
Ich finds zumindest schicker und schlanker mit jQuery.
Du bist aber herzlichst eingeladen ne konstruktive Lösung anzubieten.

[Klawischnigg]

Hi there,

Klar kann man es auch "normal" lösen, aber wenn jQuery eh schon eingebunden ist und anscheinend gebraucht/verwendet wird?
Ich finds zumindest schicker und schlanker mit jQuery.
Du bist aber herzlichst eingeladen ne konstruktive Lösung anzubieten.

gerne...

[Baba]

Schicke Seite. Hinweise zum Debuggen gewünscht?

Cheers,
Baba

[Alex]

@kaefer: Deine beiden Vorschläge klingen zwar wieder sehr überzeugend, bei mir klappts aber leider immer noch nicht.

Die id für den "Print"-Button habe ich neu in der .css erstellt (#printbutton) und den Namen an den Anfang des js in die Klammer eingetragen. Dem Button habe ich die id zugewiesen und das alte js aus dem Headbereich entfernt. Mrrrmpf.
Hast du vielleicht noch eine Idee?

@ Baba. Danke. Gerne. Aber bitte nicht erschrecken. Diese ist die zweite Website, an der ich rumgecodet habe. Da stecken bestimmt 1000 Fehler drin.
Das Konzept und ein Beispielmagazin erstelle ich für meine Bachelorarbeit im Bereich Grafikdesign. Die Website soll nur der Veranschaulichung für die Präsentation meiner Abschlussarbeit dienen. Also bitte nicht zuviel Mühe machen!

[kaefer]

Hast du vielleicht noch eine Idee?

hm, auf die schnelle? 2 Dinge: a) in der print.html musst du das jquery.js noch einbinden...atm gibts ne schöne Fehlermeldung ;) .. das musst du auf jeden Fall machen, kann sein, dass es dann schon läuft und
b)probier das mal noch aus...(hab selber mit JS nativ in einem Dokument noch nicht so viel gemacht, mehr mit Greasemonkey, wo die Scripte ja immer erst laufen, wenn schon alles geladen ist, kann gut sein, dass es hilft, wenn wir erst warten, bis die Seite vollständig geladen hat + hab die var val_textarea weiter runtergeschoben):

  
$().ready( function () {  
$('#printbutton').click( function () {  
  
   $('iframe[name="SELFHTML_in_a_box"]').ready(function () {  
      var val_textarea = $('#areaID').val();  
      $('iframe[name="SELFHTML_in_a_box"]').contents().find('#areaID2').val(val_textarea);  
   });  
});  
  
});  

wenns nix hilft, "klau" ich mir die Seite morgen/übermorgen mal lokal und bastel dran rum, bis es läuft ;)

»»Diese ist die zweite Website, an der ich rumgecodet habe. Da stecken bestimmt 1000 Fehler drin.

aus Fehlern lernt man ;)

Die Website soll nur der Veranschaulichung für die Präsentation meiner Abschlussarbeit dienen. Also bitte nicht zuviel Mühe machen!

naja, kann man so oder so sehen, außerdem siehe oben..du lernst bestimmt ne Menge dabei. Wenns wirklich gewünscht ist, fällt mir auch noch was auf. MOrgen dann ;)
Schönen Rest-Samstag noch

[kaefer]

Nachtrag:
Ich würde eher dem Link (<a href...) als dem Bild, das den Print-Button einbindet die ID bzw. den OnClick verpassen, ist für mich logischer, du klickst ja auf den Link und möchtest, dass was passiert..und nicht auf das Bild, das Bild dient der Gestaltung des Links.

[Alex]

AAAAAh.

Das muss fast richtig sein. Denn wenn ich jetzt ganz oft auf den "Print"-Button klicke, dann erscheint der Text jeweils gaaanz kurz in der textarea (areaID2).
Wenn der Ladevorgang des Iframes läuft, dann fügt sich der Text also ein. Aber leider verschwindet er auch direkt wieder. Was bedeutet das jetzt?

Vielen herzlichen Dank schonmal für die ganze Mühe. Ich bin echt völlig begeistert von der tollen Einsatzbereitschaft sogar am Wochenende! Respekt!

Morgen früh habe ich einen Termin bis zum Nachmittag. Dann probier ich aber nochmal weiter.

[kaefer]

@ Baba. Danke. Gerne. Aber bitte nicht erschrecken. Diese ist die zweite Website, an der ich rumgecodet habe. Da stecken bestimmt 1000 Fehler drin.
Das Konzept und ein Beispielmagazin erstelle ich für meine Bachelorarbeit im Bereich Grafikdesign. Die Website soll nur der Veranschaulichung für die Präsentation meiner Abschlussarbeit dienen. Also bitte nicht zuviel Mühe machen!

Hab dir mal eine Mail an die auf der Webseite angegebene Adresse geschickt diesbezüglich.

[Klawischnigg]

Hi there,

ich möchte einen Text aus einer textarea (Hauptseite) in eine andere texarea in ein Iframe übertragen.

Das ist im Prinzip ganz einfach. Du musst nur die richtigen Elemente referenzieren und ihnen dann per Javascript "mitteilen", was Du damit machen möchtest.

Übertrag von einem Textarea in ein anderes:

die Funktion uebertrage()

  
  
function uebertrage()  
{  
document.getElementById("TEXTAREA2").value = document.getElementById("TEXTAREA1").value;  
}  

überträgt den Inhalt von Textarea 1 (das hier zur Anschauung die ID "TEXTAREA1" trägt) in Textarea 2 (das hier ebenfalls zur Anschauung die ID "TEXTAREA2" trägt)

Wenn das Zielelement in einem anderen Frame ist, dann musst Du vor document.getElementById... noch den Namen dieses Frames setzen.

Mehr brauchst Du nicht. Ob das in Deiner Seite (in der sich leider viel unnötiger Javascript-Mist befindet) noch möglich ist, musst Du selbst herausfinden...