Show me what you can do please!

With AjaxAnywhere you can do something like the example below without writing any Javascript. That means that all the behaviour in this widget has been specified declaratively.
If that does not make you curious then I am not sure what will :-)


Ajaxify entire forms

This example shows how you can "ajaxify" an entire form simply adding in the attribute:

aa-refresh-zones="aaZone1Example2, aaZone2Example2"
This is only recommended for simple forms as all the buttons within the form refresh the same zones.

Text introduced by user: This text will only be refreshed with the user text when the "Refresh Text" button is pressed.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://com.nerderg/ajaxanywhere" prefix="aa" %>

<fieldset>
    <legend>Ajaxify links</legend>
    <p>
        Normal links that are not associated with any form element can be "ajaxified" too. You can also check how AjaxAnywhere handles the possible redirects automatically:
    </p>
</fieldset>
<a href="<c:url value="/action/examples/5?data=whatever"/>" aa-refresh-zones="codeLayer5">Show Code</a>
&nbsp | &nbsp;
<a href="<c:url value="/action/examples/5?data=redirect"/>" aa-refresh-zones="codeLayer5">Redirect Test</a>
<br/>
<br/>
<div id="code5Layer" class="codeLayer">
    <aa:zone id="codeLayer5">
        <c:if test="${not empty code}">
            <label><strong>JSP Code:</strong></label>
            <pre class="brush: html; highlight: [3,11,13]">${code}</pre>
            <a class="btn btn-danger closeCode scroll" href="#example5"><i class="ui-icon-close"></i>Hide Code</a>
            <script>
                $("div#code5Layer").hide();
                SyntaxHighlighter.highlight();
                $("div#code5Layer").show("blind", {direction: 'up'}, 1000);
            </script>
        </c:if>
    </aa:zone>
</div>
Hide Code

Ajaxify form buttons

Next we can see how to "ajaxify" the form buttons individually and specifying the zones to refresh for each of them:

     
Text introduced by user: This text will only be refreshed with the user text when the "Refresh Text" button is pressed.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://com.nerderg/ajaxanywhere" prefix="aa" %>

<fieldset>
    <legend>Ajaxify links</legend>
    <p>
        Normal links that are not associated with any form element can be "ajaxified" too. You can also check how AjaxAnywhere handles the possible redirects automatically:
    </p>
</fieldset>
<a href="<c:url value="/action/examples/5?data=whatever"/>" aa-refresh-zones="codeLayer5">Show Code</a>
&nbsp | &nbsp;
<a href="<c:url value="/action/examples/5?data=redirect"/>" aa-refresh-zones="codeLayer5">Redirect Test</a>
<br/>
<br/>
<div id="code5Layer" class="codeLayer">
    <aa:zone id="codeLayer5">
        <c:if test="${not empty code}">
            <label><strong>JSP Code:</strong></label>
            <pre class="brush: html; highlight: [3,11,13]">${code}</pre>
            <a class="btn btn-danger closeCode scroll" href="#example5"><i class="ui-icon-close"></i>Hide Code</a>
            <script>
                $("div#code5Layer").hide();
                SyntaxHighlighter.highlight();
                $("div#code5Layer").show("blind", {direction: 'up'}, 1000);
            </script>
        </c:if>
    </aa:zone>
</div>
Hide Code

Ajaxify select inputs

This is the classic examples of dependable drop down lists, With AjaxAnywhere is extremely easy and clean to implement:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://com.nerderg/ajaxanywhere" prefix="aa" %>

<fieldset>
    <legend>Ajaxify links</legend>
    <p>
        Normal links that are not associated with any form element can be "ajaxified" too. You can also check how AjaxAnywhere handles the possible redirects automatically:
    </p>
</fieldset>
<a href="<c:url value="/action/examples/5?data=whatever"/>" aa-refresh-zones="codeLayer5">Show Code</a>
&nbsp | &nbsp;
<a href="<c:url value="/action/examples/5?data=redirect"/>" aa-refresh-zones="codeLayer5">Redirect Test</a>
<br/>
<br/>
<div id="code5Layer" class="codeLayer">
    <aa:zone id="codeLayer5">
        <c:if test="${not empty code}">
            <label><strong>JSP Code:</strong></label>
            <pre class="brush: html; highlight: [3,11,13]">${code}</pre>
            <a class="btn btn-danger closeCode scroll" href="#example5"><i class="ui-icon-close"></i>Hide Code</a>
            <script>
                $("div#code5Layer").hide();
                SyntaxHighlighter.highlight();
                $("div#code5Layer").show("blind", {direction: 'up'}, 1000);
            </script>
        </c:if>
    </aa:zone>
</div>
Hide Code

Ajaxify links

Normal links that are not associated with any form element can be "ajaxified" too. You can also check how AjaxAnywhere handles the possible redirects automatically:

Show Code   |   Redirect Test

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://com.nerderg/ajaxanywhere" prefix="aa" %>

<fieldset>
    <legend>Ajaxify links</legend>
    <p>
        Normal links that are not associated with any form element can be "ajaxified" too. You can also check how AjaxAnywhere handles the possible redirects automatically:
    </p>
</fieldset>
<a href="<c:url value="/action/examples/5?data=whatever"/>" aa-refresh-zones="codeLayer5">Show Code</a>
&nbsp | &nbsp;
<a href="<c:url value="/action/examples/5?data=redirect"/>" aa-refresh-zones="codeLayer5">Redirect Test</a>
<br/>
<br/>
<div id="code5Layer" class="codeLayer">
    <aa:zone id="codeLayer5">
        <c:if test="${not empty code}">
            <label><strong>JSP Code:</strong></label>
            <pre class="brush: html; highlight: [3,11,13]">${code}</pre>
            <a class="btn btn-danger closeCode scroll" href="#example5"><i class="ui-icon-close"></i>Hide Code</a>
            <script>
                $("div#code5Layer").hide();
                SyntaxHighlighter.highlight();
                $("div#code5Layer").show("blind", {direction: 'up'}, 1000);
            </script>
        </c:if>
    </aa:zone>
</div>
Hide Code