Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2016, 12:13
Профессор
Отправить личное сообщение для espltd Посмотреть профиль Найти все сообщения от espltd
 
Регистрация: 10.10.2012
Сообщений: 201

Параметры двух select для ajax запроса. Нужен совет
Доброго дня! Подскажите пожалуйста как правильно реализовать с точки зрения оптимизации, а то понимаю что расплодил сущностей. Суть в следующем:

1. Есть 4 выпадающих списка. Они зависимые друг от друга. Не могу понять, как правильно организовать отправку выбранных параметров на сервер, т.е. глупо писать на каждый выпадающий список событие change и вызывать аякс запрос с отправкой параметров, а то их 4 штуки получится.

2. Мне хотелось бы сделать таким образом, когда я выбираю последние зависимые выпадающие списки, чтобы считывались все выбранные мною элементы и отсылались единственным ajax запросом. Кнопочку Submit я не использую т.к. задумка именно такая, чтобы при выборе любого из селектов подгружалась инфа которая нашлась в базе по выбранным id-шникам. Ну думаю смысл понятен. Как именно сделать это правильно!? Заранее спасибо, вот код... 2 аякс запроса мне нужны для подгрузки зависимых селектов, наверное это тоже не верно и можно одним справиться... Буду благодарен за любые советы

/** серия - первая */ 
       $( '#series_one' ).on('change', function(){
            $.ajax({
    			data     : 'seriesID='+this.value,
    			url      : "<?=$this->createUrl('/site/SelectComplectation')?>",
    			success  : function(html){                    
                    if(html != '') $('#complectation_one').prop('disabled', false).html(html);
    				else $('#complectation_one').attr('disabled','disabled').html('<option>...</option>');                     
    			}
    		});  
       });
              
       /** серия - вторая */ 
       $( '#series_two' ).on('change', function(){
            $.ajax({
    			data     : 'seriesID='+this.value,
    			url      : "<?=$this->createUrl('/site/SelectComplectation')?>",
    			success  : function(html){                    
                    if(html != '') $('#complectation_two').prop('disabled', false).html(html);
    				else $('#complectation_two').attr('disabled','disabled').html('<option>...</option>');                     
    			}
    		});  
       });
       
       
       /** комплектация серии */ 
       $('#complectation_one').on('change', function(){
            $.ajax({
    			data     : 'complectationID_one='+this.value,
                type     : "POST",
    			url      : "<?=$this->createUrl('/site/SelectOption')?>",
    			success  : function(html){                    
                    if(html != '') $('#tabResult').html(html);              
    			}
    		}); 
       });
       
        /** комплектация серии */ 
       $('#complectation_two').on('change', function(){
            $.ajax({
    			data     : 'complectationID_two='+this.value,
                type     : "POST",
    			url      : "<?=$this->createUrl('/site/SelectOption')?>",
    			success  : function(html){                    
                    if(html != '') $('#tabResult').html(html);              
    			}
    		}); 
       });
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2016, 13:08
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 442

espltd,
Цитата:
глупо писать на каждый выпадающий список событие change и вызывать аякс запрос с отправкой параметров, а то их 4 штуки получится
1) Ничего глупого в таком случае нет. ты же не разом их делаешь
2) Я правильно понял зависимость?
serie_one --> complectation_one
  serie_two --> complectation_two

Если да то
- надо при загрузке страницы делать !один! запрос для заполнения главных селектов.

- При change в главных селектах идет запрос на соответствующую комплектацию. То есть тоже !один! запрос в зависимости от того в каком селекте произведен выбор

- Чтобы реагировать на заполнение всех(не всех) селектов тебе нужно при change в подчиненных селектах проверять значения и если они выбраты, то берешь все значения селектов и отправляешь. То есть тоже !один! запрос.
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2016, 13:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от espltd
глупо писать на каждый выпадающий список событие change
Это так.

Сообщение от espltd
и вызывать аякс запрос с отправкой параметров, а то их 4 штуки получится
А это как раз то, что позволит серверу определить о чем его просят. Событие onchange всех четырех списков должен обрабатывать один обработчик, который опрашивает сервер, различаются только параметры запроса, которые не сюда data : 'complectationID_one='+this.value, жестко прописывать, а давать эти имена спискам.
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2016, 13:37
Профессор
Отправить личное сообщение для espltd Посмотреть профиль Найти все сообщения от espltd
 
Регистрация: 10.10.2012
Сообщений: 201

Эх, не много можно подробнее... На данный момент у меня есть 2 аякс запроса на заглавные селекты, потому, что мне надо получить 2 параметра, id-шник первого и id-шник второго. Я не могу понять как это можно сделать одним аякс запросом, если у ник id-шники, по которым я вызываю событие разные. Т.е. мне приходиться вешать событие change на '#series_one' и еще на '#series_two', и естественно получается 2 аякс запроса, можно ли как-то одним воспользоваться? Как?
Ответить с цитированием
  #5 (permalink)  
Старый 21.11.2016, 13:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

У вас зависимые списки, а это означает, что выбор в любом из них, это очистить все следующие, получить значения для следующего и заполнить его. То есть операции над всеми списками одни и те же. Это раз.

Каждый из списков храниться на сервере под своим именем, а это означает, что имена списков могут служить ключом для сервера, по которому он определит данные какого списка запрашиваются. Это два.

Если каждый из списков в качестве имени будет иметь имя под которым его данные содержаться в базе (эти имена в списках смещены влево), то:

а) все списки имеют один и тот же обработчик изменения их состояния;
б) обработчик очищает все списки после текущего (источника события);
в) асинхронный запрос отправляет на сервер параметр как this.name=this.value
г) сервер получает данные запрашиваемого списка и возвращает их как JSON;
д) клиент заполняет следующий список по полученным данным.

Последний раз редактировалось laimas, 21.11.2016 в 16:19.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX - Контент только для основной категории, но не для субкатегорий или страниц nightkon AJAX и COMET 5 21.11.2016 12:22
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 19:48
Обработка данных во время AJAX запроса user783 AJAX и COMET 5 09.12.2011 01:24
AJAX - заполнение select - неправильно работает в Mozilla 5.0 С.Тарасов AJAX и COMET 0 16.06.2009 23:58