Question

I have found the following script which is apparently written using the javascript framework prototype.

Event.observe(window, 'load', function() {

    Event.observe( 'btnSubmit', 'click', purchaseCD);

    connectToServer();
});

function connectToServer()
{
    new Ajax.Updater(
        { success: 'CD Count', failure: 'errors' },
        'server_side.php',
        {
            method:     'get',
            onSuccess:  function(transport)
            {
                if (parseInt(transport.responseText)) connectToServer();
            }
    });
}

function purchaseCD()
{
    new Ajax.Updater(
        { success: 'CD Count', failure: 'errors' },
        'server_side.php',
        {
            method:     'get',
            parameters: { num: $('txtQty').getValue() }
    });
}

Is anyone here able to convert this script to use jQuery instead of prototype? I don’t know prorotype at all so I don’t understand it.

Answer 1

Ajax.Updater takes, as parameter 1, two containers into which it will update the successful or failed response of a request to the URL given in parameter 2.

What this script does is that upon page load (I translated it below to DOMReady which is not exactly the same, but jQuery convention) an AJAX request is sent to server_side.php. If it gets a response that it understands, it immediately sends off another request, in order to keep the session alive.

This looks like a terrible design. If you’re going to do something like that, you definitely want a timeout between the requests.

Another thing that’s not very neat with this script is that every AJAX request is handled by the same page – server_side.php – relying on different parameters for instructions on what action to perform. It would appear cleaner to simply request different pages for different actions.

$(function() {
    $('#btnSubmit').click(purchaseCD);
    connectToServer();
});

function connectToServer() {
    $.ajax({
        url: "server_side.php",
        success: function(res) {
            $('#CD Count').html(res);
            if(parseInt(res))
                connectToServer();
        },
        error: function(xhr) {
            $('#errors').html(xhr.responseText);
        }
    });
}

function purchaseCD() {
    $.ajax({
        url: "server_side.php",
        success: function(res) {
            $('#CD Count').html(res);
        },
        data: { num: $('#txtQty').val() },
        error: function(xhr) {
            $('#errors').html(xhr.responseText);
        }
    });
}