Необходимо сделать что-то типо расписания
Саму форму сделал, все сформировал
Редактирование записей "на лету" получилось
Добавляю в сетку расписания новые элементы (с помощью всплывающего окна), в принципе работает, но редактирование для вновь добавленных элементов не происходит
Пытался с помощью on, наверно как то не так юзаю(
Еще есть проблема при закрытии окна добавления (#close_btn), вновь вызвать его (.add) не выходит
Подскажите как подправить
$(function (){
var oldVal, newVal, id, cell, edate, couple, staff2, grp, exercise, subject, place, add_td;
$('.edit').focus(function(){
oldVal = $(this).text();
id = $(this).data('id');
cell = $(this).data('cell');
console.log('edit: ' + oldVal + '|' + id + '|' + cell);
})
$('.add').click(function(){
$('#add_form').delay(100).fadeIn(100);
edate = $(this).data('edate');
couple = $(this).data('couple');
staff = $(this).data('staff');
$(this).parent().attr('id', 'cur_td');
console.log('add(part 1): ' + edate + '|' + couple + '|' + staff);
})
$('#close_btn').click(function(){
$('#add_form').delay(50).fadeOut(50);
$(this).parent().parent().attr('id', '');
})
$('#save_btn').on("click", "#cur_td", function(){
//$('#save_btn').click(function(){
grp = $("input[name='grp']").val();
exercise = $("input[name='exercise']").val();
subject = $("input[name='subject']").val();
place = $("input[name='place']").val();
//console.log('add(part 2): ' + grp + '|' + exercise + '|' + subject + '|' + place);
//console.log(add_td);
$.ajax({
url: 'index.php',
type: "POST",
data: {edate: edate, couple: couple, staff: staff, grp: grp, exercise: exercise, subject: subject, place: place},
beforeSend: function(){
$('#loader').fadeIn();
},
success: function(res){
$('#add_form').fadeOut();
$('#mes-edit').text(res).delay(400).fadeIn(600,function(){
$('#mes-edit').delay(600).fadeOut();
});
add_td ="<div class='edit n_edit' data-id='" + res + "' data-cell='grp' contenteditable='true'>" + grp + "</div><div class='inline'><div class='edit' data-id='' data-cell='exercise' contenteditable='true'>" + exercise + "</div> /<div class='edit' data-id='' data-cell='subject' contenteditable='true'>" + subject + "</div></div><div class='edit' data-id='' data-cell='place' contenteditable='true'>" + place + "</div>";
$('#cur_td').append(add_td);
$(this).parent().parent().attr('id', '');
$('div.add').remove();
},
error: function(){
alert('Error!');
},
complete: function(){
$('#loader').delay(400).fadeOut();
}
});
return false;
})
$('.edit').keypress(function(e){
if(e.which == 13){
newVal = $(this).text();
console.log(oldVal + ' - ' + newVal + ' - ' + id + ' - ' + cell);
if(newVal != oldVal) {
$.ajax({
url: 'index.php',
type: "POST",
data: {new_val: newVal, cell: cell, id: id},
beforeSend: function(){
$('#loader').fadeIn();
},
success: function(res){
//console.log(res);
$('#mes-edit').text(res).delay(400).fadeIn(600,function(){
$('#mes-edit').delay(600).fadeOut();
});
},
error: function(){
alert('Error!');
},
complete: function(){
$('#loader').delay(400).fadeOut();
}
});
}
return false;
}
})
})
