Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
 Аватар для nepster
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844

Как оптимизировать или упростить события с модальными окнами ajax запрос ?

20.04.2014, 00:21. Показов 649. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть 3 действия: Создать, Редактировать и Удалить.

Все работает следующим образом:
Когда пользователь нажимает на кнопку создать, открывается модальное окно с формой для ввода данных, когда он нажимает Создать, обращение идет к функции, которая делает ajax запрос, примерно так все работает и для редактирования и удаления.

Как это выглядит:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
       //--------------------------------------------
        // СОБЫТИЯ [Добавить, Редактировать, Удалить]
    
        /**
         * Удалить точку
         */
        $(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();
            })
        };

Извиняюсь за такое кол-во кода, но хотел показать сразу все.

Подскажите пожалуйста как это дело можно упростить, может как-то избавиться от дублирования ?
Если у кого есть идеи как записать это проще, пожалуйста поделитесь.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
20.04.2014, 00:21
Ответы с готовыми решениями:

подскажите что не так с модальными окнами?
Есть такой код, увеличиваю кол - во выводимых div после чего при нажатии на любую из кнопок открывается не то окно которое должно...

Переключение между модальными окнами
Доброго времени суток всем! Подскажите, вот заюзал эту &quot;штуку&quot;. Нашел на просторах инета, для себя довльно простую реализацию ...

Ошибки с модальными окнами и TListView
Добрый день. Возникла следующая проблема. Суть программы. Некое количество форм. MainForm – содержит стандартные кнопки «создать»,...

2
 Аватар для Roman_rc
26 / 26 / 12
Регистрация: 04.02.2013
Сообщений: 250
20.04.2014, 17:11
Упростить можно избавившись от jQuery и написать ajax часть на чистом js.
0
 Аватар для nepster
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844
21.04.2014, 14:44  [ТС]
перенес все на AngularJs вышло таки отлично.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.04.2014, 14:44
Помогаю со студенческими работами здесь

Ошибка при работе с модальными и немодальными окнами
Доброго времени суток,уважаемые! Суть проблемы в следующем: Ошибка связанная с модальными и немодальными окнами. Код кнопки, при нажатии...

Как упростить/оптимизировать js?
Друзья в js понимаю мало, написал вот такой код https://jsfiddle.net/adash/8h3L2thk/ первая и вторая часть кода абсолютно идентичны,...

Определить AJAX библиотеку или отследить AJAX запрос любым методом
Требуется определить какая библиотека используется на сайте для создания AJAX запросов. Стандратный запрос типа windows.jquery.active не...

Оптимизировать или переписать запрос
Здравствуйте SELECT comp.COMP_ID, comp.COMP_NAME, comp.COMP_CITY, comp.COMP_ADR, ...

Переключение между модальными (и не модальными формами )
Здраствуйте. У меня есть Form1 и Form2, как наладить переключение между ними? из Form1 в Form2 #include &quot;Form2.h&quot; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru