Examples

Simple jquery-ahm example

Update multiple elements with one jquery-ahm call.

Demo HTML PHP
simple callbacks »
current time
hello world


<?php
$response = array(
    // `this` keyword refers to current context
    "this/text" => "hello world",
    // $("#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);
?>

Simple jquery-ahm example #2

Update multiple elements with one call, this time using more advanced jQuery methods.

Demo HTML PHP


<?php
$response = array(
    // more advanced jquery selector: $("#foo > span").remove()
    "#foo > span/remove" => "",
    // $("#foo").after("<div>insert after foo</div>")
    "#foo/after"         => "<div>insert after foo</div>",
    // pass parameter as arguments: $("#foo").attr("title", "hello world")
    "#foo/attr"          => array("title", "hello world"),
    // pass parameter as map: $("#foo").css({backgroundColor:"#ccc",border:"5px solid red"})
    "#foo/css"           => array("backgroundColor"=>"#eee", "border"=>"5px solid red"),
);
echo json_encode($response);
?>

jQuery animation example

Chain jQuery animations together with one jquery-ahm call.

Demo HTML PHP


<?php
$response = array(
    // $("#animate").fadeOut("slow").delay("1000").slideDown("fast")
    "#animate/fadeOut"   => "slow",
    "#animate/delay"     => "1000",
    "#animate/slideDown" => "fast",
);
echo json_encode($response);
?>

Callback function example

Pass javascript callback function back to jquery-ahm from server-side.

Demo HTML PHP


<?php
return array(
    // $('#callback').fadeOut('fast', function() {
    //     alert('callback function');
    //     $(this).fadeIn("fast");
    // });
    '#callback/fadeOut' => array('fast','function() { alert("callback function"); $(this).fadeIn("fast"); }'),
);
echo json_encode($response);
?>

JS functions + methods example

Use jquery-ahm to call javascript functions and methods.

Demo HTML PHP
call js functions »


<?php
$response = array(
    "/alert"                => "calling alert()",
    "/my_custom_function"   => "calling my_custom_function() from PHP",
    "/MyCustom.method"      => "calling MyCustom.method() from PHP",
    "/MyCustom['method']"   => "calling MyCustom[method] from PHP",
);
echo json_encode($response);
?>

Load external JS scripts using $.run example

$.run allows you to lazy load js scripts, the first time they are required, and only once. See $.run »

Ajax form validation example

Validate ajax forms using jquery-ahm. Note that on the client-side, there are no javascripts.

Demo HTML PHP

Name

Email

Password




<?php
// catch errors
foreach (array("name", "email", "password") as $key) {
    if (empty($_POST[$key])) {
        $error["#$key/addClass"] = "error";
        $error["#$key/after"]    = "<span class="error">Please enter $key</span>";  
    }
}

// get response
if (!empty($error)) {
    $reset["input.error/removeClass"] = "error";
    $reset["span.error/remove"]       = "";
    $response = $reset + $error;    // reset errors before applying new ones
} else {
    $response["#form/replaceWith"] = "<strong>Form successfully submitted</strong>";
}

echo json_encode($response);
?>

OnLoad jquery-ahm Example

Use jquery-ahm to load parts of pages.

Demo HTML PHP
load in 5s...
loading...


<?php
$response = array("this" => "random_number: ".rand(1,100));
echo json_encode($response);
?>

jquery-ahm from javascript

By default, jquery-ahm is binded by class "ahm". Alternatively, you can call it directly.

Demo HTML PHP


<?php
$response = array( "#ahm_js" => "<b>server time: ".date("r")."</b>");
echo json_encode($response);
?>