Jquery Multiple inline text box edit | Lessoncup Programming Blog

Tuesday, 22 October 2013

Jquery Multiple inline text box edit

Few days back i wrote a lesson on Jquery inline text box edit now i implemented to multiple textboxes with php and mysql. in this lesson the textboxes will loop as per the content in the database and each textbox generate a unique ID. let's see the how we do this. 



index.php

connect this file to database now write the query and fetch the rows in while loop with textarea box and give the ID name #editbox<?php idname?> and class name .edittext for styling the textarea box. now take the edit button give the class name .edit  now  we need a unique id to each edit button for that pass the php variable as a ID name to edit button as well as to textarea box. by default put the textarea box into disable mode.

<div class="box">

<?php
$sql=mysql_query("select * from content order by cnid desc");
while($full=mysql_fetch_array($sql)){
?>

<div style="float:left;width:270px;margin-top:50px; margin-bottom:20px; border:solid #CCC 0px; margin:5px;" class="boxt">

<textarea name="text" cols="" rows="" id="editbox<?php echo $full['cnid']?>" class="edittext" style="background:none;" disabled>
<?php echo $full['content']?>
</textarea>
<input name="edit" class="edit" id="<?php echo $full['cnid']?>" type="button" value="Click me to edit" />

</div>
<?php }?>



</div>

Javascript

here i have made some changes to previous lesson, first write the click function to edit button and get the ID's of the both textarea and editbutton elements now make the textarea box to be disable fasle and inside the click function write the change function to textarea box here pass the unique id to Jquery selector to change function, when the user change the text the Ajax request send data to update.php file after the request is success put the textbox into disable true.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>


<script>


$(document).ready(function(){
 
 
 $('.edit').click(function(){
  
  var Id=$(this).attr('Id');
  
  var textbox=$('#editbox'+Id);
  
  $('#editbox'+Id).prop('disabled',false);
  $('#editbox'+Id).addClass('textbox');
  
  
  $('#editbox'+Id).change(function(){
  
  var gettext = $("#editbox"+Id).val();
  
  var datasend = 'uptext='+ gettext+'&textid='+Id;
  
  $.ajax({
   
   type:"POST",
   url:"update.php",
   data:datasend,
   cache:false,
   success:function(){
    $('#editbox'+Id).prop('disabled',true);
    $('#editbox'+Id).removeClass('textbox');
   }
   
  });
  
 });
  
 });
 
 
 
 
});

</script>

CSS

write this css code
<style>

.box{ margin:0 auto; width:850px; height:auto; clear:both; border:dashed #999 0px; padding:10px;}

.edittext{resize:none;outline:none; width:270px; height:150px; border:solid #CCC 0px;font-size:11px; color:#333; font-family:Verdana, Geneva, sans-serif; line-height:22px; margin:0 10px 5px 0;}

.textbox{border:solid #CCC 1px;}

.edit{ cursor:pointer;background-color:#F60;border:0; padding:5px; border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -moz-border-radius:5px;}



</style>


Live Demo   Download Script

3 comments :

  1. Exit function is not working properly. plz try to remove this error

    ReplyDelete
  2. i didn't get what you saying if you found any bug just elaborate and tell me i will fix the error
    thank you

    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