У меня есть некоторые проблемы со встроенным редактированием в jquery, и я надеюсь, что вы мне поможете.У меня есть таблица, сгенерированная динамически с данными в 2 ячейках.Одна ячейка содержит название действия, а другие пустые, но имеют цвет фона, который показывает цвет, назначенный действию.
Теперь я хочу сделать inline-редактирование.Для части имени, это работает хорошо.Когда вы нажимаете на имя, появляется поле ввода с кнопкой «Сохранить», «Отмена», «Удалить» ... все работает хорошо.
Для цветовой ячейки идея состоит в том, чтобы отображать палитру цветов, когда пользователь щелкает в ячейке., и он может изменить цвет с помощью палитры цветов, а затем сохранить, удалить или отменить.отменить и удалить работу удачно, но при сохранении после выбора нового цвета событие нажатия запускается снова.Поэтому, когда я закончил, чтобы сохранить, он сохраняет, но затем у меня есть поле редактирования, которое появляется снова.Я должен нажать на кнопку «Отмена», чтобы получить все правильно.Вот мой код для большей ясности.
$(document).ready(function () {
.......
......
//Editable class: Edit an entry when mouse hover
$('.editablecolor').live({
click: function (e) {
//start inline editing
alert('editing color');
var $editable = $(this);
if ($editable.hasClass('active-inline')) {
return;
}
//get the current backgroundColor
initialValue = $(this).css('background-color');
editType = 'color';
alert(initialValue);
$editable
.addClass('active-inline')
.empty();
//define the edit element
var editElement = '<input type="text" class="kolorPicker" />';
$(editElement)
.val(initialValue)
.appendTo($editable)
.focus();
addEditButtons($editable);
}
});
function addEditButtons($editable) {
$editable.append('<div class="editFieldButtons"><input type="button" value="save" class="editFieldSave"/>' +
', <input type="button" value="delete" class="editFieldDelete"/>or ' +
'<input type="button" value="cancel" class="editFieldCancel"/></div>');
$('.editFieldButtons > .editFieldSave').click(editSave);
$('.editFieldButtons > .editFieldDelete').click(editDelete);
$('.editFieldButtons > .editFieldCancel').click(editCancel);
$('input.editField').keydown(function (e) {
if (e.keyCode == 13) {
// Enter
editSave();
} else if (e.keyCode == 27) {
// Escape
editCancel();
}
});
}
//Saving edit value
function editSave() {
alert('editSave editType: ' + editType);
if (editType == 'name') {
// ...works correctly
}
else if (editType == 'color') {
alert('editSave start to save ');
$('.editFieldButtons, .kolorPicker').attr('disabled', 'disabled');
var $editField = $('.kolorPicker');
var $editable = $editField.parents('.editablecolor');
var contents = $editField.val();
var parentdiv = $editable.parents('div').filter(':first').attr('id');
var editID = $editable.attr('id').toString().split('_')[1];
$editField.replaceWith('<em class="ajax">Saving...</em>');
alert('editSave about to save ');
// post the new value to the server along with its ID
$.post(
processpage,
{ id: editID, value: contents, tc: parentdiv, cmd: cmdUpdate, fieldToUpdate: editType },
function (data) {
$editable
.removeClass('active-inline')
.empty()
.css('background-color', contents);
alert('editSave finish to save ');
});
}
} //end function
Спасибо за вашу помощь.