Using CGI::Ajax From Modperl - Sort of

CGI::Ajax is a very useful module for quickly adding AJAX to an existing page. But what if that page is created using Template::Toolkit and ModPerl? Then its not quite so easy. Here is what I did.

The Problem

On the McMurray Hatchery website, almost all of the pages are mostly static. They are built using Template::Toolkit and are updated whenever something on the page changes. This allows us to serve the pages very fast with very little overhead. The problem is that we wanted to add up-to-date information on the availabilty of the birds to each of the product pages. For example look at the Barred Rocks product page. Because we are dealing with a live, perishable product, we only have so many available for any one hatch. As they sell out - we need to be able to tell the website user what is and isn't available in real time. To do this without AJAX would mean regenerating the page for each page view - or at least regenerating each time the data was out-of-date. Because of the complexity of regenerating the page on demand, we looked for a quick AJAX solution. So now - the page is static as before, but the availability block

is updated in real time.

I first installed CGI::Ajax from CPAN. No problems there. I took the first sample demo program from the CGI::Ajax website and installed it. This got my feet wet. Now I had to decide what I wanted the AJAX to do. I decided that it would return the table seen above formatted for display. I modified the demo program to output what I wanted by hard coding some values into the cgi script. I then took a static version of the page and added

            <tr>
              <td>lt;td>
              <td colspan=2>lt;span class="arial12bc">Availability<span>
                <div id='show_avail' >lt;div>
              <td>
            <tr>

at the place I wanted the availabilty table to show. After modifying the CGI script to read in a file, I almost had what I wanted. You see, CGI::Ajax looks at the html and adds in the javascript between the begin and close head tags. The page has a popup that is created with javascript and has what looks like is a begin and close head tagset - but it isn't the right place to put the AJAX javascript. I deleted that functionality from the page - just to get it working. This showed me that I would not be able to use CGI::Ajax to generate the static pages.

Next I needed to build the availability table in realtime - pulling the values from the database. The CPAN documentation shows a 4 URL/Outside Script CGI::Ajax example. I changed my CGI script to do this. Now instead of the CGI script being called, I was calling an external url. I called it api.html . I did this rather than build a separate page for the availability table - so that I can keep all the functions in one place. I wrote a modperl handler to take care of api.html.

All that remained was to take the CGI::Ajax generated javascript and add it to the appropriate place in the template. I added a 'addLoadEvent' function so that the when the page loads, the javascript calls the get_avail function and the AJAX happens and the table is populated.

ToDo

(There's always more todo). I now need to modify the page to detect that javascript is off and add if it is - gracefully degrade. I think that in the case of no javascript - that I would show a link that could be clicked on to show the current availability. Maybe that could be the default text in the show_avail div.