Noha Basiony: Edit In Place Plugin Using jQuery

Edit In Place means : User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. Changes are sent via JavaScript which normally would be used to update the text and save it. Form becomes normal text again.

Demo using MVC Application:

1- First you must add jQuery , plugin and style sheet to _Layout.cshtml file.

^<head>

^{<title>@ViewBag.Title</title>}

^{<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />}

^{<link href="../../StyleSheet.css" rel="stylesheet" type="text/css">}

^{<script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>}

^{<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>}

^{<script src="@Url.Content("~/Scripts/EditableText.js")" type="text/javascript"></script>}

^{<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>}

^{@RenderSection("head", required: false)}

^</head>

2- Pass the elements you want to make editable to the plugin. In this example I marked editable elements with "editableText" class.

^{<p class="editableText">}

When you roll your cursor over the element , the background changes to a dashed darkorange line.

3- Looks for the div with id=”editableText” and tells jQuery to do something when the div is clicked. (Make the new line is not allowed )

^{jQuery(function ($) {
           $('p.editableText').editableText({
               newlinesEnabled: false
           });}

^{$.editableText.defaults.newlinesEnabled = true;}

^{$('div.editableText').editableText();}

^{$('.editableText').change(function () {
               var newValue = $(this).html();
           });
       });}

Clicking the text will start some DOM (Document Object Model) magic resulting in the element being replaced by a textarea input — with the text to be edited inside.

In a real world application you would add in some additional safety checks, and then update your database with the new information and send back information that tells jQuery if the changes were successful.

4- Create a function that will do something with the new value of the editable element. Bind it to the element using change event. (Edit, Save and cancel events)

^{var editEl = buttons.find('.edit').click(function () {
                startEditing();
                return false;
            });}

^{buttons.find('.save').click(function () {
                stopEditing();
                editable.trigger(options.changeEvent);
                return false;
            });}

^{buttons.find('.cancel').click(function () {
                stopEditing();
                editable.html(prevValue);
                return false;
            });}

check the “EditableText.js” file

See all the Demo code : Download

Useful Links :

- http://plugins.jquery.com/project/edit_in_place

- http://plugins.jquery.com/plugin-tags/edit-place

Noha Basiony

Pages

Tuesday 4 October 2011

Edit In Place Plugin Using jQuery

No comments: