Inline editing using JQuery

A post I forgot to publish which I wrote an year back

Here I wanted to show you the flexibility of JQuery.

Below is a HTML code that generates a grid with two rows and ten columns.

<div>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>

</div>

When the user double clicks on any of the cell, he can edit that content. The cell value get updated when user double clicks on any other cell.

Visit here to see the demo.

$(document).ready(function(){
$("div.column").dblclick(function(){ 

var content = $(this).text();
var width = $(this).width() -1;
var height = $(this).height() - 4;

var $editbox = $("<input type='text'" +
"style='width:" + width + ";" +
"height:" + height + ";" +
"border:none" +
"' value='" +  content + "' />"); 

$(this).empty();
$(this).prepend($editbox);
$editbox.focus();
$editbox.select();

$($editbox).bind("blur",function(){                     

content = $(this).val();
var parent = $(this).parent();
parent.html(content); 

});

});

});

The above code does all the trick.

First we hook the “Double Click” event to all the DIV with class name “column” using this

$(“div.column”).dblclick(function(){…});

Inside that, we dynamically add a textbox inside the DIV and set its text value as the HTML content of the parent DIV. And also we bind the “blur” event of this texbox to a function, so that whenever the focus leaves from the textbox, that function is called.

$($editbox).bind("blur",function(){

content = $(this).val();
var parent = $(this).parent();
parent.html(content);

});

inside that function, we set the HTML content of the DIV with the Textbox value.