Ajax Problem mit TinyMCE

Hallo!

Seit geraumer Zeit stehe ich hier vor einem Problem, dass ich anscheinend nicht selbst lösen kann. Ich habe ein Formular in dessen Textfeld ich im Nachhinein per Javascript den Editor laden kann. Mache ich dies, wird der Inhalt aber nicht mehr übergeben. Lasse ich es sein, geht das. Also was ich meine ist dies:

Formular:

HTML:
<a href="javascript:load_tinymce();">Load TinyMCE</a>

<form id="insert_content" method="post" action="javascript:form_submit();">

<p>Überschrift Deutsch: <input id="caption_de" type="text"></p>
<p>Überschrift Englisch: <input id="caption_en" type="text"></p>


DER Inhalt AUF DEUTSCH!
<textarea id="content_de" name="content_de" style="width:100%">
</textarea>

<br />
<input id="new_content" type="submit" value="TEST">

</form>
Das Javascript dazu:

Code:
//BEGINN TINYMCE
function load_tinymce() {
    tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    file_browser_callback : "tinyBrowser",
    language : "de",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",
     

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",

 

    // Replace values for the template plugin

        template_replace_values : {

        username : "Some User",

        staffid : "991234"

        }

    });
}
//////////// ENDE TINYMCE



//BEGINN DES AJAX POSTENS
$(document).ready(function(){  
     $("form#insert_content").submit(function() {  
     
     // deactivate submit button
     $("#new_content").attr("disabled","disabled");
     $("#insert_content").hide();
     $("#working").show();
     
     // we want to store the values from the form input box, then send via ajax below  
     var caption_de     = $('#caption_de').attr('value');  
     var caption_en     = $('#caption_en').attr('value');
     var text_de        = $('#content_de').attr('value');
         
     $.ajax({  
             type: "POST",
             url: "ajax/new_content_CHECK.php",
             data: "caption_de="+ caption_de +"&caption_en="+ caption_en +"&text_de="+ text_de,
             success: function(msg) {
                    if(msg == 1) {
                        $("#php_error").hide();
                        senddata(text_de, caption_de, caption_en);
                    } else {
                        $("#php_error").html(msg); // Fehlermeldung anzeigen lassen
                        $("#php_error").show();
                        
                        
                        $("#new_content").removeAttr("disabled");
                        $("#working").hide();
                        $("#insert_content").show();
                        $("#info_bad").html('ERROR');
                        $("#info_bad").slideDown();
                        setTimeout('hideinfo_bad()', 3000);    
                    }
                }
         });
         
     return false;
     })  
});  



function senddata(text, name_de, name_en) {
         $.ajax({  
             type: "POST",
             url: "ajax/new_content_insert.php",  
             data: "caption_de="+ name_de +"&caption_en="+ name_en +"&text_de="+ text,
         });
         
         $("#working").hide();
         $("#success").fadeIn();
         $("#info_good").html("Alles in Ordnung");
         $("#info_good").slideDown(1000),
         setTimeout('hideinfo_good()', 3000);
}


 function form_submit() {

 }

 
</script>
Ich benutze JQuery um den Inhalt per Ajax erst an die new_Content_CHECK.php zu übergeben welche alles auf Richtigkeit überprüft (fragt mich nicht warum :) aber ich finde es angenehmer Benutzereingaben in PHP zu überprüfen). Falls die Antwort dieser Datei nur "1" ist (was es im Moment zu Testzwecken durch ein simples "echo 1"; immer ist), geht es weiter mit der Funktion senddata. Die speichert die Daten dann in meine MySQL Datenbank.

Das ganze Ajax ansich funktioniert wunderbar (danke hier an das jQuery Team :) ) ABER sobald, ich auf den Link "LoadTinyMCE" klicke um den Editor zu laden wird dessen inhalt dann nicht mehr weitergegeben. In der Datenbank landen dann nur noch die Werte für "caption_de" und "caption_en".

Gerade habe ich auch versucht den Editor nicht im nachhinein zu laden, sondern direkt so anzubieten. Auch dann werden die Daten im Textfeld "vergessen".

Ich weiß das ist jetzt recht viel Text gewesen :D, aber womöglich hat einer von euch ne Idee?


Vielen Dank,
Maulwurf

EDIT: OK, jetzt bin ich komplett weg????

Ich habe nocheinmal alles ausprobiert und jetzt erscheint in der Datenbank bei "content_de" immer "undefined", wenn ich den Editor benutze. Sobald ich Sonderzeichen wie "&" versuche zu speichern geht es nicht mehr - so wie bei Umlauten.

ABER im moment speicher ich die Informationen mit folgendem PHP-Skript:

(ich weiß: unsicher.... aber ist ja alles im moment nur in der fehlerfindung)
PHP:
# // CLIENT INFORMATION  
     $caption_de        = $_POST["caption_de"];  
     $caption_en        = $_POST["caption_en"]; 
     $text_de           = $_POST["text_de"];
	 

	 
$columns = array("text_de", "caption_de", "caption_en");
$data = array($text_de, $caption_de, $caption_en);
mysql_insert("content_pages", $columns, $data);
Das sollte sich doch im Moment zumindest gänzlich gar nicht um Umlaute scheren???


und die mysql_insert funktion war einer meiner glanzleistungen :)

PHP:
function mysql_insert($row, $column, $set) {
	if(reject_sql($set)) {
		echo $LANG_XSS_WARNING;
		die();
	} else {
		if(is_array($set)) {
			$i = 0;
			while($i < count($set)) {
				$set[$i] = mysql_real_escape_string($set[$i]);  //mysql abfrage sichern
				$i++;
			}
		} else {
			$set = mysql_real_escape_string($set);
		}	
		if(is_array($set)) {
			$sql = "INSERT INTO ".$row." (".$column[0]."";
			$i = 1;
			while($i < count($set)) {
				$sql = $sql.", ".$column[$i]."";
				$i++;
			}
			$sql = $sql.") VALUES ('".$set[0]."'";
			$i = 1;
			while($i < count($set)) {
				$sql = $sql.", '".$set[$i]."'";
				$i++;
			}
			$sql = $sql.")";
		} else {
			$sql = "INSERT INTO ".$row." (".$column.") VALUES ('".$set."')";
		}
		
		$db = mysql_query($sql);
		return $db;
	}
}
 
Zuletzt bearbeitet:
Könnte es vielleicht daran liegen?

Code:
var text_de = $('#content_de').attr('value');

Falls jquery hier ein Attribut mit dem Namen Value sucht, scheitert dass natürlich daran, dass Textareas kein value-Attr haben.

Probier es mal so:

Code:
var text_de = $('#content_de').val();
//oder
var text_de = $('#content_de').value();

Kenn mich mit JQuery nicht wirklich aus, deshalb musst mal gucken wie man den Value eines Input/Textarea abruft.
 
Könnte es vielleicht daran liegen?

Code:
var text_de = $('#content_de').val();
//oder
var text_de = $('#content_de').value();

Ich habe meinen Beitrag oben editiert, da es bei "normalen text" ohne jegliche Umlaute und sonderzeichen funktioniert. Dennoch habe ich deine zwei Versionen überprüft. Das zweite geht genauso, das erste nicht.

ABER wo ist mein Fehler, dass keine Sonderzeichen übernommen werden? Ist das ein Javascript Problem oder liegt es in meiner php implementierung?

Denn wenn ich "ä" wegen dem "&" nicht abspeichern kann, oder aber jegliche anführungsstriche "" abgewiesen werden, bringt der ganze tinymce aufbaue nichts.

Anscheinend hatte ich beim testen immer quer über die tastatur gelangt und somit immer gleich sonderzeichen getestet :rolleyes:

Maulwurf
 
Ich habe nocheinmal alles ausprobiert und jetzt erscheint in der Datenbank bei "content_de" immer "undefined", wenn ich den Editor benutze. Sobald ich Sonderzeichen wie "&" versuche zu speichern geht es nicht mehr - so wie bei Umlauten.

Ein "undefined" kommt von Javascript, ich würde mal testen was bei Deinen Ajax-Requests übergeben wird.

Und das ganze vielleicht per POST senden, Du musst dann natürlich folgendes mit Deiner Form machen $(formname).serialize(). Den serialisierten String übergibst Du dann einfach als data.

Ach ja, und es würde auch noch die Funktionen encodeURIComponent und encodeURI geben.
 
Ok, heute morgen bin ich ein ganzes Stück weiter, aber perfekt ist es noch nicht :wink:

Der Tipp mit encodeURIComponent war sehr gut, danke dafür. Ich verschlüssele damit meine Daten und Sonderzeichen wie "&" etc. werden nun korrekt übertragen.
Zusätzlich benutze ich php-Seitig folgenden Code:

PHP:
function correct_str($myString) {
$myString=ereg_replace(chr(0xc3).chr(0xa4),'ä',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x84),'Ä',$myString);
$myString=ereg_replace(chr(0xc3).chr(0xb6),'ö',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x96),'Ö',$myString);
$myString=ereg_replace(chr(0xc3).chr(0xbc),'ü',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x9c),'Ü',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x9f),'ß',$myString);
return $myString;
}

um aus dem vom Javascript übergebenen String wieder korrekte Umlaute zu generieren. Wenn ich jetzt eine html Tabelle "</>" mit leerzeichen "&;" und umlauten "&;" erstelle und direkt in das Textfeld eintrage wird diese nun komplett per ajax RICHTIG in die Datenbank übertragen :D

ABER... sobald ich per
HTML:
<a href="javascript:load_tinymce()">LoadTinyMCE</a>
wie im ersten Püost beschrieben den Editor lade und in diesem die Tabelle erstelle erscheint wieder ein "undefined" in der Datenbank. Dies geschieht auch nur wenn ich einen Umlaut in den editor eingebe. Wie gesagt... lasse ich den weg, funktioniert alles.

Kennt sich hier noch jemand mit tinymce aus oder weiß woran sich dieser nun stört? Er zeigt mir ja während des editierens alles richtig an :(

Maulwurf
 
Zuletzt bearbeitet:
Also ich habe jetzt mal Deinen Code getestet, und bei mir kommen die Daten einwandfrei an.

Ich benutze auf Client-Seite encodeURIComponent() und auf PHP-Seite urldecode().

Ich würde auf jedenfall mal ein paar Debug Ausgaben einbauen, z.B. vor dem Ajax-Request und vielleicht noch den folgenden Link einfügen.

HTML:
<a href="#" onclick="alert($('#content_de').attr('value'));">Der  Text</a>

Somit kannst Du leicht überprüfen ob die Daten vor dem absenden noch korrekt sind.

Ach ja, ein "undefined" kommt meist davon, wenn versucht wird auf eine Eigenschaft oder ein Attribut eines Elements zuzugreifen welches es nicht gibt.
 
Wunderbar, vielen Dank :D

Jetzt geht es. Es bleibt nur noch eine merkwürdige Sache. In der Datenbank landen nun die Inhalte genauso in html, wie tinymce sie auch erstellt. Dein Tipp mit urlencode und encodeURIComponent waren genau richtig.

Zusätzlich hab ich im Internet noch gefunden, dass ich im Ajax aufruf einmal

tinyMCE.triggerSave();

aufrufen muss, da ich ja den normalen "submit-prozess" umgehe. Während diesem "speichert" tinymce aber erst die Daten, sodass man das manuell aufrufen muss.

Jetzt das merkwürdige, wenn das noch gelöst wird ist es perfekt :).... Ich lade die Seite, geb zig umlaute, sonderzeichen etc ein und speicher - geht :). Wenn ich nun per F5 die Seite neulade und wieder etwas eingebe geht dies auch. ABER wenn ich die Daten absende, dann per ajax eine andere seite lade und anschließend wieder per ajax das formular lade (browser wurde nicht refreshed, aber das ajax- und tinymce-javascript wird neugeladen, da dies in der per ajax geladenen datei ist), erscheint nun "undefined" als text_de, während caption_de normal übertragen wird.
Das verstehe ich nicht?


so sieht das aus

HTML:
<head>
...

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>

    <script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
...
    <script type="text/javascript">

    function ajax_request(id) {
      $('#ajax_content').html('<div align="center"><p><img src="http://www.hackerboard.de/images/ajax-loader.gif" width="220" height="19" /></p></div>');
      $('#ajax_content').load("ajax_content.php?switch="+ id +"");
    }
</script>
...
</head>
<body>
...............
    <!-- Beginn des Contents -->
    <div id="ajax_content">
    Bitte warten, der Content wird geladen
    </div>
    <!-- Ende des Contents -->
..................
</body>
</html>

und das formular was ich reinlade hat das ganze restliche javascript drinnen - es geht ja auch, aber danach muss man die seite neuladen und kann nicht einfach <a href="javascript:ajax_request(FORMULAR)"> neu aufrufen, da sonst "text_de" als "undefined" übergeben wird. Anscheinend muss da irgendwas neu initialisiert werden, aber ich hab keine ahnung was das sein könnte.

Edit: alert(text_de) gibt beim ersten mal auch das richtige "dekodierte" aus, beim zweiten ajax aufruf aber dann auch nur noch "undefined".

Maulwurf
 
Zuletzt bearbeitet:
Das liegt daran, dass man nicht einfach Javascript nachladen kann. Es gibt im Netz ein paar Beispiele wie genau man vorgehen muss.

Es ist überhaupt notwendig, sogar die Javascripts nachzuladen? Warum erstellst Du Dir nicht einfach eine Klassen, welche Du in einem JS-File speicherst und einbindest?

Ajax war eigentlich nicht dafür gedacht, ganze Seiten nachzuladen.
 
Ok, das war zugegebenermaßen ein wenig dumm von mir. Danke für die Hilfe, jetzt geht alles.
Ich verzichte darauf die komplett Seite per Ajax zu laden, sondern gestalte lediglich den Speichervorgang dynamisch.
 
Zurück
Oben