August 15, 2010

Jquery Inline Editing

Question by abc

There is a table that the data is being loaded dynamically in to it using Jtemplate. After I right click on a row and click on edit the entire row should go to the edit mode and the cells should contain dropdowns,text,date fields etc.as well it should display save and cancel buttons onclick of edit. after clicking on save the change data should go to the database using ajax. Hope you have suggestions for this.

thanks,
abc

Answer by Starx

You cannot expect much help based on the information you provided. But I will give you a small example

HTML

<div id="mytext">Your name loaded from database</div>
<a class="triggeredit" href="javascript:void();">Edit</a>

Script

$(function() {
   $(".triggeredit").click(function() {
       var thetext = $('#mytext').html();
       $("#mytext").html('<input type="text" name="edittext" id="edittext" value="'+thetext+'" />');
   });
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!