Mootools, Ajax und Slide Effeckt

Kommentieren Feb 17 2008 .txt, .json, .md

Hier mal mein Beispiel für das Mootool JS Framework und der Verwendung mit AJAX.

Wenn der Ajax Request gesendet wird soll ein schönes “loading” Bildchen erscheinen. Mit Mootools war das nicht gleich klar wie, aber hier ist meine Lösung:

window.addEvent('domready', function() {
    var workingBox = new Fx.Slide('workingBox', {duration:500});
    $('workingBox').setStyle('display','block');
    workingBox.hide();

    document.getElementById('commentForm').addEvent('submit', function(e) {
        // Prevent the submit event
        new Event(e).stop();

        // send takes care of encoding and returns the Ajax instance.
        // this is special. the form needs the request url as action to get this to work
        this.send({ onRequest: function () {
            workingBox.toggle();
        },
        onComplete: function(responseText,responseXML) {
            showResponse(responseText,responseXML);
            workingBox.toggle();
        },
        onFailure: function(){
            alert("fail");
        }
    });
});


function showResponse (originalRequest,responseXML) {
   alert(originalRequest);
   alert(responseXML);
}