The doXHR() function in MochiKit is pretty handy for doing AJAX FORMs. It is a shorthand function for do XMLHttpRequest. Here is some basic usage of doXHR(). I was using this code to save position of a Google Map marker via AJAX POST. The URL called returns a string that gets stuffed into responseText of the result object.

saveMapLocation: function( ) {
  //values that i am passing are latitude and longitude
  var qry = queryString({lat:latitude.value,lon:longitude.value});
  var d = doXHR(url, 
    {
      method:'POST',
      sendContent:qry,
      headers: {"Content-Type":"application/x-www-form-urlencoded"} 
    });
    //this callback fires when the XHR returns successful
    d.addCallback(function (result) 
    { 
      log('save successful');
    });

    //this callback fires when the XHR fails
    d.addErrback( function (result) 
    { 
      log('save failed');
    });

MochiKit Async documentation

MochiKit works well for doing AJAX stuff. Here's a loose idea of how to use it. Please note this illustration does not employ the Mischievous AJAX Method described in a previous post.

First, set up a page/controller/URL that, when accessed, returns a JSON string instead of HTML. To produce the JSON string you probably need a PHP library (or Python or whatever) to turn server-side data into JSON data. I'm not sure how to do that just yet in PHP but I'll tell you later when I figure it out. Once you get the PHP to serve a JSON object, the response string might look like this:

called URL with query params: http://localhost/bookdetails.php?book=[book title]

JSON response string: { 'author':'Mark Twain', 'book':'Tom Sawyer' }

If you go directly to the URL in the exhibit above your browser will probably spit out the JSON response string verbatim as just plain text. Now we look at the MochiKit code.

Take advantage of MochiKit to make your programming easier! MochiKit loadJSONDoc will create the proper URL for you when you pass in dictionaries.

// query arguments

var args = { book:'Tom Sawyer' };

// the url we're going to hit
var url = "http://localhost/bookdetails.php";

// setup a call to the url with its query params
var d = loadJSONDoc(url, args); 

// the function inside will fire when the data comes back
d.addCallback(function (result) { 
    alert(result["author"]); 
   });

In this example the URL that loadJSONDoc calls evaluates out to be "http://localhost/bookdetails.php?book=Tom%20Sawyer"

The d.addCallback attaches a function that will fire once the request completes and the response is back. Notice that the value of result comes back automagically. That means in this example when you see an alert message come back that means the request completed. You decide what you do with success or failure by using addCallback and addErrback. If you want to have success and failure behaviors you can define both using addCallbacks -- notice the pluralization.

OK, I probably did this pretty clumsy-like but I there are some lightbox javascript things out there that piss me off because I have to explicitly click a "close" button to eliminate the lightbox layer. Until now, I haven't been able to think of a good way to close the layer simply by clicking outside of the box.

It seems like a simple problem if you use some combination of mouseover and mouseout or but for some reason Firefox wasn't liking my mouseouts. I'm not trying to mimic a hover like most navigation menus do either. Here is specifically what I hoped to accomplish:

• click on a button to open an absolutely positioned popup layer that holds an AJAX search form
• I can move the mouse anywhere within the layer and click anywhere within that box without closing the layer.
• If I click anywhere on the page OUTSIDE of the popup layer it should close.
• Accomplish this with MochiKit, no pulling stuff from other js libraries.

The link opens a search:

<a onclick="javascript:showSearch(event,'otherbox')">Click me!</a>

This is my theoretical box:

<div id="otherbox">I'm an absolute position DIV layer. should show up wherever. yay!</div>

This is my javascript:

function showSearch(e,id) 
{
    // fade in the 'otherbox' layer
    // take advantage of the afterFinish effect option
    // is necessary because cannot calculate the 
    // dimensions of 'otherbox' unless it's in the DOM
    // i have to use the function () {} in afterfinish
    // because mochikit expects that to be a function. 

    appear(id,{duration:0.2, afterFinish:function () {delayedWindowCloser(id);} });

}

delayedWindowCloser = function (id) {
    //scrub is a custom defined object of my own type
    var scrub = { 
           'id':id,
           'pos':getElementPosition(id) , 
           'dim':getElementDimensions(id) , 
           'calc': function(evt) {
                
             //evt is passed in automagically by browser
                var click = evt.mouse().page;
             //find the bounds of the box
                if (
                    (click.x < this.pos.x) || 
                    (click.x > this.pos.x + this.dim.w) || 
                    (click.y < this.pos.y) || 
                    (click.y > this.pos.y + this.dim.h)
                   ) 
                {
//to get here i must have clicked outside the box boundary
//thus, close the box.
                    fade(this.id,{duration:0.2});
                }
           } 
        };

    //make an 'onclick' event for the browser window.
    //if i click anywhere in the browser it will fire the 
    // 'calc' function defined in my 'scrub' object
    // that i just defined above

    connect(window,'onclick', scrub , 'calc' );
}