Как упростить или оптимизировать обработку событий, модальных окон и ajax запрос ?
Задача такая:
Есть 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(); }) }; Извиняюсь за такое кол-во кода, но хотел показать сразу все. Подскажите пожалуйста как это дело можно упростить, может как-то избавиться от дублирования ? Если у кого есть идеи как записать это проще, пожалуйста поделитесь. |
Такие вопросы следует решать самостоятельно.
Во первых вынести повторящиеся участки в отдельные функции, и использовать там где необходимо Во вторых сократить по максимуму использование всяких .done .success загрязняющих код,ибо $.ajax({ ... success:function(){}, complete:function(){} }) |
Часовой пояс GMT +3, время: 06:52. |