Looking for help with jQuery Inline Edit operations. I currently have a setup where:
Label Name ------> Edit button
and when the edit button is clicked, the label name is replaced with an input text box and edit button is replaced with save and cancel buttons.
Input text ------> save and cancel button
My goal is to enhance this functionality by allowing the same class names for all label/edit/save/cancel buttons within multiple divs. Each div will have a unique Id for the input_text field. When clicking on Div1, it should update values for Div1, and so on for other divs.
If you want to see the code in action, check out this link.
html
<!-- Label one -->
<div>
<label class="name">
<span>Label 1</span>
</label>
<input id='text_1' class='com_text' type='text' />
</div>
<div>
<a href='#' class='edit'>
<span>Edit</span>
</a>
<button class='save' type='submit'>Save</button>
<button class='cancel' type='reset'>Cancel</button>
</div>
<!-- Label one -->
<br/>
<!-- Label two -->
<div>
<label class="name">
<span>Label 2</span>
</label>
<input id='text_2' class='com_text' type='text' />
</div>
<div>
<a href='#' class='edit'>
<span>Edit</span>
</a>
<button class='save' type='submit'>Save</button>
<button class='cancel' type='reset'>Cancel</button>
</div>
<!-- Label two -->
<br>
<!-- Label three -->
<div>
<label class="name">
<span>Label 3</span>
</label>
<input id='text_3' class='com_text' type='text' />
</div>
<div>
<a href='#' class='edit'>
<span>Edit</span>
</a>
<button class='save' type='submit'>Save</button>
<button class='cancel' type='reset'>Cancel</button>
</div>
<!-- Label three -->
JQuery
$(document).ready(function()
{
$('.com_text').click(function()
{
var com_text = $(this).attr('id');
});
//Edit
$('.edit').click(function()
{
$(this).hide();
$('.name').hide();
$('.save,.cancel').show();
$(com_text).val($('.name').text().trim());
});
//Cancel
$('.cancel').click(function()
{
$(this).hide();
$('.name,.edit').show();
$('.save').hide();
$(com_text).hide();
$(com_text).val('');
});
//Save
$('.save').click(function()
{
var sname = $(com_text).val().trim();
var dataobj = {};
dataobj.sid = $(this).attr('data-id');
dataobj.sname = sname.trim();
$.ajax(
{
type:"POST",
dataType:"json",
url:"pages/demo.php",
cache: false,
data: dataobj,
success:function(response)
{
$('.name').html(sname.trim());
$('.name,.edit').show();
$('.save,.cancel').hide();
$(com_text).hide();
$(com_text).val('');
}
});
});
});