Sonntag, 4. September 2011

Easy In Place Editing with Apache Sling and jQuery jEditable

  1. Download & reference jquery and jeditable 
  2. Create a scriplet to be included
    $(document).ready(function () {
            $("[class^='edit']").each(function () {
                    var param = $(this).attr('class').substring(4).toLowerCase();
                    $(this).editable('<%=currentNode.path%>', {
                            type: 'textarea',
                            name: param,
                            submitdata: {
                                    '_charset_': 'utf-8',
                                    ':redirect': '<%=currentNode.path%>.html'
                            },
                            cancel: 'Cancel',
                            submit: 'OK',
                            event: "dblclick",
                            tooltip: 'Click to edit...'
                    });
            });
    });
  3. Use this scriplet in your respective script file, and create an editable textare with a css class named  "editXY" where XY is the name of the property to be edited
        <div class="editProperty">
    
    <%=currentNode.firstname%></div>
     
That's it. The redirect doesn't work too well, but hey ... :)