21 Sep 2010 • on AJAX, datepicker, editinplace, JQuery, play framework

by javathought

Play! edit your dates with JQuery (editinplace + datepicker) 1/2

On my first tweet, I posted a link on a sniplet (http://anibalpacheco.com/blog/post/p-47-jquery-ui-datepicker-jquery-editinplace/) explaining how to mix editinplace and datepicker in JQuery.

Here, I’ll explain how to finish the job of ths sniplet (update the date picker on date field update) and integrate it in a Play! application listing a set of object (each having a date field - a very simple task example).

Create a Task model :

package models;

import play.*;
import play.db.jpa.*;

import javax.persistence.*;
import java.util.*;

@Entity
public class Task extends Model {
    public String action;
    public Date due;
}

Review the index method in Application

    public static void index() {
        List tasks = Task.findAll();
        render(tasks);
    }

And list the tasks in a table (modifiy the template : view/index.html) with a form to add a new task (last line of the table)

#{extends 'main.html' /}
#{set title:'Home' /}

<table>
    <thead>
        <tr>
            <th>Action</th>
            <th>Due date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    #{list tasks, as:'task'}
        <tr>
            <td>${task.action}</td>
            <td>${task.due}</td>
            <td>&gt;</td>
        </tr>

    #{/list}
    <tr>              #{form @add()}
            <td><input type=&quot;text&quot; name=&quot;task.action&quot;></td>
            <td><input type=&quot;text&quot; name=&quot;task.due&quot;></td>
            <td><input type=&quot;submit&quot; value=&quot;+&quot;></td>
            #{/form}
        </tr>
    </tbody>
</table>

And add the add action in Application

    public static void add(final Task task) {
        task.save();
        index();
    }

and don’t forget to activate the database settings in conf/application.conf

db=mem

Now you have a basic play! application to save tasks.

image::screenshot-4.jpg[image,title="Tasks in action"]]

Looking at the state, the date field is not well formated. Just replace the field showing the date with the following code and we’ll just see the day part of the date without time.

<td>${task.due.format('dd-MM-yyyy')}</td>

image::screenshot-5.jpg[image,title="Tasks with a formatted due date"]]

Let’s begin adding our Ajax behaviour.

Look at /public/javascripts : there’s already JQuery installed (jquery-1.4.2.min.js, which is now the lastest version; You’ll can get latest version of JQuery to upgrade your site later). Now look at the main.html template (under app/views), the script is already included.

Adding a datepicker

To add a datepicker, we need to getJQuery UI.

The page is well designed :

you choose the components you want to included, so you can just pick the ones you want for your site and have a lightweight version that just fits your needs. For this example, we just need the core (obviously) and datepicker in Widget section.
you can choose the theme you want to embed in your package, on the right of the page. I’ve choose smoothness.

Once you’ve downloaded the pack, get the script (jquery-ui-1.8.5.custom.min.js) from the js folder and put it on public/javascripts one of your application and get your theme folder (the whole folder) under css in the package and copy it to /public/stylesheets.

Add the following lines just below the ones of JQuery (css and javascript ones) in app/views/main.html : <div>[source,html]

      <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;@{'public/stylesheets/smoothness/jquery-ui-1.8.5.custom.css'}&quot; />
        <script src=&quot;@{'/public/javascripts/jquery-ui-1.8.5.custom.min.js'}&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script>

Your main.html template should now look like this :

<div>[source,html]

<!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>
        <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;@{'/public/stylesheets/main.css'}&quot;>
        <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;@{'public/stylesheets/smoothness/jquery-ui-1.8.5.custom.css'}&quot; />

        #{get 'moreStyles' /}
        <link rel=&quot;shortcut icon&quot; type=&quot;image/png&quot; href=&quot;@{'/public/images/favicon.png'}&quot;>
        <script src=&quot;@{'/public/javascripts/jquery-1.4.2.min.js'}&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script>
        <script src=&quot;@{'/public/javascripts/jquery-ui-1.8.5.custom.min.js'}&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script>
        #{get 'moreScripts' /}
    </head>
    <body>
        #{doLayout /}
    </body>
</html>

Now we have to associate a datepicker with the field date in the form : first add a class tag the the field :

            <td><input class=&quot;due&quot; type=&quot;text&quot; name=&quot;task.due&quot;></td>

and add the JQuery code to associate it with a datepicker :

<script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;>
        $(&quot;.due&quot;).datepicker({dateFormat:'dd-mm-yy', showAnim:'fadeIn'})
</script>

Now you have the basic application with a datepicker.

image::screenshot-6.jpg[image,title="task with datepicker"]]

Next step is to add editinplace on existing tasks and associate a datepicker on thme for the date. All this in next post…