Formular absenden und anschließend Element neu laden?!

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:

Code:

<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

Code:

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

Code:

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

    include "default.php";

    break;

default.php

Code:

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

Code:

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

Formular absenden und anschließend Element neu laden?!

Grunge

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Grunge

Erfahrenes Mitglied

Neue Beiträge