jquery-ahm

Documentation

• Introduction »
• Setup »
• Response Format »

Introduction

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

Setup

Load jquery-ahm.js:

<script type='http://jqueryahm.com/js/jquery-ahm.js'></script>

Add "ahm" class:

link

Back-end response code:

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

Response Format

<?php
$response = array(
    "$selector/$callback" => "$params",
    // eg, for $('#bark').append('
woof!
')
    "#bark/append" => "
woof!
"
);

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

$response

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

$selector

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

$callback

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

$params

$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.

<?php
$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:

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

More Examples

<?php
$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",
);
?>