I have the Demo Table which I can click on the cell(td tag) and I can change the value on it.direct php DataBase.
to do that I need to contain two tags.1 - span. 2 - input.
like the below.
<td class='Name'>
<span id="spanName1" class="text" style="display: inline;"> Somevalue </span>
<input type="text" value="Somevalue" class="edittd" id="inputName1" style="display: none; ">
</td>
to control on the data inside the cell I use in jquery .mouseup function.
mouseup work but also make truble.
I need to replace it with blur function but when I try to replace mouseup with blur
the program thas not work becose, when I click on the cell I able to enter the input tag and I can change the value but I can't Successful to Leave the tag/field by clicking out side the table, which alow me to update the DataBase
you can see that Demo with blur Here.
what you advice me to do?
$(".edittd").mouseup(function() {
return false;
});
//*************
$(document).mouseup(function() {
$('#span' + COLUME + ROW).show();
$('#input'+ COLUME + ROW ).hide();
VAL = $("#input" + COLUME + ROW).val();
$("#span" + COLUME + ROW).html(VAL);
if(STATUS != VAL){
//******ajax code
//dataString = $.trim(this.value);
$.ajax({
type: "POST",
dataType: 'html',
url: "./public/php/ajax.php",
data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString}
cache: false,
success: function(data)
{
$("#statuS").html(data);
}
});
//******end ajax
$('#statuS').removeClass('statuSnoChange')
.addClass('statuSChange');
$('#statuS').html('THERE IS CHANGE');
$('#tables').load('TableEdit2.php');
}
else
{
//alert(DATASTRING+'status not true');
}
});//End mouseup function
I change it to:
$(document).ready(function()
{
var COLUMES,COLUME,VALUE,VAL,ROWS,ROW,STATUS,DATASTRING;
$('td').click(function() {
COLUME = $(this).attr('class');
});
//****************
$('tr').click(function() {
ROW = $(this).attr('id');
$('#display_Colume_Raw').html(COLUME+ROW);
$('#span' + COLUME + ROW).hide();
$('#input'+ COLUME + ROW ).show();
STATUS = $("#input" + COLUME + ROW).val();
});
//********************
$(document).blur(function() {
$('#span' + COLUME + ROW).show();
$('#input'+ COLUME + ROW ).hide();
VAL = $("#input" + COLUME + ROW).val();
$("#span" + COLUME + ROW).html(VAL);
if(STATUS != VAL){
//******ajax code
//dataString = $.trim(this.value);
$.ajax({
type: "POST",
dataType: 'html',
url: "./public/php/ajax.php",
data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString}
cache: false,
success: function(data)
{
$("#statuS").html(data);
}
});
//******end ajax
$('#statuS').removeClass('statuSnoChange')
.addClass('statuSChange');
$('#statuS').html('THERE IS CHANGE');
$('#tables').load('TableEdit2.php');
}
else
{
//alert(DATASTRING+'status not true');
}
});//End mouseup function
$('#save').click (function(){
var input1,input2,input3,input4="";
input1 = $('#input1').attr('value');
input2 = $('#input2').attr('value');
input3 = $('#input3').attr('value');
input4 = $('#input4').attr('value');
$.ajax({
type: "POST",
url: "./public/php/ajax.php",
data: "input1="+ input1 +"&input2="+ input2 +"&input3="+ input3 +"&input4="+ input4,
success: function(data){
$("#statuS").html(data);
$('#tbl').hide(function(){$('div.success').fadeIn();});
$('#tables').load('TableEdit2.php');
}
});
});
});
Thx
