Here, I can see box only on one element, the one I selected for edition. I want to see box on all the elements when I click on edit. How can I deal with this?
Here is my code...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function mDown(obj) {
obj.innerHTML="update"
}
function mUp(obj) {
obj.innerHTML="update"
}
jQuery(document).ready(function(){
jQuery("form").submit(function(){
//alert("Submitted");
jQuery("#myform").submit();
});
$('.edit').click(function(){
//alert("Submitted");
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="'+
$(this).text().length+'" value="' +
$(this).text() + '" type="text">');
$('#editbox').focus();
});
$('.edit').keydown(function(event){
// alert("Submitted");
arr = $(this).attr('class').split( " " );
if(event.which == 13) {
$.ajax({
type: "POST",
url:"config.php",
data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
success: function(data){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}});
}
});
$('#editbox').live('blur',function(){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
$('td.delete1').on('click',function() {
//alert("Submitted");
var parent = $(this).closest('tr');
$.ajax({
type: 'get',
url: 'dl.php', // <- replace this with your url here
data: 'ajax=1&delete=' + $(this).attr('id'),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.fadeOut(300,function() {
parent.remove();
});
}
});
$('.delete').confirm({
msg:'Do you really want to delete this?',
timeout:3000
});
});
});
Your $(this) will hold the only element on which, you have clicked.
So,
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="'+
$(this).text().length+'" value="' +
$(this).text() + '" type="text">');
this code will add textbox to only that element.
You need to take parent of clicked element first, like
var p = $(this).parentNode;
and then take all child nodes for 'p' element.
And use for loop for all child elements and add above code for each single element, not for $(this).