Netzpiraten

Ein normales HTML Formular kann mit Prototype JS sehr einfach mittels AJAX versendet werden. Dazu wird ganz einfach ein normales Formular erstellt:

<form id="myform" method="post" action="/controller">
   <input type="text" name="firstname" />
   <input type="text" name="lastname" />
   ...
   <input type="button" onclick="sendForm();" value="Versenden"/>
</form>

Nun kann mit relativ wenig Code das Formular versendet werden:

function sendForm() {
   $('myform').request({
      onSuccess: function(transport) {
         ...
      },
      onFailure: function(transport) {
         ...
      }
 });
}

Genau das wollte ich heute mit einem Formular in Radiant CMS machen, welcher ein Mail mit der Mailer-Erweiterung versendet. Damit das ganze noch etwas eleganter daherkommt, wird das Formular in einem Fenster mit Prototype Window dargestellt. Das funktioniert auch wunderbar, doch der obligate Test mit dem verstaubten Internet Explorer war leider einmal mehr nicht erfolgreich. Der Explorer konnte das Fomular nicht fehlerfrei versenden.

Nach einer Analyse der HTTP Anfragen kam zu Tage, dass durch die Darstellung des Formulares in einer Dialogbox (dessen Inhalt selber wiederum mit AJAX geladen wird), die URL zum Mailer-Kontroller einen HTML Anker enthielt:

/pages/25/mailer#mail

Irgendwie kommt der IE mit einem Anker in der Zielurl ganz und gar nicht klar. Nach ein wenig herumexperimentieren blieb mir nichts anderes übrig, als die URL selber aus dem Formular zu holen, den Anker daraus zu entfernen und erst dann das Formular zu versenden:

var url = $('myform').action;
var anchor = url.indexOf('#');
if (anchor != -1) {
   url = url.substring(0, anchor);
}
new Ajax.Request(url , {
   method: 'post',
   parameters: Form.serialize('myform'),
   onSuccess: function(transport) {
      ...
   },
   onFailure: function(transport) {
      ...
   }
});

Wieder einmal mehr wird durch den Explorer ein Stück eleganter Code zu einem komischen Rumgebastel. Internet Explorer - ohne dich würde die Webentwicklung wirklich Spass machen!

Lesezeichen

Als ich auf einem Webinterface die Optionen einer SELECT-Box mittels JavaScript umsortieren musste, dachte ich es gibt im Internet sowieso tausend gute Implementierungen - wieso also selber eine entwicklen? Nach kurzer Zeit wurde ich auch schon auf diversen Seiten fündig, jedoch genügte keines dieser Scripts meinen Anforderungen. Ich benötigte nähmlich eine Version, die mehrere Optionen zusammen um mehrere Positionen verschiebt, und nicht nur um eine Position rauf und runter.

Damit beim Verschieben die Optionen nicht aus der SELECT-Box raus fliegen, musste zuerst eine Funktion zur Überprüfung und Korrektur der Schrittanzahl her:

function checkMoveCount(obj, moveCount) {
   if (moveCount == 0) return;
   if (moveCount > 0) {
      for (var index=obj.options.length-1; index>0; index--) {
         if (obj.options[index].selected) {
            var maxMove = obj.options.length - index - 1;
            if (maxMove < moveCount) {
               moveCount = maxMove;
            }
            break;
            }
         }
      } else {
         for (var index=0; index<obj.options.length-1; index++) {
            if (obj.options[index].selected) {
            var maxMove = index * -1;
               if (maxMove > moveCount) {
                  moveCount = maxMove;
               }
               break;
               }
            }
         }
   return moveCount;
}

Nun kann also die Hauptfunktion für die Umsortierung implementiert werden:

function move(id, moveCount) {
   var obj = document.getElementById(id);
   moveCount = checkMoveCount(obj, moveCount);
   if (moveCount == 0) return;
   if (moveCount > 0) {
      for (var index=obj.options.length-1; index>=0; index--) {
         if (obj.options[index].selected) {
            var toOption = index+moveCount;
            for (var from=index; from<toOption;from++) {
               swapOptions(obj, from, from+1);
            }
         }
      }
   } else {
      for (var index=0; index<=obj.options.length-1; index++) {
         if (obj.options[index].selected) {
            var toOption = index+moveCount;
            for (var from=index; from>toOption; from--) {
               swapOptions(obj, from, from-1);
            }
         }
      }
   }
}

Diese Funktion benötige eine kleine Hilfsfunktion, die das tatsächliche kopieren der Optionen übernimmt:

function swapOptions(obj, from, to) {
   var theOptions = obj.options;
   var isFromSelected = theOptions[from].selected;
   var isToSelected = theOptions[to].selected;
   var tempFrom = new Option(theOptions[from].text, theOptions[from].value,
                             theOptions[from].defaultSelected, theOptions[from].selected);
   var tempTo= new Option(theOptions[to].text, theOptions[to].value,
                          theOptions[to].defaultSelected, theOptions[to].selected);
   theOptions[from] = tempTo;
   theOptions[to] = tempFrom;
   theOptions[from].selected = isToSelected;
   theOptions[to].selected = isFromSelected;
}

Nun können mehrfache Optionen um beliebige Schritte nach oben bzw. unter verschoben werden. Unschön ist, dass die Verarbeitung der Verschiebung nach unter bzw. oben sehr separat gehandhabt werden. Die implementationen sind ähnlich aber halt doch nicht gleich. Eine Variante wäre, die Funktion move() in zweit Funktionen aufzusplitten: moveUp() und moveDown(). Es währe wahscheinlich auch möglich, mit ein paar Tricks beide Varianten in der gleichen Schlaufe abzuarbeiten, ich denke aber dieser Code würde man dann selber in zwei Wochen nicht mehr verstehen.

Das Resultat kann auf der Selectbox Beispiel angeschaut werden.

Lesezeichen