Play! Framework unobtrusive scripting adapter for jQuery

by Rafael Felini
http://github.com/rafaelfelini

Description

playujs is a port of jquery-ujs of Ruby on Rails to Play! Framework.

Prerequisites

Play! 1.2.x
jQuery 1.6.0 or later

Install the module

Install the playujs module from the modules repository:

play install playujs

Enable the module

After installing the module, add the following to your conf/dependencies.yml to enable it (don’t forget to run play dependencies):

require:
	- play -> playujs

Usage

Javascript

• Import jQuery 1.6.0 or later

<script src="@{'/public/javascripts/jquery-[version].js'}" type="text/javascript"></script>

• Import play.js

<script src="@{'/public/javascripts/play.js'}" type="text/javascript"></script>

Html

To perform a ajax you need to use the ‘data-remote’ attribute on some html elements like, a, form, select, input and textarea.
For select, input and textarea de ajax will be triggered on onchange event of the element.

In a link it would be:

<a href="@{Application.index()}" data-remote="true" data-disable-with="Wait" >Go!</a>

In a form:

<form id="withajax" action="@{Application.index()}" method="post" data-remote="true">
	<input name="param" type="text" value="value" />		
	<input type="submit" data-disable-with="Performing ajax..." value="Go!" />
</form>

Controller

In your controller just call render(); then Play! will automaticaly render the .json template, using content negotiation feature http://www.playframework.org/documentation/1.2.4/routes#content-negotiation

Template

Here lies the fun. In your .json template you will write your javascript that will be executed on the client. And here you can do what you want, trigger an effect, update areas, etc.
When you need to include a template you MUST use the #{escapejs ‘yourtemplate.html’ /} , that will escapes carriage returns, single and double quotes for JavaScript segments, ensuring that will be a valid javascript.

Example:

$('body').append('#{escapejs "includes/_yourinclude.html" /}');
$('#someform input[name=user]').val('new vaue');

Ajax events

https://github.com/rails/jquery-ujs/wiki/ajax

Source Code

On GitHub https://github.com/rafaelfelini/playujs

Examples of usage

On GitHub https://github.com/rafaelfelini/playujs-examples

Credits

• https://github.com/rails/jquery-ujs team for the great work with rails.js