Porting Prototype code to jQuery

Javascript frameworks evolve through time, and some give way to others. This is the case for the Prototype framework, supplanted by jQuery since a few years now.

We will see in that example the differences of calling an ajax function to process a minimalist contact form.
The server-side processing script is named processForm.php. It returns a string starting with either 'ack' when everything went well, or 'err' if an error has been encountered, then a separator (':::'), and the message to display.
The javascript function used here (displayMessage), will display the message according to its type, but it will not be developped further on.

As we want here to highlight the differences and similarities between the two codes, we will not try to write them too specifically to their respective frameworks. The idea is to facilitate the porting of the code from one framework to the other.

Prototype

function sendContactForm(email, subject, message) {
    new Ajax.Request('processForm.php', {
        method: 'post',
        parameters: {
            email: email,
            subject: subject,
            message: message
        },
        onSuccess: function(transport){processSendContactForm(transport.responseText)}
    });
}

function processSendContactForm(response) {
    if (response != '') {
        var tmp = response.split(':::');
        // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
        displayMessage(tmp[0], tmp[1]);
    }
}

jQuery

var sendContactForm;
$(document).ready(function(){
    $(function() {
        sendContactForm = function(email, subject, message) {
            $.ajax({
                type: "POST",
                url: "processForm.php",
                cache: false,
                data: "email=" + email + "&subject=" + subject + "&message=" + message,
                success: function(response){
                    // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
                    displayMessage(tmp[0], tmp[1]);
                }
            });
        }
    });
});

The noteworthy difference between the two implementations is the relative compactness of the jQuery code. Where Prototype needs two functions, one to send the query and the other to process it, jQuery uses only one.

The function sendContactForm is defined as a javascript variable outside of the $(document).ready block as we want to call it directly from the HTML code (e.g.: <form onsubmit="sendContactForm($('#email').val(), $('#subject').val(), $('#message').val())" />).

As shown by this example, porting code from Prototype to jQuery is relatively easy for Ajax functions. It goes about the same for simple display functions with effects handled by Scriptaculous on one side and jQuery on the other.

Portage de code de Prototype à jQuery (in French)
Migración de código Prototype al framework jQuery (in Spanish)
Portabilidade de código Prototype para jQuery (in Portuguese)