Задача такая:
Есть 3 действия: Создать, Редактировать и Удалить. Все работает следующим образом:
Когда пользователь нажимает на кнопку создать, открывается модальное окно с формой для ввода данных, когда он нажимает Создать, обращение идет к функции, которая делает ajax запрос, примерно так все работает и для редактирования и удаления.
Как это выглядит:
//--------------------------------------------
// СОБЫТИЯ [Добавить, Редактировать, Удалить]
/**
* Удалить точку
*/
$(document).on("click",".confirm-delete", function() {
var content = '';
var x = $(this).data('coordx');
var y = $(this).data('coordy');
var coordId = $(this).data('coordid');
content+= '<p>Вы действительно хотите удалить точку x'+x+' y'+y+'?</p>';
content+= '<br/><br/><div class="text-center"><a href="#" class="button grey" onclick="deleteCoord('+coordId+'); return false">Подтверждаю</a></div>';
content+= '<div class="load"><div class="loader"></div></div>';
content+= '<div class="responce"></div>';
content+= '<div class="error"></div>';
modalText(content, 'confirm-delete');
});
/**
* Добавить точку
*/
$(document).on("click",".add", function() {
viewAddEditCoordTpl();
});
/**
* Редактирование точку
*/
$(document).on("click",".edit", function() {
viewAddEditCoordTpl($(this).data('coordid'), this);
});
/**
* Содержимое модального окна [добавить и редактировать точку]
*/
function viewAddEditCoordTpl(coordId, $this) {
coordId = typeof coordId !== 'undefined' ? coordId : false;
$this = typeof $this !== 'undefined' ? $this : false;
var x = '';
var y = '';
var field_name = '';
var button = '<a href="#" class="button green" onclick="addCoord(); return false">Добавить точку</a>';
// Редактирование
if(coordId) {
x = $($this).data('coordx');
y = $($this).data('coordy');
field_name = ($($this).data('field_name'))?$($this).data('field_name'):'';
button = '<a href="#" class="button green" onclick="editCoord('+coordId+'); return false">Редактировать точку</a>';
}
var content = '';
content+= '<form action="/server/controller.php" method="post" id="formCoord">';
content+= '<p><label>Координата X:</label> <input type="text" name="coordx" value="'+x+'" placeholder="Введите число" /></p>';
content+= '<p><label>Координата Y:</label> <input type="text" name="coordy" value="'+y+'" placeholder="Введите число" /></p>';
content+= '<p><label>Описание:</label> <input type="text" name="fieldName" value="'+field_name+'" placeholder="Описание координаты" maxlength="200" class="fieldName" /></p>';
content+= '</form><br />';
content+= '<div class="text-center">'+button+'</div>';
content+= '<div class="load"><div class="loader"></div></div>';
content+= '<div class="responce"></div>';
content+= '<div class="error"></div>';
modalText(content, 'test');
}
//--------------------------------------------
// ДЕЙСТВИЯ [Добавить, Редактировать, Удалить]
/**
* Создание точки
*/
function addCoord() {
$('.load').show();
$('.responce').hide();
$('.error').hide();
var x = $('#formCoord input[name=coordx]').val();
var y = $('#formCoord input[name=coordy]').val();
var fieldName = $('#formCoord input[name=fieldName]').val();
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax({
type: 'POST',
url: '/backend/controller.php',
data: { 'action':'addCoord', 'x':x, 'y':y, 'fieldName':fieldName}
}).success(function(responce) {
var checkResponce = jQuery.parseJSON( responce );
// Возникла ошибка
if (typeof checkResponce.error !='undefined') {
$('.error').html(checkResponce.error).show(300);
}else {
// Жадный рендер
renderAll(false,responce);
// Закрыть все окна
$.arcticmodal('close');
}
})
.fail(function() {
console.log( "error" );
})
.done(function() {
$('.load').hide();
})
};
/**
* Редактирование точки
*/
function editCoord(coordId) {
var x = $('#formCoord input[name=coordx]').val();
var y = $('#formCoord input[name=coordy]').val();
var fieldName = $('#formCoord input[name=fieldName]').val();
$('.load').show();
$('.responce').hide();
$('.error').hide();
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax({
type: 'POST',
url: '/backend/controller.php',
data: {'action':'editCoord', 'coordId':coordId, 'x':x, 'y':y, 'fieldName':fieldName}
}).success(function(responce) {
var checkResponce = jQuery.parseJSON( responce );
// Возникла ошибка
if (typeof checkResponce.error !='undefined') {
$('.error').html(checkResponce.error).show(300);
}else {
// Жадный рендер
renderAll(false,responce);
// Закрыть все окна
$.arcticmodal('close');
}
})
.fail(function() {
console.log( "error" );
})
.done(function() {
$('.load').hide();
})
};
/**
* Удаление точки
*/
function deleteCoord(coordId) {
$('.load').show();
$('.responce').hide();
$('.error').hide();
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax({
type: 'POST',
url: '/backend/controller.php',
data: { 'action':'deleteCoord', 'coordId':coordId}
}).success(function(responce) {
// жадный рендер
renderAll(false,responce);
// Закрыть все окна
$.arcticmodal('close');
})
.fail(function() {
console.log( "error" );
})
.done(function() {
$('.load').hide();
})
};
Извиняюсь за такое кол-во кода, но хотел показать сразу все.
Подскажите пожалуйста как это дело можно упростить, может как-то избавиться от дублирования ?
Если у кого есть идеи как записать это проще, пожалуйста поделитесь.