Here's how I built my first AJAX widget using Template, Javascript, and CGI::Application. It removes usernames from a list when the user clicks the remove link, without refreshing the page. The hardest part was figuring out how to properly POST using the XmlHttpRequest object. Note that my CGI handler does not return anything in this particular case.

In the template code: 

<script type="text/javascript">
var xmlhttp=false;
/*@cc_on @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
}
function myfunction(username) {
    var params = "rm=remove&username="+username;
    var objectlist = document.getElementById(objectlist);
    // rm is the node we want to remove from the DOM
    var rm = document.getElementById(username);
    // The true attribute means the script continues after
    // the post has been executed
    xmlhttp.open("POST", '/my/runmode/', true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-u
+rlencoded");
    xmlhttp.setRequestHeader("Connection","close");
    // Connection is to be closed after transfer
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            // Delete the html node when request is complete
            rm.parentNode.removeChild(rm);
        }
    }
    xmlhttp.send(params);
}
</script>
<ul id="objectlist">
[% FOREACH object = objects %]
  <p id="[% object.username %]">[% object.username %] -
    <a href="#" 
      onclick="myfunction('[% object.username %]');">   
    remove</a>
  </p>
[% END %]
</ul>

[download]

Meanwhile in my CGI::App handler...

sub setup {
    my $self = shift;
    $self->start_mode('default');
    $self->run_modes( [ qw( default remove ) ] );
}

sub remove {
    my $self = shift;
    my $user =
    My::User->retrieve(
        username => $self->query->param('username')
    );
    $user->delete;
}

[download]

In reply to Re: AJAX and Perl-based web applications by redhotpenguin
in thread AJAX and Perl-based web applications by srdst13

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.