• Call Ajax Updater in Prototype on Click

    Posted by markzero on Thursday, January 6th, 2011

    Prototype is fantastic Javascript API. With it you can do anything, and I used it in long period and was completely satisfied it. This post will show you how to easily ajax update an element using Prototype. To create an update, all you have to do is to create an instance of Updater like this:

     
      new Ajax.Updater();

    However, that line does nothing by itself, it has to have parameters assigned:

     
    new Ajax.Updater('id', '../updater.php', { method:'get',
      parameters: { name: 'name' , someparameter: 'value' } , function() {}
    });

    First parameter means id of an element whose content will be updated. E.g.

    content

    Second parameter, you can guess, a script which does all the logic to generate the content which goes to the element. Method can be GET or POST. Next are parameter which are formed like: name=name&someparameter=value. Last parameter is a function which is executed after updater finishes the update. It can have it’s own parameters for request data.

    Click event is beyond this post, but this would be done if we want to call updater on a click of a link:

     
    $('link').observe('click',function() {
        new Ajax.Updater('mapdiv', '../mapupdater.php', { method:'get',
            parameters: { name: link.innerHTML , table: aas }
        }); 
    });

    I think all this is pretty cool. Comments down there ↓

    Posted in: Javascript, Prototype JS.

    Share this story:

    One response to “Call Ajax Updater in Prototype on Click”

    1. pinball says:

      You have a very useful site, I have already been here reading for approximately 1 hour. I am a newbie and your success is extremely inspirering to me.

      Report this comment

    Leave a Reply