UNSER BLOG

WordPress enthält im Rahmen einer Standardinstallation keine Ajax-Versandmethode für Blogkommentare. Wie man dies mittels Modul erreicht und diese Funktionalitäten noch verbessert, wird hier beschrieben.

Die Problemstellung

Beim Erstellen eines Kommentares wird der Inhalt der Formularfelder an wp-comments-post.php über die Methode post versandt. Die Überprüfung der Eingaben geschieht hier und die entsprechenden Meldungen erscheinen dann auch auf dieser Seite.

Das kann dann so aussehen: FEHLER: Bitte fülle die erforderlichen Felder aus (Name, E-Mail-Adresse).

Man wird nach dem Versenden eines Kommentares von der eigentlichen Blog-Seite umgeleitet und muss mittels Browserbutton „Back“ wieder zur Ursprungsseite zurücknavigieren. Mittels AJAX kann dem Abhilfe verschafft werden. Der Kommentar wird versandt ohne auf eine andere Seite umgeleitet zu werden. Um diese Funktionalität in WordPress zu integrieren, gibt es einige wenige Plug-ins.

In diesem Beitrag wird auf das Plug-in WP-Comment-Master eingegangen. Nach der üblichen Installation und Aktivierung ist das Versenden von Kommentaren via AJAX schon nutzbar und eine Paginierung ist auch gleich mit dabei. Nur noch die Abfolge der Reihung der Kommentare in den WordPress-Einstellungen ändern – damit die aktuellsten Kommentare immer oben aufgelistet werden – und schon ist alles fertig.

Nach den ersten Test stellt man allerdings fest, dass ein lästiger 500 Internal Server Error nach einem Klick auf den Absenden-Button auftrittt solange das Formular leer ist. Was hat es damit auf sich? Nun, primär fällt dieser Fehler nur auf wenn man die Serverrückmeldung protokolliert, indem z.B. Entwicklertools im Browser installiert werden. Checkt man die Serverkommunikation, stellt man fest, dass das Plug-in keine Validierung der versandeten Inhalte vornimmt. Das Formular wird auch ohne Inhalt versandt und die Datei wp-comments-post.php übernimmt die Validierung, die demnach fehlschlägt. Es wird also ein Fehler rückgemeldet – eben dieser interne Serverfehler („NetworkError: 500 Internal Server Error – http://[server]/wp-comments-post.php“).

Ein möglicher Lösungsansatz

Man könnte dies eigentlich ignorieren, da wir hier mit dem WordPress-Standard zu tun haben. Wen dies aber dennoch stört, der kann dieses Problem wie folgt lösen. Zuerst sollte man wissen, dass dieses Plug-in keine Validierung vor Versand vornimmt und dann den Status 500 der Serverrückmeldung bzw. die zurückgesandte Fehlermeldung übernimmt um den Besuvher auf einen Fehler aufmerksam zu machen.

Öffnet man das Scriptfile findet man die entsprechende Codezeile in der jQuery-Submit-Funktion:

error:function(xhr){
  if(xhr.status==500){
  $message.empty().append(xhr.responseText.split('<p>')[1].split('</p>')[0]);
  }
}

In der If-Abfrage wird der AJAX-Status abgefragt. Ist dieser 500, wird die Fehlermeldung in den Message-Container geschrieben. Wir müssen also die gesamte Funktion umschreiben und einige weitere Funktionen bzw. Abfragen ergänzen. Was wir benötigen sind folgende Funktionalitäten um eine Validierung zu ergänzen:

  • Abfrage ob ein User eingeloggt ist
  • Validierung der Formularfelder
  • Ausgabe einer Entsprechenden Rückmeldung
  • AJAX-Formularversand mittels jQuery

Abfrage ob ein User eingeloggt ist

Da wir uns hier auf Javascript-Ebene befinden, ist es am praktischten nach dem Vorhandensein eines E-Mail-Feldes abzufragen. Dieses fehlt im Formular wenn ein User eingeloggt ist.

var logedin = true;
if (document.getElementById("email")) {
   logedin = false;
   var validmail = commentform.find('input[name=email]').val();
}

Zuerst kreiren wir eine Variable logedin die wir true setzen. Der Wert wird mit false überschrieben wenn document.getElementById("email") wahr ist. Den Inhalt des Feldes schreiben wir dann gleich in die Variable validmail.

Validierung

Primär wollen wir verhindern, dass das Formular leer versandt wird und es soll überprüft werden ob die E-Mail-Adresse gültig ist.

if(logedin) {
   if(commentform.find('textarea[name=comment]').val() == "") empty = true;
   }	else {
   if(commentform.find('textarea[name=comment]').val() == "" || commentform.find('input[name=author]').val() == "" || commentform.find('input[name=email]').val() == "" || validmail == false) empty = true;
}

Wenn wir eingeloggt sind, darf das Kommentarfeld nicht leer sein, falls doch, wird die Variable empty mit true versehen. Sinngemäß gilt dies für die übrigen Felder wenn kein User eingeloggt ist.

Ob die Mailadresse korrekt ist überprüft folgendes Script:

function checkEmail(inputvalue){ 
 var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
 if(pattern.test(inputvalue)){ 
   return true; 
 }else{ 
   return false; 
 }
}

Aufgerufen wird diese Funktion mittels checkEmail(commentform.find('input[name=email]').val());

Wir ändern unsere oben geschriebenenen Zeilen in:

var logedin = true;
   if (document.getElementById("email")) {
   logedin = false;
   var validmail = checkEmail(commentform.find('input[name=email]').val());
}

Die Variable validmail wird somit mit true (wahr) oder false (falsch) befüllt. Diese Eigenschaft fragen wir bei der Validierung per if-Funktion ab.

All dies packen wir letztendlich in die modifizierte Submit-Funktion:

jQuery('document').ready(function($){
   var commentform=$('#commentform'); // find the comment form
   commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
   var statusdiv=$('#comment-status'); // define the infopanel
   
   commentform.submit(function(){
   var empty = false;
   var logedin = true;
   if (document.getElementById("email")) {
   logedin = false;
   var validmail = checkEmail(commentform.find('input[name=email]').val());
   }
   //serialize and store form data in a variable
   var formdata=commentform.serialize();
   //Add a status message
   //statusdiv.html('<p>Bearbeitung ...</p>');
   $loading.append('<img src="'+yjlSettings.gifUrl+'" alt="processing...">');
   //Extract action URL from commentform
   var formurl=commentform.attr('action');
   //Post Form with data
   if(logedin) {
   if(commentform.find('textarea[name=comment]').val() == "") empty = true;
   }	else {
   if(commentform.find('textarea[name=comment]').val() == "" || commentform.find('input[name=author]').val() == "" || commentform.find('input[name=email]').val() == "" || validmail == false) empty = true;
   }

   if(!empty) {
   $.ajax({
   type: 'post',
   url: formurl,
   data: formdata,
   error: function(XMLHttpRequest, textStatus, errorThrown){
   $loading.empty();
   $message.empty().addClass('error').append(errortext).fadeIn('slow').delay(3000).fadeOut('slow');
   },
   success:function(data){
   $loading.empty(); //Loading-Message löschen
   $message.empty().removeClass('error').append((yjlSettings.thank!=''?yjlSettings.thank:'Thank you for your comment!')).fadeIn('slow').delay(3000).fadeOut('slow');
   $newComList=jQuery(data).find('.commentlist');
   if(totalCom>0){
   if($reply)$cancel.trigger('click');
   else {
   if(yjlSettings.order=='desc')currentPage=0;
   else { getTotal($newComList);currentPage=totalPage-1;}
   }
   if(yjlSettings.pagination=='disable' || yjlSettings.pagerPos=='after')
   $commentlist.prev().replaceWith($newComList.prev());
   else $commentlist.prev().prev().replaceWith($newComList.prev()); 
   $commentlist.replaceWith($newComList); 
   }else{
   if(yjlSettings.repForm=='disable')$newComList.prev().andSelf().insertBefore($respond);
   else $newComList.prev().andSelf().insertAfter($respond);
   }
   $commentlist=$newComList;
   if(yjlSettings.pagination!='disable')pagination();
   $textarea.val(''); //Löschen der Felder
   $name.val('');
   $mail.val('');
   $url.val('');
   }
   });
   return false;
   } //End if 
   else { 
   $loading.empty();
   $message.empty().addClass('error').append(errortext).fadeIn('slow').delay(3000).fadeOut('slow');
   return false;
   }
   
   });
   
   });
}

Die Errorfunktion ist natürlich ebenfalls umgebaut worden zu:

error: function(XMLHttpRequest, textStatus, errorThrown) {
  $loading.empty();  
  $message.empty().addClass('error').append(errortext).fadeIn('slow').delay(3000).fadeOut('slow');
},

Einige weitere Änderungen sind hier noch zusätzlich eingeflossen. Eine kurze Auflistung:

Die Funktion zur Überprüfung der Mail-Adresse steht außerhalb der jQuery('document').ready(function(). Einige Message-Container wurden definiert:

var $loading=jQuery('<span class="yjl-loading"></span>').appendTo(".form-submit");
var $message=jQuery('<div class="yjl-message"></div>').appendTo("#commentform");

Diese Container werden dann je nach Status mit Inhalt gefüllt:

$loading.append('<img src="'+yjlSettings.gifUrl+'" alt="processing...">');
var errortext = '<p class="wdpajax-error">Die Eingabefelder dürften nicht vollstängig ausgefüllt sein. Bitte überprüfen Sie Ihre Eingaben!</p>';

Zum Schluss werden nach erfolgreichem Versand noch alle Feldinhalte gelöscht. Die Variablen werden am Kopf des Scriptes definiert:

var $textarea=$respond.find('#comment'); //Definition
$textarea.val(''); //Löschen der Inhalte

Ansonsten blieb das Script weitgehendst unverändert. Alle Änderungen sind in der Datei cm.js vorgenommen worden. Die Styles befinden sich in der Datei cm.css.

Das Ergebnis

Das Formular wird nicht mehr leer versandt sondern nur dann, wenn Inhalte und eine korrekte Mail eingegeben wurden. Damit kommt es zu keinem 500 Serverfehler mehr. Eine Fehlermeldung wird per Javascript für paar Sekunden eingeblendet und der Besucher kann die Inhalte korrigieren. Nach dem Versenden bleibt man auf der Blogseite.

Kommentare ( 2 )

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht publiziert. Erforderliche Felder sind gekennzeichnet. *

%d Bloggern gefällt das: