jQuery ahm

Component ID

1130780

Component name

jQuery ahm

Component type

module

Maintenance status

Development status

Component security advisory coverage

covered

Downloads

1001

Component created

Component changed

Component body

Summary

jQuery-ahm is a light-weight jquery plugin that reduces ajax requests to one-line.

Features

jQuery-ahm is a replacement for $.ajax. With $.ajax, every ajax request needs a callback, resulting in a lot of javascript. $.ahm reduces javascript code by letting the response data define the actual callbacks.

  • Super light-weight: ~1KB minified
  • Reduces ajax requests to one-line (including ajax form validation)
  • No more custom callbacks for every ajax request
  • Lets back-end define post ajax callbacks (applied automagically)
  • Supports all jquery + custom callbacks in back-end code
  • Drop in replacement for $.ajax() (supports all $.ajax options)

Configuration

The module has an admin interface, where you can enable to always include the JavaScript file to the site.
Otherwise you can include it manually via a simple function callback:

<?php
drupal_add_library('ahm', 'ahm');
?>

Usage

Simple jQuery Callbacks

In html side:

<a href="/a.simple" class="ahm">simple callbacks »</a>
<div id="today">current time</div>
<div id="hello">hello world</div>

In php side:

<?php
$response = array(
    // $("#today").text("5:32:10 pm")
    "#today/text" => date("g:i:s a"),
    // $("#hello").html("<b>how are you?</b>") (default is html)
    "#hello" => "<b>how are you?</b>",
);
echo json_encode($response);
?>

Advanced jQuery Callbacks

In html side:

<a href="/a.advance" class="ahm">advanced callbacks »</a>
<div id="foo">foo<span>bar</span></div>

In php side:

<?php
$response = array(
    // $("#foo > span").remove()
    "#foo > span/remove" => "",
    // $("#foo").after("<div>insert after foo</div>")
    "#foo/after"         => "<div>insert after foo</div>",
    // $("#foo").before("<div>insert before foo</div>")
    "#foo/before"        => "<div>insert before foo</div>",
    // $("#foo").css({backgroundColor:"#ccc",border:"5px solid red"})
    "#foo/css"           => array("backgroundColor"=>"#eee", "border"=>"5px solid red"),
);
echo json_encode($response);
?>

Fore more examples visit examples page and for the full documentation visit website.