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 »



Demo
HTML


















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);
?>







jquery-ahm redirect


Use jquery-ahm to redirect to another page



Demo
HTML
PHP







<?php
$response = array("/location" => "http://www.jqueryahm.com/");
echo json_encode($response);
?>