[Catalyst] AJAXPrototype Questions

[Thomas L. Shinnick]

At 09:28 9/8/2005, Christopher H. Laco wrote:
>Is the AJAX/Prototype stuff in Catalyst GET based only, or can you also specify POST as well?

The underlying Prototype JS code defaults to POST (see prototype.js line ~173.  In order to use GET I had to force that option.  (Which was a mistake cuz the browser cached the answers)

When in doubt I just stuff alert() calls into my copies of the prototype JS code to watch what _really_ happens.  (having done the "export prototype sources" thing to serve the static (and edittable) files - "script/myapp_create.pl Prototype" ?)
  
>While watching the autocomplete movie again, it's apparent that the prototype stuff works cleanly if it's going to it's own url [/autocomplete/suggest]. I'm more interested in retrofitting something with AJAX, rather than it being AJAX only.
>
>Here's a specific example. The Handel::Scaffold code from YAPC has a an action at /cart/update/ to update the quantity of an item in the cart.
>
>If you try to GET that url, nothing happens. You must POST to that url to update an item. The same is true for /cart/delete/. I did that based on the REST-ish ideas that changing data state is best left to POST and never for GET requests.
>
>Now, let's say I want to retrofit prototype on top of the Quantity box in the cart so that it automatically calls /cart/update/ instead of the user having to click the Update button manually when the quantity changes.
>
>In theory, it's just a matter of loading the prototype stuff, and observing the quantity field and sending it to /cart/update/. Of course, if the prototype javascript does a GET, we'll get nowhere. It needs to do a POST.
>
>I guess I'm looking for more detail as to what magic goes on behind the scenes of the prototype stuff.

I have to admit I just skipped the HTML::Prototype API until I learn more about bare prototype.  And so I stuffed nasty code into my TT templates (see below cargo-cult coding).  I really ought to go back and figure out how to do it with HTML::Prototype calls.

function startUploadProgress(form,ajaxURL) {

  // Don't allow page to change when uploading is finished during testing
  //form.target = 'UploadTarget1';

  // Set an initial text for the status until first update occurs
  $('UploadStatusText1').innerHTML = 'Upload starting . . .';
  $('UploadProgressBar1').style.width='0%';

  // Now make the progress bar appear
  new Effect.Appear('UploadStatusDiv1'); 

  // If upload status updater object exists, shutdown that object
  if ( document.uploadStatus1 ) { 
      //alert('Shutting down old uploadStatus1 "'+document.uploadStatus1+'"');    
      document.uploadStatus1.stop(); 
  }

  // Create and start a new repeating updater
  document.uploadStatus1 = 
    new Ajax.PeriodicalUpdater(
      'UploadStatusText1',
      ajaxURL,
      { onComplete: 
          function(request) {
            //alert('PU.onComplete() called "'+request+'"');
            $('UploadStatusText1').innerHTML='Upload finished.';
            $('UploadProgressBar1').style.width='100%';
            document.uploadStatus1 = null; 
            setTimeout( function() { new Effect.Fade( 'UploadStatusDiv1');}, 2000)
          }, 
//      method: 'get',
        evalScripts:true  // allow embedded JS code in return updates
      }.extend( {decay:1.8,frequency:2.0} )
    ); 
          
//return false;
  return true;
}


>Thanks.
>-=Chris