Jquery JEditable

Hi Frineds,

Simple example and some tricks with JEditable

Follow below link
http://fileml.com/l/0o8x

Enjoy.

Jeditable

Hello all readers, Once again I would like to share some interesting stuff with you all Techies. Some must have already faced this situation and have dealt with their own ways. But I have found something interesting. Have you ever came across a situation where you have the requirement to develop HTML page which can be easily edited by end users and data should be sent to the server for further operation? Yes, I know, As we are working in the era of developing web, we came across such situation and we are dealing with it in our ways. But Jquery has made it so simple so that we can develop editable HTML with few lines of code. Yes you read it right “with few lines of code. :) First obvious question would be … How does this work? And the answer is, This is so simple so that an end user clicks on any text on Web Page and that part of text will become an input form. Then user can edit the text and press other part of the page and the new text will be sent to web server, saved and that Input form becomes text again. Looking simple guys??? I KNOW THE ANSWER IS “YES, IT IS SO EASY.” Let start developing such HTML. To develop this we need jquery.min.js and jquery.jeditable.js We can always download those from JQuery site. Lets have simple HTML Div div class="edit" id="div_1">Peeyush Guhe</div> <div class="edit_area" id="div_2">My name is Peeyush Guhe, I am working developing editable HTML on go.</div> To Save the text after editing we have to call a different URL as we are doing this with AJAX in our regular development. $(document).ready(function() { $('.edit').editable('http://www.peeyush.com/save.php'); }); What the above code is doing? 1. Making the element with class ‘edit’ editable. 2. Allow user to write the new content. 3. Form input is appearing in place of actual content. 4. Form input is taking the default Size (height and width) of original content. 5. If user press ESC button the form discarded. 5. If user hit Enter button the browser submits the text to save.php of www.peeyush.com Sounds Good. Lets add some more to it. $(document).ready(function() { $('.edit').editable('http://www.peeyush.com/save.php', { indicator : 'Saving...', tooltip : 'Click to edit...' }); $('.edit_area').editable('http://www.peeyush.com/save.php', { type : 'textarea', cancel : 'Cancel', submit : 'OK', indicator : '<img src="img/indicator.gif">', tooltip : 'Click to edit...' }); }); Elements with class edit_area will use textarea as input. They will also have spinning image when data is being submitted to server. Elements with class edit will have text Saving…instead of spinning image. As a bonus lets add tooltip to both. Tooltips are great for informing users what they should do. Not Bad tho. Now the question is What is being sent to the server? Answer is , When submitting changes the below data would be sent to the server. id=elements_id&value=user_edited_content. You can use this for Select also. You can use selects by giving type parameter value of select. Select is built from JSON encoded array. This array can be given using either data parameter or fetched from external URL given in loadurl parameter. Array keys are values for <option> tag. Array values are text shown in pulldown. JSON encoded array looks like this: {’E’:‘Letter E’,‘F’:‘Letter F’,‘G’:‘Letter G’, ‘selected’:’F’} Note the last entry. It is special. With value of ‘selected’ in array you can tell Jeditable which option should be selected by default. Also you can add style elements to it. You can style input element with css class and style parameters. First one assumes to be name of a class defined in your CSS. Second one can be any valid style declaration as string. Check the following examples: $('.editable').editable('http://www.example.com/save.php', { cssclass : 'someclass' }); $('.editable').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/json.php', type : 'select', submit : 'OK', style : 'display: inline' }); I got the opportunity to research on jquery Jeditable in one of my project. There I had to develop something where user can edit HTML and can save it too. Guys moving forward and don't hesitate to customize the base files too. Make sure you have proper backup of those files. I have customized the jquery.jeditable.js also. The requirement was something where the editable box should not exceed a certain text length. So I have customized jquery.jeditable.js file and put maxlength in element.setting parameter. Please refer the below code In jquery.jeditable.js Add: if (settings.maxlength) { input.attr('maxlength', settings.maxlength); } After: if (settings.height != 'none') { input.height(settings.height); } Then set maxlength to any number. for example $(document).ready(function() { $('.edit').editable('http://www.peeyush.com/save.php'),{ maxlength : 20 }); }); There are many more setting you can perform. Not only text box but you make editable Testarea, select box and many more. So use the jeditable at its optimum. And please do share some more post for the same.