# Formular absenden und anschließend Element neu laden?!



## Grunge (28. August 2015)

Hallo,

ich bin kein Java-Script Experte, deswegen brauch ich mal für ein kleines Problemchen eure Hilfe.

Ich arbeite an einer Kommentierfunktion von Beiträgen. Mit php und mysql wird das ganze geladen und dargestellt. Jetzt soll beim Kommentieren wirklich nur der entsprechende DIV aktualisiert werden, ohne die ganze Seite neu laden zu müssen. Der Kommentar muss natürlich in die Datenbank gespeichert werden, also muss ein Php Script aufgerufen werden.
Also Schrittweise in etwas so:
1. Kommentar schreiben
2.  - " - absenden, Textfelder leeren
3. Via PHP Sript in die Datenbank speichern
4. Reload des DIVs um den Kommentar direkt angezeigt zu bekommen

Ich google seit 2-3 Tagen finde aber keine ansatzweise gute bzw brauchbare Lösung

Danke im Voraus!


----------



## Sempervivum (28. August 2015)

> wirklich nur der entsprechende DIV aktualisiert werden, ohne die ganze Seite neu laden zu müssen.


Bist Du da beim Googeln nicht auf Ajax und jQuery-Load gestoßen? Damit ist beides möglich, ein PHP-Skript zu aktivieren und dessen Ausgabe in ein Div zu speichern. Oder wenn der Kommentar nicht über das Skript laufen muss, kannst Du ihn mit innerHTML bzw. jQuery-text in das Div eintragen.


----------



## Grunge (28. August 2015)

Genau das habe ich gefunden, und das funktioniert auch soweit, nur das aktualisieren der Divs, so dass der entsprechende Inhalt angezeigt wird, funktioniert nicht.
Also, ich erkläre es nochmal etwas genauer:

ich habe eine Div in der man den Kommentar schreiben kann, und eine Div in der die Kommentare ausgegeben werden:


```
<div id="writecomment">
<form action="" id="kommi" name="kommi" >
    <input type="text" class="form-control" id="kommi2" placeholder="..."  name="kommentar"></input>
  <button type="submit" class="btn btn-default" >Post!</button>
</form>
</div>
<div id="comments">
<!-- PHP CODE ZUM LADEN DER CONTENTS -->

</div>
```

Ich schaffe es per Jquery die PHP Datei zu laden, und dadurch den Datenbank Eintrag zu erstellen, aber
1. Cleared er mir das Formular nicht
2. Läd er das Div "comment" nicht neu, so dass der neu geschriebene Kommentar direkt angezeigt wird.
Die jQuery Funktion schaut so aus:


```
<script type="text/javascript">
   $(document).ready(function(){
    $("button").click(function(){
        $("#kommi2").load("kommentieren.php");
    });
});
</script>
```

Hoffe ich konnte nun verdeutlichen wo das eigentliche Problem liegt


----------



## Sempervivum (28. August 2015)

Einiges verstehe ich noch nicht. Du schreibst:


> Ich schaffe es per Jquery die PHP Datei zu laden, und dadurch den Datenbank Eintrag zu erstellen


Ich verstehe nicht, wie der Kommentar zum Skript und in die Datenbank gelangen soll, wenn Du keinen URL-Parameter mit sendest.


----------



## Grunge (29. August 2015)

per $_POST... Das funktioniert, nur das clearen und reloaden eben halt nicht


----------



## Sempervivum (29. August 2015)

OK, aber hier übergibst Du doch keine Daten:

```
$("#kommi2").load("kommentieren.php");
```


----------



## Grunge (29. August 2015)

ahhhhhh das meinst du ja hatte es schon geändert: 


```
$("#kommi2").load("kommentieren.php?kommentar=<?php echo $_POST['kommi2']; ?>");
```


----------



## Sempervivum (29. August 2015)

Und wie kommt der Kommentar nach $_POST['kommi2']? Hast Du noch ein Formular vorgeschaltet?


----------



## Grunge (29. August 2015)

nein?! der kommt aus dem normalen Formular ^^


----------



## SpiceLab (29. August 2015)

Sempervivum hat gesagt.:


> Und wie kommt der Kommentar nach $_POST['kommi2']? Hast Du noch ein Formular vorgeschaltet?





Grunge hat gesagt.:


> nein?! der kommt aus dem normalen Formular ^^


Um die Raterunde nicht unnötig in die Länge zu ziehen, poste bitte mal deinen kompletten aktuellen Code!

Eventuell ist die Seite ja auch für Dritte zugänglich...?!


----------



## Grunge (30. August 2015)

Die Seite läuft lokal auf meinem mac^^
Also habe gestern ein wenig gesucht und eine Lösung gefunden, die auch, in sofern sie nicht in meiner Eigentlichen Seite eingebunden ist auch funktioniert. Die Funktion sieht so aus:


```
<script type="text/javascript">
    var request = null;
// Ajaxfunktion start
    function send() {

        // Request erstellen mit Browserweise Mo/Sa/Op vs. IE
        if (window.XMLHttpRequest) {
            // Mo / Sa / Op
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                // IE 5 und tiefer
                request = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) {
                try {
                    // IE 6 und höher
                    request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }
        // Ist der request wirklich da?
        if (!request) {
            alert("FEHLER! Konnte Request nicht erstellen!");
        return false;
        } else {
            // Im Formular angegebene Datei öffnen, Sendemethode POST, Asynchrone Übertragung
            request.open('post', ajaxform.action, true);
            // Header senden
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // Alle Posts außer dem Sendebutton (letztes Element) in die Variable str schreiben
            str='';
            for (var i = 0; i < ajaxform.elements.length-1; i++) {
                str+=ajaxform.elements[i].name+'='+ajaxform.elements[i].value+'';
                t=i+2;

                if(document.ajaxform.elements[t]) {
                    str+='&';
                }
            }

            // Request senden
            request.send(str);
            // Request verwenden wenn readystate geändert
            request.onreadystatechange = defineRequest;
        }
    }
    // Request auswerten
    function defineRequest() {
        switch (request.readyState) {
            // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
            case 4:
                if (request.status != 200) {
                    alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
                } else {
                    var content = request.responseText;
                    // den Inhalt des Requests in das <div> schreiben
                    document.getElementById('content').innerHTML = content;

                    // Formularfelder vom typ text oder textarea löschen
                    for (var i = 0; i < ajaxform.elements.length-1; i++) {
                        if(ajaxform.elements[i].type=='text' || ajaxform.elements[i].type=='textarea' || ajaxform.elemts[i].type=='hidden') {
                            ajaxform.elements[i].value='';
                        }

                    }
                }
                break;
            default:
                break;
        }
    }
</script>
```
Quelle:http://www.powerdev.de/?p=372

Wie gesagt es funktioniert einwandfrei, doch in meinem Script, welches wie folgt ausschaut, funktioniert es theoretisch auch, aber praktisch eben nicht so wie es soll: Beim Absenden des Kommentarfeldes, wird einfach auf die Seite, die für den DB-Eintrag verantwortlich ist weitergeleitet, obwohl diese ja im Background ausgeführt werden sollte.

Fangen wir an:

In meiner index.php, die im root liegt, wird _POST.php inkludiert, um (siehe unten) die geforderten Seiten zu inokulieren

```
<div class="col-md-3 "><p class="o_navileft">
       Lorem ipsum dolor sit amet, detraxit scripserit in usu, no his impedit suscipit. Graeco vivendum persequeris vel ea, etiam mnesarchum his ad. Nostrum deseruisse mel no, mei reformidans consectetuer ad. Ne usu perfecto tacimates. Eu quaeque maiorum mel, an eos esse principes adipiscing, ei sea enim novum scripta.

Per eligendi intellegam ne, et ignota suavitate definiebas cum. Et vix error oporteat, vix ex integre veritus sensibus, dicat facilisis id eum. Ut dolores facilisi cum, has persius persecuti in, ea mundi oratio eum. Ut pri probo atqui, aeque decore verear te eam, per cu docendi tibique pericula. Quot quando eos cu.

Te malorum salutandi sententiae pro. His vero denique aliquando no. Aeque nemore te mei, an per illum appellantur. Solet singulis ne nec, utamur recusabo ei nec, ea quaestio atomorum eum.

In deserunt quaerendum vis. Cum ad offendit delectus. Vel et nisl voluptaria, debet mundi putant ea nec. Ut scripta delectus deserunt vis, nec an integre adipiscing. Per dolorum mediocrem at, eum in quot iusto adolescens, id legimus vivendo detraxit nec.

Eos ne quaestio eloquentiam interpretaris, an probo labore mei. Ne eos gubergren voluptatibus, cu modo nullam mei. Ad iisque accumsan quo, ius solum quaerendum cu. Eam id eius sanctus, nec ea accusata praesent, ne nostrum apeirian mei. Congue vocent vis cu, graeci sadipscing mei ad.</p>
    
       </div>
       <div class="col-md-9">
    
            <div>
            <?php
            include "php/_POST.php";
}
            ?>
<!-- CONTENT -->
  </div>
```

_POST.php:


```
if(isset($_GET['section'])){
switch($_GET['section']){
.
.
.
// Das ist die Entscheidende Datei, die die "Kommentarfunktion" inkludieren soll
default:

    include "default.php";

    break;
```

default.php


```
<?php include "db.php"; ?>

<div>
<form action="" id="post" name="post" >
  <div class="form-group">
    <label for="text"><?php echo $_SESSION['name']; ?>, teile uns mit, was es neues gibt:</label>
    <textarea class="form-control" id="post" placeholder="..." style="resize:none; height:150px;" name="input1"></textarea>
  </div>
  <button type="submit" class="btn btn-default" onclick="clear()">Post!</button>
</form>
</div>

<div>

  <!-- Tabs-Navs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#start" role="tab" data-toggle="tab">Alle</a></li>
    <li role="presentation"><a href="#profil" role="tab" data-toggle="tab">Freunde</a></li>
    <li role="presentation"><a href="#nachrichten" role="tab" data-toggle="tab">Perfect Match</a></li>
    <li role="presentation"><a href="#einstellungen" role="tab" data-toggle="tab">Meins</a></li>
  </ul>

  <!-- Tab-Inhalte -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade active" id="start"><br>
    <?php

    include "divstart.php";

    ?>
  </div>
    <div role="tabpanel" class="tab-pane fade" id="profil">News und Posts meiner Freunde</div>
    <div role="tabpanel" class="tab-pane fade" id="nachrichten">Perfect Match Ergebnisse</div>
    <div role="tabpanel" class="tab-pane fade" id="einstellungen">Mein persönlicher Stream</div>
  </div>

</div>
```

Und hier haben wir die Datei, die eben halt nicht so funktioniert, wie sie funktionieren soll:
divstart.php

```
<script type="text/javascript">
    var request = null;
// Ajaxfunktion start
    function send() {

        // Request erstellen mit Browserweise Mo/Sa/Op vs. IE
        if (window.XMLHttpRequest) {
            // Mo / Sa / Op
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                // IE 5 und tiefer
                request = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) {
                try {
                    // IE 6 und höher
                    request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }
        // Ist der request wirklich da?
        if (!request) {
            alert("FEHLER! Konnte Request nicht erstellen!");
        return false;
        } else {
            // Im Formular angegebene Datei öffnen, Sendemethode POST, Asynchrone Übertragung
            request.open('post', ajaxform.action, true);
            // Header senden
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // Alle Posts außer dem Sendebutton (letztes Element) in die Variable str schreiben
            str='';
            for (var i = 0; i < ajaxform.elements.length-1; i++) {
                str+=ajaxform.elements[i].name+'='+ajaxform.elements[i].value+'';
                t=i+2;

                if(document.ajaxform.elements[t]) {
                    str+='&';
                }
            }

            // Request senden
            request.send(str);
            // Request verwenden wenn readystate geändert
            request.onreadystatechange = defineRequest;
        }
    }
    // Request auswerten
    function defineRequest() {
        switch (request.readyState) {
            // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
            case 4:
                if (request.status != 200) {
                    alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
                } else {
                    var content = request.responseText;
                    // den Inhalt des Requests in das <div> schreiben
                    document.getElementById('content').innerHTML = content;

                    // Formularfelder vom typ text oder textarea löschen
                    for (var i = 0; i < ajaxform.elements.length-1; i++) {
                        if(ajaxform.elements[i].type=='text' || ajaxform.elements[i].type=='textarea' || ajaxform.elemts[i].type=='hidden') {
                            ajaxform.elements[i].value='';
                        }

                    }
                }
                break;
            default:
                break;
        }
    }
</script>

<?php
include "db.php"; // Datenbank includen

$sql="SELECT * FROM sn_post ORDER BY pos_date DESC LIMIT 100"; //Alle Posts laden LIMIT 100
    $result=$db->query($sql);
    $postzaehler=1; //Postzähler
    while($row=$result->fetch_assoc()){
        $foto="SELECT * FROM sn_users WHERE usr_id='".$row['pos_usr']."'";
        $foto=$db->query($foto);
        $foto=$foto->fetch_assoc();
    
        ?>
        <br>
        <div class="panel panel-info">
    
<div class="panel-heading">
    <h3 class="panel-title">
    <table width="100%" border="0">
  <tr>
    <td align="left" width="50"><img width="40" height="40" src="./img/usr/thumbs/<?php echo $foto['usr_profilbild']; ?>"> </td>
    <td  style="font-size:11px;" valign="top"><?php echo $foto['usr_vorname']." ".$foto['usr_nachname']; ?><br>

    <?php
    include "timestamp.php";

   ?></td>
  </tr>
</table
    ></h3>
  </div>
  <div class="panel-body">
<?php         echo $row['pos_post'];
?>
  </div>
  <!-- Kommentarfunktion - Button -->
  <div align="right" class="panel-footer">
         <a  role="button" data-toggle="collapse" href="#<?php echo $postzaehler; ?>" aria-expanded="false" aria-controls="collapseBeispiel">
    <button type="button" class="btn btn-default" aria-label="Kommentieren" >
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button></a>
<!-- Like - Button -->
  <button type="button" class="btn btn-default" aria-label="Links ausrichten" name="like">
  <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;<span class="badge">42</span>
</button>

<!-- Kommentarfunktion -->
<div class="collapse" id="<?php echo $postzaehler; ?>" >
  <div class="well" style="background-color:#fff;">
    <form method="POST" name="ajaxform" action="php/kommentieren.php" onSubmit="javascript:send(); return false;" >
  <div class="form-group" id="kommentieren">
    <input type="text" class="form-control"  placeholder="..."  name="kommi2"></input>
    <input type="hidden" name="abs" value="<?php echo $_SESSION['id']; ?>">
    <input type="hidden" name="empf" value="<?php echo $foto['usr_id']; ?>">
    <input type="hidden" name="komid" value="<?php echo $row['pos_id']; ?>">
  <button type="submit" class="btn btn-default">Post!</button>
</form>
<hr>
<table class="table table-striped">

<?php
/*Kommentare laden */
$kom="SELECT * FROM sn_post_kommis WHERE kom_id='".$row['pos_id']."' ORDER BY kom_date ASC";
$komr=$db->query($kom);
$anzkom=$komr->num_rows;

if($anzkom > 0) {
while($kom=$komr->fetch_assoc()){
    echo "<div id=\"content\">";
    //User Daten laden
    $usersql="SELECT * FROM sn_users WHERE usr_id='".$kom['kom_abs']."'";
    $user_row=$db->query($usersql);
    $user=$user_row->fetch_assoc();

?>
<tr>
<td width="30px"><img width="30" height="30" src="./img/usr/thumbs/<?php echo $user['usr_profilbild']; ?>">
<button type="submit" class="btn btn-default" onclick="test()">
  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
<td><div style="font-size:9px;"><?php echo $user['usr_vorname']." ".$user['usr_nachname']." schrieb ".datumundzeit($kom['kom_date']).":";?></div>
<hr><?php echo $kom['kom_kommi']; ?></td>
</tr>
<?php echo "</div>";



}
}else{
echo "Keine Kommentare";
}
?>

</table>
  </div>
  </div>
</div>


  </div>
        </div>

    
        <?php
        $postzaehler++;
    }
    ?>
```

hoffe du kannst mir nun weiterhelfen. Ich habe die Vermutung das es etwas damit zu tun hat, das alle meine PHP Dateien im Ordner /php sind bis auf die Index.php

//EDIT: Habe alles in root geschoben, tut sich nichts verändern!
Ich vermute dass er die JS Funktion nicht aufruft, sondern einfach nur die php dabei


----------



## Sempervivum (30. August 2015)

Tut mir Leid, der Code ist mir zu umfangreich und unübersichtlich, um einzusteigen. Zwei Dinge kann ich jedoch sagen:


> Beim Absenden des Kommentarfeldes, wird einfach auf die Seite, die für den DB-Eintrag verantwortlich ist weitergeleitet, obwohl diese ja im Background ausgeführt werden sollte.


Das Aufrufen der Seite im Hintergrund erreichst Du mit Ajax.
Und zu dem Javascript aus http://www.powerdev.de/?p=372: Ich empfehle dir dringend, für Ajax jQuery zu verwenden. Das nimmt einem z. B. das browserspezifische Handling ab und die gesamte Handhabung ist einfacher und übersichtlicher.


----------



## Grunge (31. August 2015)

OK. Vielleicht hilft das weiter:
Die Konsole in Firefox gibt folgendes aus:

TypeError: document.ajaxform.elements is undefined

Anscheinend findet die Funktion nicht mein Formular ..


----------

