Geeks With Blogs
Rajesh Pillai My experiments with asp.net mvc, jquery, wpf, silverlight, sharepoint, tdd and design patterns.

Let's try a simple in-place edit with jquery.  For demonstration purpose I am using the plain old HTML file.  However,
if you, wish you could apply the same technique to asp.net, asp.net mvc or php or any other web application as well.

 Here is the html that we will be using for the demo.

<body>
    <div style="line-height:3xm;background-color:skyblue">
        Double Click the below paragraph to edit.
    </div>
    </br></br>
    <div class="edit">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
        sagittis ipsum. Praesent mauris.
        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
    </div>
</body>

The element that needs to be made editable is given a class  of "edit".
 

The following is the minimal CSS we will be using for this demo.

<style type="text/css">
        .edit {
            width:400px;
            border:1px dashed orange;
        }
       
        .saveButton {
        }
        .cancelButton {
        }

 </style>

Let's add a reference to the jquery library

If you have a local copy then refer it as follows

<script src="scripts/jquery-1.3.2.min.js"></script> 



The above assumes you have a copy of the jquery library in the scripts folder on your root directory.

Otherwise you can always grab the latest copy from google..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

 

Now let's setup the event handler to make the div editable.

 

<script type="text/javascript">
  $(function(){
            setEditable();
  });
</script>

The $() function is jquery's way of telling the browser to execte the function when the DOM is ready.

Here' is the setEditable function.

 

function setEditable() {
    $('.edit').click(function() {
          var textarea = '<div><textarea>'+$(this).html()+'</textarea>';
           var button     = '<div><input type="button" value="SAVE" class="saveButton" /> <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
                var revert = $(this).html();
                $(this).after(textarea+button).remove();
                $('.saveButton').click(function(){saveChanges(this, false);});
                $('.cancelButton').click(function(){saveChanges(this, revert);});
            })
  };

  function trim(stringToTrim) {
       return stringToTrim.replace(/^\s+|\s+$/g, "");
  }

The above function essentially does three things.

  1. Hook up the click event handler on the element with class ".edit".
  2. Inside the function the following are the sequence that happens
    1. Build the html for inserting a <textarea> for editing.
    2. Build the html for inserting a "save" and "cancel" button.
    3. Save the current value of the element.
    4. Removes the current div (with class .edit) and inserts the above html.
    5. Hooks up the events for "save" and "cancel" button.


  Note: the jquery function after() inserts content after each of the matched elements.

 The below function is called when you click "save" or "cancel" button

 


function saveChanges(obj, cancel) {
      if (!cancel) {
            var newValue = $(obj).parent().siblings(0).val();
            if(trim(newValue) == '') newValue = '(click to add text)';
      }
      else {
            newValue = cancel;
            if(trim(newValue) == '') newValue = '(click to add text)';
       }
           
      $(obj).parent().parent().after('<div class="edit">' +  newValue +'</div>').remove();
      setEditable();
}

 

That's it.  You can actually make an ajax request and send this data to the server for persistence.  We will see
that in an another post.

 

Posted on Thursday, November 26, 2009 12:54 PM jQuery , asp.net mvc , asp.net | Back to top


Comments on this post: In-Place-Edit with jQuery

# re: In-Place-Edit with jQuery
Requesting Gravatar...
No demo page?
Left by Chuck Conway on Nov 30, 2009 12:38 PM

Your comment:
 (will show your gravatar)


Copyright © Rajesh Pillai | Powered by: GeeksWithBlogs.net