criminy/GetTimeResource.java

## GetTimeResource.java
@Path("/time.json")
public class GetTimeResource
{
    @GET
    @Produces("application/json")
    public String currentTimeAsJson() {
        DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        //get current date time with Date()
        Date date = new Date();
        return String.format("{\"timeKey\":\"%s\"}",dateFormat.format(date));
    }

}

## sample.html
<html>
<head>
    <script src="jquery-1.4.2.min.js" type="text/javascript"><!-- xx --></script>
    <script src="underscore-min.js" type="text/javascript"><!-- xx --></script>
    <script src="ui.js" type="text/javascript"><!-- xx --></script>

    <script type="text/html" id="template">
        The current time is {{ timeKey }}
     </script>

    <script type="text/javascript">
        $(function() {
            /* Compile the template */
            template = $.compile("template");

            /* Build an ajax region */
            content = $.ajaxRegion('#content', template,'/time.json');
            content(); /* Generate the initial content once */

            /* Attach a remote method invocation to a button, refresh region 'content' when
             * the method completes.
             */
            $.rmi("#button1","action1",content,{'A':'B'});
        });
    </script>

</head>
<body>
    <div id="content"></div>
    <input type="button" id="button1" value="Get Current Time"/>

</body>
</html>

## ui.js
/** THIS IS NO WAY TO PACKAGE A JAVASCRIPT/JQUERY Extension. I know that. Too lazy to closure it properly right now */

$(function() {
    _.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
});

/**
 * Compiles a given template, by id, and returns the template as a callable
 */
$.compile = function( template ) {
    return _.template($("#" + template).html())
}

/**
 * Marks a region as being supported by a Jquery template
 * which gets its data populated from an AJAX 'GET' endpoint.
 *
 * @argument selector the CSS selector of the destination element(s)
 * @argument template the compiled template ID.
 * @argument URL the AJAX URL to use.
 * @returns a function() that, when called, renders the template using the AJAX data.
 */
$.ajaxRegion = function(selector, template, URL  ){
    return function() {
        $.ajax({url: URL,success:function(data) {
               $(selector).html(template(data));
            }
        });
    };
}

/**
 * Marks a region as being supported by a Jquery template, returning
 * a one-argument function which renders the template using the given data.
 *
 * @argument selector the CSS selector of the destination element.
 * @argument template The compiled template ID.
 * @returns a function(data) which, when called with 'data', renders the template to the page.
 */
$.region = function(selector, template) {
    return function(data) {
        $(selector).html(template(data));
    }
}

/**
 * Creates an RMI method invocation using JSON against the specified HTML element using
 * the javascript 'onclick' method.
 *
 * @argument selector The CSS selector to apply the RMI method 'click' action to.
 * @argument action The ID of the server-side action to apply.
 * @argument fn The no-argument function to call once the method has finished.
 * @argument data The data (or callback to a function which returns the data) of the RMI.
 */
$.rmi = function(selector,action,fn,data) {
    $(selector).live("click",function() {
        $.ajax({dataType: 'json',contentType:"application/json",type:'POST',url:"action/" + action,data:data,success:function(retData) {
            fn();
        },error:function(err1,err2) { alert(err2); }  });
    });
}
	@Path("/time.json")
	public class GetTimeResource
	{
	@GET
	@Produces("application/json")
	public String currentTimeAsJson() {
	DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
	//get current date time with Date()
	Date date = new Date();
	return String.format("{\"timeKey\":\"%s\"}",dateFormat.format(date));
	}

	}
	<html>
	<head>
	<script src="jquery-1.4.2.min.js" type="text/javascript"><!-- xx --></script>
	<script src="underscore-min.js" type="text/javascript"><!-- xx --></script>
	<script src="ui.js" type="text/javascript"><!-- xx --></script>

	<script type="text/html" id="template">
	The current time is {{ timeKey }}
	</script>

	<script type="text/javascript">
	$(function() {
	/* Compile the template */
	template = $.compile("template");

	/* Build an ajax region */
	content = $.ajaxRegion('#content', template,'/time.json');
	content(); /* Generate the initial content once */

	/* Attach a remote method invocation to a button, refresh region 'content' when
	* the method completes.
	*/
	$.rmi("#button1","action1",content,{'A':'B'});
	});
	</script>

	</head>
	<body>
	<div id="content"></div>
	<input type="button" id="button1" value="Get Current Time"/>

	</body>
	</html>
	/** THIS IS NO WAY TO PACKAGE A JAVASCRIPT/JQUERY Extension. I know that. Too lazy to closure it properly right now */

	$(function() {
	_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
	});

	/**
	* Compiles a given template, by id, and returns the template as a callable
	*/
	$.compile = function( template ) {
	return _.template($("#" + template).html())
	}

	/**
	* Marks a region as being supported by a Jquery template
	* which gets its data populated from an AJAX 'GET' endpoint.
	*
	* @argument selector the CSS selector of the destination element(s)
	* @argument template the compiled template ID.
	* @argument URL the AJAX URL to use.
	* @returns a function() that, when called, renders the template using the AJAX data.
	*/
	$.ajaxRegion = function(selector, template, URL ){
	return function() {
	$.ajax({url: URL,success:function(data) {
	$(selector).html(template(data));
	}
	});
	};
	}

	/**
	* Marks a region as being supported by a Jquery template, returning
	* a one-argument function which renders the template using the given data.
	*
	* @argument selector the CSS selector of the destination element.
	* @argument template The compiled template ID.
	* @returns a function(data) which, when called with 'data', renders the template to the page.
	*/
	$.region = function(selector, template) {
	return function(data) {
	$(selector).html(template(data));
	}
	}

	/**
	* Creates an RMI method invocation using JSON against the specified HTML element using
	* the javascript 'onclick' method.
	*
	* @argument selector The CSS selector to apply the RMI method 'click' action to.
	* @argument action The ID of the server-side action to apply.
	* @argument fn The no-argument function to call once the method has finished.
	* @argument data The data (or callback to a function which returns the data) of the RMI.
	*/
	$.rmi = function(selector,action,fn,data) {
	$(selector).live("click",function() {
	$.ajax({dataType: 'json',contentType:"application/json",type:'POST',url:"action/" + action,data:data,success:function(retData) {
	fn();
	},error:function(err1,err2) { alert(err2); } });
	});
	}