$.ahm() is a wrapper around $.ajax() that allows back-end code to harness the power of jQuery.


Load jquery-ahm.js:

<script type=''></script>

Add "ahm" class:


Back-end response code:

// ahm.php
echo json_encode(array(
    // the same as alert('hello world');
    '/alert' => 'hello world!'

Response Format

$response = array(
    "$selector/$callback" => "$params",
    // eg, for $('#bark').append('


') "#bark/append" => "


" ); // echo response in json echo json_encode($response); ?>


$response must be a JSON encoded associative array. Key-value pairs will be executed in the the same order as returned.


$selector is a jQuery selector and is optional. All jQuery selectors are supported.


This is the callback function. jQuery functions and plugins take precedence over global and user-defined JavaScript functions.


$params can be a string, array or associative array. If $params is a string or an associative array, it will simply be passed into the callback function. If $params is an array, it will be passed into the callback as separate arguments.

$response = array(
    // pass value: $('p').fadeIn('slow')
    'p/fadeIn' => 'slow',
    // pass map: $('p').css({ backgroundColor: 'yellow', border: '1px solid red' })
    'p/css' => array('backgroundColor'=>'yellow', 'border'=>'1px solid red'),
    // pass as arguments: $('p').css('color', 'blue')
    'p/css' => array('color', 'blue')

Moreover, $params can contain a callback function:

$response = array(
    // $('#remove').fadeOut('slow', function() {
    //     $(this).remove();
    // });
    '#remove/fadeOut' => array('slow', 'function() { $(this).remove(); }')

More Examples

$response = array(
    // advance jquery selector: $('ul > li:first').addClass('top')
    'ul > li:first/addClass' => 'top',
    // call global javascript function: alert('hello world')
    '/alert' => 'hello world',
    // call jquery plugin: $.colorbox({html:'hello world'})
    '/colorbox' => array('html'=>'hello world'),
    // chain callbacks together: $("#animate").fadeOut("slow").delay("1000").slideDown("fast")
    "#animate/fadeOut"   => "slow",
    "#animate/delay"     => "1000",
    "#animate/slideDown" => "fast",