I have done many tries but i am not sure why this is so buggy. I know limiting question is being asked before. and i have implemented the solution for there solution.
but that solution seems buggy.
http://stackoverflow.com/questions/2867479/limiting-number-of-characters-in-a-contenteditable-div
actually it works but sometimes it sends the total amount in the ajax post..
if you see the ajax post in below pic.
you can see it is posting unusual character..
How ever i have tried to put limit to only 2 characters??
Here is the Code Below.
var sum=0;
//Now Need to Get Available Months on Based of Year
$('tr.tableRow td.inner').on('click',function(e){
// e.preventDefault();
// e.stopImmediatePropagation();
$(this).attr('contentEditable','true');
$(this).addClass('inputCopyCat');
$(this).focus();
var lastColumnTotal = $(this).parent().find('.totalTD').text();
var lastColumnSelector = $(this).parent().find('.totalTD');
// console.log(lastColumn);
max = 1;
sum = Number(lastColumnTotal) - Number($(this).text());
var editorSelector = $(this);
editorSelector.keyup(function(e){
$tr=$(this).closest('tr');
$tr.find('td.inner').each(function(){
//console.log(Number($(this).text()));
sum += Number($(this).text());
});
//$tr.find('td.inner:last-child').text(sum);
check_charcount(editorSelector, max, e);
});
editorSelector.keydown(function(e){ check_charcount(editorSelector, max, e); });
function check_charcount(editorSelector, max, e)
{
if(e.which != 8 && editorSelector.text().length > max)
{
// $('#'+content_id).text($('#'+content_id).text().substring(0, max));
e.preventDefault();
e.stopPropagation();
Parexons.notification('You can Not Add More Characters','warning');
}
}
});
$('tr.tableRow td.inner').focusout(function(e){
// e.preventDefault();
// e.stopImmediatePropagation();
$('td.inputCopyCat').removeAttr('contentEditable');
$('td.inputCopyCat').removeClass('inputCopyCat');
var hoursWorked = Number($(this).text());
var dateOfHoursWorked = $(this).attr('td-data');
var projectID = $( 'td:first-child', $( this ).parents ( 'tr' ) ).attr('data-project');
var lastColumnSelector = $(this).parent().find('.totalTD');
console.log(hoursWorked);
var postData = {
hoursWorked: hoursWorked,
dateOfHoursWorked: dateOfHoursWorked,
projectID: projectID
};
$.ajax({
url: "<?php echo base_url(); ?>leave_attendance/updateTimeSheetInfo",
data: postData,
type: "POST",
success:function(output){
var data = output.split("::");
if(data[0] === "OK"){
Parexons.notification(data[1],data[2]);
//Now Need to Sum The Values in the Total if Record Return is Success...
totalSum = sum + Number(hoursWorked);
//console.log(sum);
lastColumnSelector.html(sum);
}else if(data[1] === "FAIL"){
Parexons.notification(data[1],data[2]);
}
}
});
});
I have tried to create the same fiddle but i couldnt find this problem in fiddle thou the JQuery Code is same.?? its really confusing. i mean locally it also do works but sometimes send the unusual character even thou there is a limit. but on jsFiddle it seemed fine to me. and code is almost same.
Is there any way to fix the problem locally??
