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.
$('.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
Hi
ReplyDeleteAlso change the the button text when user click to edit, the button text should be add
thanks
nice,
ReplyDeleteonly update when changes happen. i click edit after i would not edit that will not effect , correct that error