• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. absenden

S

SmileMan2

New member
$("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. absenden

Hallo zusammen,

ich habe ein Problem mit folgendem Formular:

HTML: 
<form method="post" id="eal_el_1" action="">
		<table align="center" style="border: blue 2px solid; border-radius: 2em;" cellpadding="5" cellspacing="5">
			<tr>
				<td align="center" style="font-size: 16px; font-weight: bold; color: #FFFFFF; background: url(images/tablebg_green.png) 50% 50% repeat-x; border-radius: 1em;">
				    Stufe Grün
				</td>
			</tr>
			<tr>
				<td>
					<table>
			    		<tr>
				 			<td colspan="2" align="center">
									<?php
									$sql = "SELECT * FROM alarme WHERE typ='el' AND stufe='1'";
									$result = mysqli_query($db_alarme, $sql) or die("Konnte Daten von Configs nicht auslesen!<br />" .
									    mysqli_error());
									while ($row = mysqli_fetch_array($result)) {
										extract($row);
										$stufe = str_replace($stufe_zahl, $stufe_name, $stufe);
										if ($gutmeldung == "1")
											$gutmeldung = 'checked="ckecked"';
										else
											$gutmeldung = '';
										$al_n = 'al_nachricht'.$id;
										$gm_n = 'gm_nachricht'.$id;
									}
									?>
									<table align="center" cellpadding="5" border="1">
								    <tr style="font-weight: bold;">
								        <td align="center">
								            Stufe
								        </td>
								        <td align="center">
								            Wert
								        </td>
								        <td align="center">
								            Gutmeldung versenden? ... bei: ...
								        </td>
								    </tr>
								    
								    <?php
									echo '
									            <tr>
									                <td align="center">
									                    ' . $stufe . '
									                </td>
									                <td align="center">
									                    <input type="text" name="wert" id="wert" value="' . $wert . '" size="5" style="background-color: #99E4FD; height: 20px;" />   %
									                </td>
									                <td align="center">
									                    <input type="checkbox" name="gutmeldung" id="gutmeldung" style="background-color: #99E4FD;" '.$gutmeldung.' />   <input type="text" name="gutmeldung_wert" id="gutmeldung_wert" value="'.$gutmeldung_wert.'" size="5" style="background-color: #99E4FD; height: 20px;" />   %
									                </td>
									            </tr>';
									?>
								    
									</table>
								</td>
							</tr>
							<tr>
								<td>
								    <table border="1" align="center" cellpadding="5">
								        <tr>
								            <td align="center" style="font-size: 14px; font-weight: bold; color: #FFFFFF; background: url(images/tablebg_blue.png) 50% 50% repeat-x;">
								                Template - Alarmierung
								            </td>
								        </tr>
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Betreff:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <input type="text" name="al_betreff" id="al_betreff" value="<?php echo
								$al_betreff; ?>" size="100" style="background-color: #99E4FD; height: 20px;" />
								            </td>
								        </tr>
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Nachricht:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <textarea name="<?php echo $al_n; ?>" id="<?php echo $al_n; ?>" rows="10" cols="10"><?php echo
								$al_nachricht; ?></textarea>
												<script>
						                		// Replace the <textarea id="nachricht"> with a CKEditor
						                		// instance, using default configuration.
						                			CKEDITOR.replace( '<?php echo $al_n; ?>' );
						            			</script>
								            </td>
								        </tr>
								        
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Verteiler:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <input type="text" name="al_verteiler" id="al_verteiler" value="<?php echo $al_verteiler; ?>" size="100" style="background-color: #99E4FD; height: 20px;" />
								            </td>
								        </tr>
								    </table>
								</td>
								<td>
								    <table border="1" align="center" cellpadding="5">
								        <tr>
								            <td align="center" style="font-size: 14px; font-weight: bold; color: #FFFFFF; background: url(images/tablebg_blue.png) 50% 50% repeat-x;">
								                Template - Gutmeldung
								            </td>
								        </tr>
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Betreff:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <input type="text" name="gm_betreff" id="gm_betreff" value="<?php echo
								$gm_betreff; ?>" size="100" style="background-color: #99E4FD; height: 20px;" />
								            </td>
								        </tr>
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Nachricht:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <textarea name="<?php echo $gm_n; ?>" id="<?php echo $gm_n; ?>" rows="10" cols="10"><?php echo
								$gm_nachricht; ?></textarea>
												<script>
						                		// Replace the <textarea id="nachricht"> with a CKEditor
						                		// instance, using default configuration.
						                			CKEDITOR.replace( '<?php echo $gm_n; ?>' );
						            			</script>
								            </td>
								        </tr>
								        
								        <tr>
								            <td align="center" style="font-weight: bold; background-color: lightgray;">
								                Verteiler:
								            </td>
								        </tr>
								        <tr>
								            <td align="center">
								                <input type="text" name="gm_verteiler" id="gm_verteiler" value="<?php echo $gm_verteiler; ?>" size="100" style="background-color: #99E4FD; height: 20px;" />
								            </td>
								        </tr>
								    </table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td align="center">
						<input type="submit" name="submit" value="Änderungen speichern" />
		                <input type="hidden" name="id" value="<?php echo $id; ?>" />
		                <input type="hidden" name="eal_el" value="1" />
					</td>
				</tr>
			</table>
			</form>

Dieses Formular beinhaltet 2 textareas, die jeweils mit einer CKEditor Instanz ersetzt/ergänzt werden.
Das Formular wird durch eine Javascript Funktion abgesendet. Diese ist:

Code: 
<script type="text/javascript">
      $(document).ready(function(){
        $("#eal_el_1").submit(function(e){
          e.preventDefault();
          $.post("db_save.php",$("#eal_el_1").serialize(),function(msg){
            $("#gespeichert").dialog("open");
            $("#gespeichert").find("#ergebnis").html(msg);
          });
        });
      });
</script>

Wenn man nun in einem oder in beiden Textareas etwas geändert hatte, wird beim ersten absenden, nur der ursprünglich in den beiden Feldern vorhandene Text übermittelt. Erst beim 2. mal absenden, wird der geänderte Text übermittelt.
Alle anderen Eingabefelder und Checkboxen werden einwandfrei übermittelt.

Weiß jemand, woran das liegt und vor allem, wie ich das beheben/korrigieren kann?
 
Zuletzt bearbeitet von einem Moderator:
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

Hast du einen Link, wo wir uns das live ansehen können?
 
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

Nein leider nicht. Das Formular gehört zu einer internen Geschäftswebseite.
 
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

dort wo in der Textaera die id entfernt wird wird auch der Wert des name Attributes entfernt.


PHP: 
<textarea name="<?php echo /*$gm_n;*/?>" id="<?php echo /*$gm_n;*/ ?>" rows="10" cols="10">  <?php echo $gm_nachricht; ?></textarea>
<script>
// instance, using default configuration.
	CKEDITOR.replace( '<?php echo/*$gm_n;*/?>' );
</script>
Hier $gm_n ist auch im name Attribute

mfg
 
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

Daran liegt es leider nicht. Es spielt keine Rolle, ob name und id Attribut gleich benannt sind oder nicht.

In jedem Fall ist es so, dass bei Änderung des Textes im textarea, beim ersten Abesenden noch der ursprüngliche Text übergeben wird. Erst beim 2. Absenden wird der geänbderte Text übergeben.

Dies passiert auch nur, wenn texarea mit einem Editor ersetzt wurde, wie im oberen Beispiel mit dem CKEditor. Das gleiche ist aber auch, wenn ich stattdessen den TinyMCE einsetze. Es liegt also nicht speziell an dem einen Editor, sondern generell an Javascript.

#### EDIT ####
Ich habe festgestellt, dass dieses Problem nur auftritt, wenn ich das Formular mittels der genannten Javascript Funktion absende.
Wenn ich das Formular auf herkömmlichen Wege absende, sodass also nach absenden ein reload geschiet, wird der geänderte Text gleich beim ersten mal korrekt übergeben.

Meine Vermutung, dass es evtl. aufgrund der anweisung "$(document).ready(function()" liegt, mit der der JS Code beginnt, um das Formular abzusenden, hat sich nicht bestätigt. Ich habe zum Test die JS Anweisung umgebaut, sodass sie über das Attribut onsubmit im Form Tag angesprochern wird. Aber auch auf diese Weise besteht das Problem.


Hat jemand evtl. eine Idee, wie ich das Formular per JS absenden kann, ohne dass es zu diesem "Schönheitsfehler" kommt? Natürlich könnte ich auch JS weglassen und das Formular auf herkömmliche Weise absenden. Das ist aber nicht das, was ich möchte. Es soll eigentlich ohne jeglichen Reload laufen.
 
Zuletzt bearbeitet:
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

da du das übertragen der daten selbst im onsubmit vornimmst und der editor im onsubmit seine daten in die textarea zurückspeichert, kommt dein onsubmit vermutlich nach dem editor-onsubmit.
CKEditor 4 Documentation
 
AW: $("#id").serialize() übergibt den Inhalt einer CKEditor Instanz erst beim 2. abse

@tsseh: Perfekt, vielen vielen Dank!!

Dein Link auf die updateElement( ) Funktion vom CKEditor war die Lösung. Ich habe diese Funktion vor meinem $.post gesetzt. Damit wird nun endlich der geänderte Text gleich beim ersten absenden mit übergeben.

Nochmals vielen Dank :-D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben