Jquery inline text box edit | Lessoncup Programming Blog

Friday, 18 October 2013

Jquery inline text box edit

This lesson is show you how to edit the text like facebook profile inline edit. this is very simple if u start analyze the concept of this trick . it is possible with JQuery and Ajax just with few line's of code. let's see the lesson how will do this.



HTML

take the textarea box and give the ID name #editbox and class name .edittext for styling the textarea box. now take the edit button with anchor tag give the class name .edit when the user click's on Edit we Enable the textarea box to write and update the content.
<div style="margin:0 auto; width:310px; margin-top:20px;">

<textarea name="text" cols="" rows="" id="editbox" class="edittext" style="background:none;">
<?php echo $full['content']?>
</textarea>

<a class="edit" style=" cursor:pointer; padding:5px; background-color:#F60;">Edit</a>

</div>

Javascript

insert the JS library in your document inside the head tag. here i am putting textarea box in disable true mode uisng Jquey prop() method this method is used to set the values are properties of selected element.

 $('.edit').click(function() here when we click on edit button the textarea box will be disabled false and i am adding class using addClass() method to textbox for better look.

 $('#editbox').change(function() after enable the textarea if you made any change the AJAX request send to update.php file and update the text and return to success function after complete the changes i change the textarea mode to disabled true.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 $('#editbox').prop('disabled',true);
 
 
 $('.edit').click(function(){
  
  $('#editbox').prop('disabled',false);
  $('#editbox').addClass('textbox');
  
 });
 



$('#editbox').change(function(){
  
  var gettext = $("#editbox").val();
  
  var datasend = 'uptext='+ gettext;
  
  $.ajax({
   
   type:"POST",
   url:"update.php",
   data:datasend,
   cache:false,
   success:function(){
    $('#editbox').prop('disabled',true);
    $('#editbox').removeClass('textbox');
   }
   
  });
  
 });
 
 
 
 
});

</script>

Live Demo   Download Script

2 comments :

  1. Hi
    Also change the the button text when user click to edit, the button text should be add

    thanks

    ReplyDelete
  2. nice,
    only update when changes happen. i click edit after i would not edit that will not effect , correct that error

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons