JavaScript Inhalt einer Textarea per Ajax weiterleiten?

Dsimon24 · 31. Mai 2017

Guten Abend zusammen,

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

HTML:

<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:

HTML:

<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 · 31. Mai 2017

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 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 · 31. Mai 2017

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

Code:

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

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

Nase · 31. Mai 2017

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 · 31. Mai 2017

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

Dsimon24 · 31. Mai 2017

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 · 31. Mai 2017

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

Meffen · 1. Juni 2017

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.

Code:

<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 · 6. Juni 2017

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.

Code:

<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 · 6. Juni 2017

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 · 6. Juni 2017

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

Code:

$(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 · 6. Juni 2017

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 · 12. Juni 2017

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

So was in der Art:

Code:

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

Suche

JavaScript Inhalt einer Textarea per Ajax weiterleiten?

Dsimon24

Lieutenant

0x8100

Admiral

Dsimon24

Lieutenant

Nase

Gast

0x8100

Admiral

Dsimon24

Lieutenant

Nase

Gast

Meffen

Cadet 2nd Year

Dsimon24

Lieutenant

Nase

Gast

kling1

Gast

Teisi

Lt. Junior Grade

Meffen

Cadet 2nd Year

Ähnliche Themen