anchor.diff:  
   Now add the datepicker; So we will replace the column value _>_ with an icon to call the datepicker :
   
  -[code language="html"]
  +[source,html]
   
  -<td> <input type="hidden" class="datepicker" id="datepicker-$\{task.id}" value="$\{task.due?.format('dd-MM-yyyy')}" /></td>
  -
  -[/code]
  +-----------------------
  +<td>  <input type="hidden" class="datepicker" id="datepicker-${task.id}" value="${task.due?.format('dd-MM-yyyy')}" /></td>
  +-----------------------
   
   and add the associated JQuery code :
   
  -[code language="html"]
  +[source,html]
   
  -$(".datepicker").datepicker(\{dateFormat:'dd-mm-yy', showAnim:'fadeIn',
  +-----------------------
  +        $(".datepicker").datepicker({dateFormat:'dd-mm-yy', showAnim:'fadeIn',
  +            showOn: 'button',
  +            buttonImage: '/public/images/calendar.png',
  +            buttonImageOnly: true,
   
  -showOn: 'button',
  +        onClose: function(dateText, inst){
  +            var m = /([a-z]+)-(\d+)/.exec($(this).attr('id'));
   
  -buttonImage: '/public/images/calendar.png',
  +            sp = $('#due-'+m[2]); // take the editInPlace widget
  +            sp.text(dateText);
   
  -buttonImageOnly: true,
  -
  -onClose: function(dateText, inst)\{
  -
  -var m = /([a-z]+)-(\d+)/.exec($(this).attr('id'));
  -
  -sp = $('#due-'+m[2]); // take the editInPlace widget
  -
  -sp.text(dateText);
  -
  -// Make the Ajax call : should fire blur on origibal field
  -
  -var data = \{};
  -
  -data['task.id'] = m[2];
  -
  -data['task.due'] = dateText;
  -
  -$.ajax(\{
  -
  -url: '@\{add()}',
  -
  -type: 'POST',
  -
  -data: data,
  -
  -success: function() \{$('#' + el).html(n)},
  -
  -error: function() \{$('#' + el).html(o)}
  -
  -});
  -
  -}
  -
  -})
  -
  -[/code]
  +                        // Make the Ajax call : should fire blur on origibal field
  +            var data = {};
  +            data['task.id'] = m[2];
  +            data['task.due'] = dateText;
  +            $.ajax({
  +                url: '@{add()}',
  +                 type: 'POST',
  +                data: data,
  +                success: function() {$('#' + el).html(n)},
  +                error: function() {$('#' + el).html(o)}
  +            });
  +            }
  +        
  +        })
  +-----------------------
   
   After copying the value selected in the date picker to the original date field, I make an ajax call.
   
   On this datepicker, we should not make an ajax call, but update the date field and click then blur to activate the ajax call on the field value (and so write once the ajax call). But I have some problems make it run it this how-to, though it works prefectly in one of my projects. Here the code of my prject when it runs :
   
  -[code language="html"]
  +[source,html]
   
  -sp = $('#due-'+m[2]); // take the editInPlace widget
  -
  -sp.text(dateText).click(); // set the date and trigger a click
  -
  -$(':input', sp).blur();
  -
  -[/code]
  +-----------------------
  +            sp = $('#due-'+m[2]); // take the editInPlace widget
  +            sp.text(dateText).click(); // set the date and trigger a click
  +            $(':input', sp).blur();
  +-----------------------
   
   The code is far shorter and factorized. I've post event if I can't make it run on my how-to project to share it and I'll updated this post when I'll find the problem.
  
positive.code: 
  Here is the new script code :
  
  [code language="html"]
  
  // In place edition
  
  $(".task td.editable").editInPlace(\{
  
  bg_over: 'transparent',
  
  callback: function(el, enteredText, o) \{
  
  var m = /([a-z]+)-(\d+)/.exec(el), data = \{}
  
  data['task.id'] = m[2]
  
  data['task.' + m[1]] = enteredText
  
  // Save result
  
  $.ajax(\{
  
  url: '@\{add()}',
  
  type: 'POST',
  
  data: data,
  
  success: function() \{$('#' + el).html(n)},
  
  error: function() \{$('#' + el).html(o)}
  
  })
  
  return true
  
  }
  
  });
  
  [/code]
  
  A little explaination of the callback function :
  
  
negative.code: 
  We can now add an editable field to our project. First modify main.html to include the script, adding this line :
  
  [source,html]
  
  -----------------------
          <script src="@{'public/javascripts/jquery.editinplace.js'}" type="text/javascript" charset="utf-8"></script>
  -----------------------
  
  Then modify the templacte index.html. We will add some class tag to identify the field on which to apply edit in place capability. We will also an an id on the tag (it will be explained below). Is his the news record template :
  
  [source,html]
  
  -----------------------
          <tr class="task">
              <td class="editable"  id="action-${task.id}">${task.action}</td>
              <td>${task.due?.format('dd-MM-yyyy')}</td>
              <td>&gt;</td>
          </tr>
  -----------------------
  
  We've also tagged the _tr_ tag : a goog practice to anticipate the presence of other datas in rows int the same screen. Next step is to apply the capability to the field, with a default callback function (no save to the model), in the script section of the template :
  
  [source,html]
  
  -----------------------
           // In place edition
          $(".task td.editable").editInPlace({
              bg_over: 'transparent',
              callback: function(unused, enteredText) { return enteredText; }
          });
  -----------------------
  
  Try the modify an action in a row : it's ok but refresh the screen, the previous value is showned and your modification is lost.But we want to save our changes to the model (and so to be persistence). So we will modify the callback function to save data with AJAX.
  
  