JavaScript Inhalt einer Textarea per Ajax weiterleiten?

[Dsimon24]

Guten Abend zusammen,

ich versuche gerade den Inhalt einer Textarea per Ajax
an ein PHP-Script weiterzuleiten - mit folgendem Code:

<textarea class="ckeditor fb" name="editor" id="fbb_1" rows="50" cols="120"></textarea>
<textarea class="ckeditor fb" name="editor" id="fbb_2" rows="50" cols="120"></textarea>
<textarea class="ckeditor fb" name="editor" id="fbb_3" rows="50" cols="120"></textarea>



    <script type="text/javascript">
      $(document).ready(function()
      {
        $(".fb").click(function()
        {
        var ID = $(this).attr('id');
        }).change(function()
        {
        var ID = $(this).attr('id');
        var IID = document.getElementById("iid").value;
        var data=$("#"+ID).val();
        var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

        $.ajax({
        type: "POST",
        url: "kms_fb_db.php",
        data: {
					id: IID,
					field: ID,
					value: data
        },
        cache: false,
        success: function(html)
        {
          alert("Die Bewertung wurde gespeichert!");
        },
        error: function(data)
        {
          alert("Es ist ein Fehler aufgetreten!");
        }
        });
        });
      });
    </script>

Funktioniert allerdings nicht. Bei einem Inputfeld wie folgendes allerdings schon:

<input type="text" class="form-control fb" name="prod" id="prod" value="<?php echo $row['prod']; ?>">

Kann ich die Funktion für Textareas nicht verwenden?

VG, David

 

[0x8100]

<textarea class="ckeditor fb" name="editor" id="fbb_1" rows="50" cols="120"></textarea>
<textarea class="ckeditor fb" name="editor" id="fbb_2" rows="50" cols="120"></textarea>
<textarea class="ckeditor fb" name="editor" id="fbb_3" rows="50" cols="120"></textarea>
 

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".fb")
        .click(function() {
            var ID=$(this).attr('id');

            console.log(ID);
        })
        .change(function() {
            var ID=$(this).attr('id');
            // var IID = document.getElementById("iid").value;
            var data=$(this).val();
            // var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;
        
            console.log(ID, data);

            $.ajax({
                type: "POST",
                url: "kms_fb_db.php",
                data: {
		//	id: IID,
			field: ID,
			value: data
                },
                cache: false,
                success: function(html) {
                  alert("Die Bewertung wurde gespeichert!");
                },
                error: function(data) {
                  alert("Es ist ein Fehler aufgetreten!");
                }
            });
        });
    });
</script>

funktioniert soweit, dein "iid" gibts aber nicht.

 

[Dsimon24]

Sorry, den hab ich vergessen, in den Code-Schnipsel einzusetzen:

<input type="hidden" value="<?php echo $tag ?>" id="iid" />

Das funktioniert mit den Input-Felder soweit ohne Probleme, nur mit der TA nicht :-/

 

[Nase]

Wie oft muss man eigentlich noch sagen, dass "Funktioniert nicht" keine Fehlerbeschreibung ist? Was funktioniert nicht? Das Versenden der Daten? Oder kommt nichts beim Server an?

Du benutzt ja den CKEditor. Solche Editoren blenden üblicherweise die Textarea aus und binden einen eigenen Editor unterhalb der Textarea ein. Weiter schreiben die Editoren den Inhalt dann aber nicht zurück in die Textarea. Das musst du dann entweder selber machen oder du greifst auf die Daten vom dem Editor zurück. Die Funktion dazu müsste dann getData() heißen.

 

[0x8100]

gut, das "iid" input macht ja nun nichts weiter. was geht denn bei dir nicht?

 

[Dsimon24]

Ich erhalte keine Meldung in Form eines Alert-Fensters, dass die Werte
übergeben werden - demnach kommt auch nichts in meinem PHP-Script an.

Ja, ich nutze den Ckeditor.
Wie kann ich denn mittels getData() auf die Daten zugreifen - sorry,
JS ist noch nicht so mein Bereich (lerne ich aber noch fleißig).
Daran wird´s aber, denke ich mal, liegen.

 

[Nase]

Das Handbuch ist immer eine gute, erste Anlaufstelle für sowas: http://docs.ckeditor.com/#!/guide/dev_savedata

 

[Meffen]

Der "change" Event wird möglicher weise nicht bei den Textareas ausgelöst. Der CKEDITOR wird wohl den Inhalt wieder in diese Textareas zurück schreiben, aber das löst dann keinen "change" Event aus.

Wenn du den CKEDITOR abschaltest und dann in den "echten Textareas" rum schreibst geht es dann?

EDIT:
Hier ein Beispiel wie man die Daten beim Ändern im CKEDITOR bekommt:

Die "for" Schleife ist für mehrere CKEDITOR Eingabefelder auf einer Seite.

<script>
    $(document).ready(function () {
        for (var instanceId in CKEDITOR.instances) {
            CKEDITOR.instances[instanceId].on('change', function () {
                console.log('Value: ', this.getData());
                // alert('Value: ' + this.getData());
            });
        }
    });
</script>

EDIT2:
Willst du wirklich bei jedem Tastendruck im Textfeld einen Ajax Request absenden um die Texte zu speichern ?

 

[Dsimon24]

Guten Morgen!

mein Ziel ist es, dass nicht bei jedem Zeichen die Funktion ausgeführt wird, sondern erst,
wenn ich die Textarea bzw. den CKEditor durch einen Klick in einen anderen Bereich 'verlasse'.

Ich versuche nun mittels einem Script und euren Tipps den Inhalt mittels getData() in eine
variable 'data' zu speichern. Diese soll mir dann eine AlertBox ausgeben, wenn ich den
Editor mit einem Klick in einen anderen Bereich verlasse.

Folgenden Code setze ich derzeit dazu ein, leider ohne Funktion.

<textarea class="ckeditor" name="editor" id="fbb_1" rows="50" cols="120"></textarea>

<script type="text/javascript">
	$(document).ready(function()
	{
		$("#fbb_1").click(function()
		{
		var ID = $(this).attr('id');
		}).change(function()
		{
		var ID = $(this).attr('id');
		var data = CKEDITOR.instances.fbb_1.getData();
		alert(data);
		});
	});
</script>

Wahrscheinlich wird einfach nicht erkannt, dass ich ein Event ausführen möchte!?
Vielleicht kann mir einer genauer erklären, ob ich was falsch mache...

 

[Nase]

Die gesamte Prämisse ist falsch. Wenn du deine Textarea nutzt, um diesen CKEditor einzubinden, dann wird die Textarea ausgeblendet und CKEditor fügt einen iframe ein, in dem dann der eigentliche Editor verfügbar ist. Daher "gibt" es dann auch keine Textarea, die man anklicken kann und deswegen wird dein Code da überhaupt nie ausgeführt. Aber grundsätzlich vermute ich, dass du den CKEditor noch nicht einmal richtig eingebunden hast.

 

[kling1]

willst du das jetzt auf dem button oder auf dem change event?

hast das genze ja jetzt nur auf dem change event.. formatiere mal alles richtig.. un würde eher ein console.log statt alert verwenden.. kannst dann das ergebniss in der console sehen.. wenn du einen richtigen webbrowser nutzt und F12 drückst

versuchs mal damit

$(document).ready(function () {
  $("#fbb_1").click(function () {
    var data = CKEDITOR.instances.fbb_1.getData();
    console.log(data);
  }).change(function() {
    var data = CKEDITOR.instances.fbb_1.getData();
    console.log(data);
  });
});

ansonsten läßt sich das ganze auch wunderbar ohne den jquery kram lösen
https://codepen.io/anon/pen/OgVJWv

 

[Teisi]

wenn ich das richt verstanden habe soll beim verlassen des textareas ein event auslösen - das kannst du mit ".on( "focusout", function() {} );" lösen.

 

[Meffen]

Vielleicht kannst du statt "update" den "blur" Event des CKEditors verwenden.

So was in der Art:

$(document).ready(function () {
    CKEDITOR.instances.fbb_1.on('blur', function() {
        var data = CKEDITOR.instances.fbb_1.getData();
        alert(data);
    });
});