javascript frameworks prototype to jquery

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.

David Hedlund · Accepted Answer · 2010-12-20 15:02:15Z

2

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);
        }
    });
}

answered Dec 20, 2010 at 15:02

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oshirowanen Over a year ago

My server has a connection time out of 120 seconds. Is that OK?

David Hedlund Over a year ago

@oshiro: I wasn't commenting on the timeout of the actual request, but rather, the delay between the requests. In the original code, if connectToServer completes as it should, reasonably within a few milliseconds, it will immediately fire another request to connectToServer. This will stress your web server. In the code above, the call to connectToServer after if(parseInt(res)) should be replaced with something like setTimeout(connectToServer, 10000); to only make the call every 10 seconds, rather than several times each second.

Collectives™ on Stack Overflow

javascript frameworks prototype to jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related