replace zwecks \n

claud^e

Hallo,
mein erster Post im Forum und schon ne Frage
Ich bin dabei, mich in Ajax einzuarbeiten und wollte in dieser Lernphase ein paar Beispielcodes erstellen. Eines der Beispiele war eine "Preview" Funktion, welche auch recht gut funktioniert. Lediglich eines bereitet mir Kopfschmerzen, und nach ueber 2 Stunden googlen, SuFu nutzen, was immer noch nichts gebracht hat, wende ich mich doch an ein Forum.
Das Problem ist folgendes: Ich bringe es irgendwie nicht fertig, einen Zeilenumbruch in der <textarea> im "HTML" Teil durch <br> ersetzen zu lassen. Versucht habe ich es auf verschiedene Art und Weisen, welche ich untern noch erlaeutern werde. Erstmals die beiden Dateien:

index.php

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
  <head>
    <title>Ajax Preview</title>
    <script type="text/javascript">
      var xmlhttp=false;


      if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
       }
    function ggnore(str) {

       return str;
    }
      function ajax_call() {
          xmlhttp.open("GET", 'export.php?text1=' + document.getElementById('text1').value , true);
          xmlhttp.onreadystatechange=function() {
             if (xmlhttp.readyState==4) {
          val = xmlhttp.responseText;  
          val = val.replace(/\r/g, '');      
          val = val.replace(/[^>]\n/g, '<br />');
          val = val.replace(/([^>])\n/g, '$1<br />')
          val = val.replace(/\n*(<(br|p)>)\n*/g, '$1').replace(/\n/g,'<br>');
          document.getElementById('commentPreview').innerHTML = val;
              }
          }
          xmlhttp.send(null)
          return false;
      }



    </script>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
    <form action="" name="submit1">
      <textarea rows="20" cols="40" id="text1" name="text1"></textarea><br /><br />
      <input type="button" value="Preview" onclick="return ajax_call()" />
      <div id="commentPreview">
      <p>
      </p>
      </div>

    </form>
  </body>
</html>

Alles anzeigen

export.php

PHP

<?php
$text = $_GET['text1'];
$text2 = stripslashes($text);
$text3 = str_replace("\n", "<br />", $text2);
echo $text3;
?>

Wie man in der export.php sieht, habe ich schon verschiedenes versucht, aus einem \n ein <br /> zu machen. Auch in der index.php habe ich einige Beispielcodes, die ich ergoogled habe, eingefuegt, aber nichts davon brachte mir das erwuenschte Ergebnis. Einige Tests haben noch Spuren im Quelltext hinterlassen (function ggnore(str) { }), was aber nicht weiter dramatisch sein sollte

Die "eigentliche" Preview Funktion klappt wunderbar, allerdings funktionieren keine Zeilenumbrueche..Warum auch immer

Hat jemand einen Tip fuer mich, wie ich das bestmoeglichst realisieren kann? Ich bin derzeit mit meinem Latein am Ende und schon ziemlich am Verzweifeln.

Ein fettes Danke im Vorraus.

LG,

yuuki.

max_rayman

Suchst du vielleicht das -> nl2br ?

claud^e

Nein, funktioniert auch nicht, hab ich schon versucht.

max_rayman

Was auch evtl. ein Problem sein könnte, dass du den Text via GET übergibst. Da Newlines nur encoded (urlencode) in der URL stehn können musst, du vielleicht ein urldecode oder so machen ?

Probiers mal indem du das Formular via POST retounierst.

claud^e

Ajax erfordert Get, mit Post geht es leider gar nicht

a9bejo

versuche mal statt '\n' die Zeichenfolge '%0D' zu ersetzen. Das ist das HTML encoding fuer carriage return
Du kannst die einzelnen Zeichen nachschauen hier und auch damit herum experimentieren.

Zitat von claud^e

Ajax erfordert Get

Nein. http://www.xul.fr/en-xml-ajax.html#ajax-post.

Was Du da machst, also AJAX Grundlagen lernen, ist natuerlich zu Uebungszwecken und Verstaendnis klasse und sinnvoll.
Aber was Du vielleicht nicht weisst: Fuer den Praxisfall gibt es mittlerweile sehr starke Bibliotheken, die dich von diesem
low-level "request zusammenbauen" befreien. Z.B. prototype.js ist sehr populaer.

jeuneS2

Nachdem '\n' aber newline und nicht carriage return ist, sollte man wenn, dann '%0A' versuchen zu ersetzen.

claud^e

Hey,

ich habe es mal mit

Code

val = val.replace('/%0D/g', '<br />');
val = val.replace('/%0D', '<br />');

versucht, aber das geht immer noch net
das mit den Bibliotheken ist mir klar, aber wie soll mans lernen ohne es zu ueben, und das beispiel ist (eigentlich) recht simpel
/edit
auch

Code

val = val.replace('/%0A', '<br />');
val = val.replace('/%0A/g', '<br />');

bringt mir nichts -_-

Langsam ist es echt nervig

/edit2

Code

val = val.replace('%0A', '<br />');
val = val.replace('%0D', '<br />');

macht mich auch net gluecklich =(

lerod

Entweder versteh i deine Aufgabenstellung falsch oder Du versuchst mittels Ajax was zu laden und in ein textarea zu schreiben, richtig?

Innerhalb einer textarea sind anderwaltige html tags nicht erlaubt und werden dementsprechend ignoriert. Falls du also html tags in einer textarea darstellen willst, dann mußt du sie entsprechend umkodieren.

Desweiteren würd ich prinzipiell nach '\n\r' matchen anstatt nur für eines von beiden.

lg

claud^e

Nein, ich will etwas in eine textarea eintippen, auf den preview button klicken, und dann das resultat unten stehen haben.

Schau's dir einfach an:
http://claude.omg.lu/share/

lerod

Ah oke .. geschnallt.

Anders gefragt, wieso läßt du nicht einmal per alert ausgeben, was du per Ajax bekommst (noch bevor du etwaige Ersetzungen machst)?

LG

Simon

1. Die Ersetzungen sollten in der export.php gemacht werden, per nl2br (also alle replaces weg).
2. Ich persönlich verwende viel lieber POST.
3. Wenn der Submit-Button nicht anders verwendet wird, benutze ein input type="submit" und verwende das onSubmit-Event im form-Tag

claud^e

Zitat von Simon

1. Die Ersetzungen sollten in der export.php gemacht werden, per nl2br (also alle replaces weg).

Schon versucht, hat nix gebracht, aber ich versuchs gleich nochmal.
/Edit:
Funktioniert nicht. In der index.php hab' ich alle JavaScript replace()s weggemacht, in der export.php steht nun folgendes:

PHP

<?php
$text = $_GET['text1'];
echo nl2br($text);
?>

Keine Aenderung

Zitat von Simon

2. Ich persönlich verwende viel lieber POST.

Koennte das die Ursache meines Problems sein? (Also dass ich Get benutze, nicht dass du Post lieber verwendest :p)
/Edit:
Hab jetzt nicht die Zeit das zu testen, koennte mir aber vorstellen dass es daran liegt, dass ich GET ansatt POST benutze. Klingt auf jeden Fall logisch. Sobald ich Zeit habe werde ich es testen ;o))

Zitat von Simon

3. Wenn der Submit-Button nicht anders verwendet wird, benutze ein input type="submit" und verwende das onSubmit-Event im form-Tag

Werd' ich auch gleich versuchen, muss nur zur Arbeit fahren *fg*
/Edit:
Habs mit dem nl2br UND einem <input type="submit"> versucht, und dann im <form> onsubmit="return ajax_call()" eingefuegt - Kein Ergebnis.

Simon

Ich hab's jetzt mit prototype.js gelöst, du kannst es aber einfach auf deine Funktion adaptieren.
Bitte entschuldige die etwas ungute Funktionsnamenwahl, aber mir war fad!

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
  <head>
    <title>Ajax Preview</title>
    <script src="prototype.js" language="JavaScript" type="text/javascript"></script>
    <script type="text/javascript">

      function doSmthngYo() {
        var url = "export.php";
        var param = "text1=" + encodeURI($F('text1'));
        var ajax = new Ajax.Updater(
                    {success: 'commentPreview'},
                    url,
                    {method: 'get', parameters: param, onFailure: doTehError});
      }
      function doTehError(request) {
        $F('commentPreview') = "Error";
      }

    </script>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
    <form>
      <textarea rows="20" cols="40" id="text1" name="text1"></textarea><br /><br />
      <input type="button" value="Preview" onclick="doSmthngYo()" />
      <div id="commentPreview">
      </div>

    </form>
  </body>
</html>

Alles anzeigen

PHP

<?php
echo nl2br(stripslashes($_GET['text1']));
?>

claud^e

Hey super, klappt ganz gut.
Danke dir fuer deine Hilfe /bow
Ich werd mich heute abend mal in den Source Code reinknien und versuchen in zu verstehen, wuenscht mir Glueck

Jetzt mitmachen!