Разработчикам

Форум

Фильтрация элементов инфоблока

Постоянный посетитель

Сообщений: 231 Баллов: 37 Регистрация: 13.04.2015

15.02.2019 09:40:06

Всем привет! Народ, подскажите, каким образом можно реализовать фильтрацию элементов инфоблока по его свойствам?

Есть инфоблок. У него есть свойства "Компания", "Тема", "Страна", "Дата проведения", "Файл".

Я на страницу накидал форму:

Код

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Title");
?>
 
 
 
<fo rm>
    <sel ect name="company" style="width: 100px;">
        <option value="Выберите страну">Выберите Компанию</option>
        <option value="National Securities Depository Limited">National Securities Depository Limited</option>
        <option value="National Settlement Depository">National Settlement Depository</option>
        <option value="Merkezi KayД±t KuruluЕџu A.Ећ.">Merkezi KayД±t KuruluЕџu A.Ећ.</option>
        <option value="TDCC Taiwan Depository & Clearing Corporation">TDCC Taiwan Depository & Clearing Corporation</option>
        <option value="Central Depository of Armenia">Central Depository of Armenia</option>
        <option value="CSDC (China Securities Depository and Clearing Corporation)">CSDC (China Securities Depository and Clearing Corporation)</option>
        <option value="Euroclear">Euroclear</option>
        <option value="KSD (Korean Securities Depository)">KSD (Korean Securities Depository)</option>
        <option value="SHCH (Shanghai Clearing House)">SHCH (Shanghai Clearing House)</option>
    </select>
 
    <select name="country">
        <option value="Выберите страну">Выберите страну</option>
        <option value="India">India</option>
        <option value="India">Russia</option>
        <option value="Turkey">Turkey</option>
        <option value="Taiwan">Taiwan</option>
        <option value="Armenia">Armenia</option>
        <option value="China">China</option>
        <option value="Belgium">Belgium</option>
        <option value="Korea">Korea</option>
        <option value="Korea">Korea</option>
    </select>
 
    <input type="date" name="date-fr om" />
    <input type="date" name="date-to" />
 
    <select name="subject" style="width: 140px;">
        <option value="Выберите тему">Выберите тему</option>
        <option value="E-Voting System of NSDL (Video)">E-Voting System of NSDL (Video)</option>
        <option value="E-Voting System of NSDL (Presentation)">E-Voting System of NSDL (Presentation)</option>
        <option value="Creating the E-Voting System for Shareholder Meetings in Russia (Article)">Creating the E-Voting System for Shareholder Meetings in Russia (Article)</option>
        <option value="E-voting System (Presentation)">E-voting System (Presentation)</option>
        <option value="Electronic General Meeting (e-GEM)">Electronic General Meeting (e-GEM)</option>
        <option value="Public Disclosure Platform (PDP)">Public Disclosure Platform (PDP)</option>
        <option value="Implementation of Non-Custody Services">Implementation of Non-Custody Services</option>
        <option value="E-Voting Opportunities">E-Voting Opportunities</option>
        <option value="FinTech and Cyber Resilience (Presentation, WFC Board, May 2017)">FinTech and Cyber Resilience (Presentation, WFC Board, May 2017)</option>
        <option value="Better Corporate Governance With E-voting Gradually Gets Adopted in Taiwan. -a Big Data Analysis of Taiwan’s E-voting in AGMs">Better Corporate Governance With E-voting Gradually Gets Adopted in Taiwan. -a Big Data Analysis of Taiwan’s E-voting in AGMs</option>
        <option value="Cash accounts & New opportunities">Cash accounts & New opportunities</option>
        <option value="Government bonds for individuals">Government bonds for individuals</option>
        <option value="Legal Risk Management for Stock Connect">Legal Risk Management for Stock Connect</option>
        <option value="Cross-border links challenges">Cross-border links challenges</option>
        <option value="CSDs’ role in Implementing Cross-border investments">CSDs’ role in Implementing Cross-border investments</option>
        <option value="China Bond Market">China Bond Market</option>
    </select>
 
</form>
 
 
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Хочу чтоб при выборе какого-либо пункта из выпадающего списка срабатывал бы фильтр, и на странице отображались бы только те элементы инфоблока, значение свойств которых совпадали бы со значением выбранного пункта из выпадающего списка. Подскажите, в какую сторону копать? Думаю использовать компонент birix:news.list Как думаете, я в правильном направлении двигаюсь?

Вот тут тестирую: https://aecsd.org/test

Прикрепленные файлы

1.jpg (228.84 КБ)

Пользователь 1947629 Эксперт Сообщений: 932 Баллов: 193 Регистрация: 18.04.2018	#2 0 15.02.2019 09:45:52 у news.list в параметрах вызова компонент проставить переменную фильтра, в которую из $_GET брать параметры ну а дальше обычные события js на change select делать submit формы

Пользователь 329042 Постоянный посетитель Сообщений: 231 Баллов: 37 Регистрация: 13.04.2015	#3 0 15.02.2019 10:38:16 Понял, спасибо, сейчас буду пробовать, т.е. получается без перезагрузки страницы эта штука будет работать если ajax применить, верно?

Пользователь 1947629 Эксперт Сообщений: 932 Баллов: 193 Регистрация: 18.04.2018	#4 0 15.02.2019 10:41:37 теоретически да но name у селектов и инпутов я бы написал так же, как они пишутся в параметрах фильтра в GetList

Пользователь 329042

Постоянный посетитель

Сообщений: 231 Баллов: 37 Регистрация: 13.04.2015

15.02.2019 13:02:21

Спасибо. Кажется что-то уже начинает получаться. На страницу, где размещён вызов компонента bitrix:news.list я добавил переменную фильтрации как вы и говорили:

Код
<? //$GLOBALS['filter_ex'] = array('PROPERTY_COUNTRY' => 'India');//фильтруем по стране ?>

И далее при вызове самого компонента указал эту переменную: ("FILTER_NAME" => "filter_ex",)

Код

<?$APPLICATION->IncludeComponent(
   "bitrix:news.list", 
   "pdf_list", 
   array(
      "COMPONENT_TEMPLATE" => "pdf_list",
      "IBLOCK_TYPE" => "ru",
      "IBLOCK_ID" => "54",
      "NEWS_COUNT" => "20",
      "SORT_BY1" => "ACTIVE_FROM",
      "SORT_ORDER1" => "DESC",
      "SORT_BY2" => "SORT",
      "SORT_ORDER2" => "ASC",
      "FILTER_NAME" => "filter_ex",
      "FIELD_CODE" => array(
         0 => "",
         1 => "",
      ),
      "PROPERTY_CODE" => array(
         0 => "",
         1 => "",
      ),
      "CHECK_DATES" => "Y",
      "DETAIL_URL" => "",
      "AJAX_MODE" => "N",
      "AJAX_OPTION_JUMP" => "N",
      "AJAX_OPTION_STYLE" => "Y",
      "AJAX_OPTION_HISTORY" => "N",
      "AJAX_OPTION_ADDITIONAL" => "",
      "CACHE_TYPE" => "A",
      "CACHE_TIME" => "36000000",
      "CACHE_FILTER" => "N",
      "CACHE_GROUPS" => "Y",
      "PREVIEW_TRUNCATE_LEN" => "",
      "ACTIVE_DATE_FORMAT" => "d.m.Y",
      "SET_TITLE" => "Y",
      "SET_BROWSER_TITLE" => "Y",
      "SET_META_KEYWORDS" => "Y",
      "SET_META_DESCRIPTION" => "Y",
      "SET_LAST_MODIFIED" => "N",
      "INCLUDE_IBLOCK_INTO_CHAIN" => "Y",
      "ADD_SECTIONS_CHAIN" => "Y",
      "HIDE_LINK_WHEN_NO_DETAIL" => "N",
      "PARENT_SECTION" => "",
      "PARENT_SECTION_CODE" => "",
      "INCLUDE_SUBSECTIONS" => "Y",
      "STRICT_SECTION_CHECK" => "N",
      "DISPLAY_DATE" => "Y",
      "DISPLAY_NAME" => "Y",
      "DISPLAY_PICTURE" => "Y",
      "DISPLAY_PREVIEW_TEXT" => "Y",
      "PAGER_TEMPLATE" => ".default",
      "DISPLAY_TOP_PAGER" => "N",
      "DISPLAY_BOTTOM_PAGER" => "Y",
      "PAGER_TITLE" => "Новости",
      "PAGER_SHOW_ALWAYS" => "N",
      "PAGER_DESC_NUMBERING" => "N",
      "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
      "PAGER_SHOW_ALL" => "N",
      "PAGER_BASE_LINK_ENABLE" => "N",
      "SET_STATUS_404" => "N",
      "SHOW_404" => "N",
      "MESSAGE_404" => ""
   ),
   false
);?>

Работает. Теперь мне надо как то сделать так, чтобы переменная фильтрации $GLOBALS['filter_ex'] = array('PROPERTY_COUNTRY' => 'India');
получала значение при срабатывании события onchange у select'a, например у того списка, который отвечает за выбор страны.

Я думал вот как: Сработает событие onchange, и в js я вызову submit формы, и в GET-массив попадёт параметр, но пока не получается.

Сергей, а как мне при срабатывании события onchange у select'а вызвать submit формы?
Сейчас вот так сделал:

Код

<sc ript>
   $(document).ready(function(){
      $('select[name="PROPERTY_COUNTRY"]').on('change', function(){
         console.log('onchange event');
         $('form#myform').submit(function(){

            console.log('form submit event');
         });
      });
   });
</sc ript>

Пока не работает.

Пользователь 1947629

Эксперт

Сообщений: 932 Баллов: 193 Регистрация: 18.04.2018

15.02.2019 13:24:51

Код

$(document)
.on('change', $('[name="PROPERTY_COUNTRY"]'), function() {
  $(this).closest('form').trigger('submit')
})
.on('submit', $('form'), function(e) {
  e.preventDefault();

//тут делаем ajax с методом GET например
})

Пользователь 1947629 Эксперт Сообщений: 932 Баллов: 193 Регистрация: 18.04.2018	#7 0 15.02.2019 13:30:09 я бы в селекты и инпуты задал бы какой-нибудь признак общий, чтобы не плодить функции change на каждый, например воткнул бы атрибут data-filter и по к нему бы обращался $('[data-filter]')

Пользователь 329042

Постоянный посетитель

Сообщений: 231 Баллов: 37 Регистрация: 13.04.2015

15.02.2019 13:54:20

Попробовал ваш код - ничего не происходит.
Сделал вот так:

Код

<sc ript>
   $(document).ready(function(){

      $('select[name="PROPERTY_COUNTRY"]').on('change', function(){
         $(this).closest('form').trigger('submit');
      }).on('submit', $('form'), function(e){
         e.preventDefault();

         $.ajax({
            type: "GET",
            url: 'https://aecsd.org/test',
            data: 'PROPERTY_COUNTRY=' + $('select[name="PROPERTY_COUNTRY"] option:selected').val(),
            success: function(msg){
               alert('success');
            },
            error: function(msg){
               alert('error');
            }
         });
      });

   });

</sc ript>

Но страница всё равно перезагружается, даже несмотря на то, что указано e.preventDefault();
И в URL после перезагрузки страницы всё равно попадают все поля, что есть в форме, а не те, что указаны в data

Пользователь 1947629

Эксперт

Сообщений: 932 Баллов: 193 Регистрация: 18.04.2018

15.02.2019 13:56:20

в консоле ошибки есть после изменения полей формы?
попадают все поля, потому что перезагружается страница
а ну да, потому что я не такой код в пример написал, что ты используешь, поэтому скорее всего ошибка в консоли
удали\закомментируй свой
и пробуй этот

Код

$(document)
.on('change', $('[name="PROPERTY_COUNTRY"]'), function() {
  $(this).closest('form').trigger('submit')
})
.on('submit', $('form'), function(e) {
  e.preventDefault();

   $.ajax({
      type: "GET",
      url: 'https://aecsd.org/test',
      data: 'PROPERTY_COUNTRY=' + $('select[name="PROPERTY_COUNTRY"] option:selected').val(),
      success: function(msg){
         alert('success');
       },
       error: function(msg){
          alert('error');
       }
    });
})

Пользователь 329042

Постоянный посетитель

Сообщений: 231 Баллов: 37 Регистрация: 13.04.2015

#10

15.02.2019 14:09:56

вставил полностью ваш код вместо своего, добавил только console.log('test') чтоб понимать, что событие сработало:

Код

<sc ript>
$(document)
   .on('change', $('[name="PROPERTY_COUNTRY"]'), function() {
     $(this).closest('form').trigger('submit')
   })
   .on('submit', $('form'), function(e) {
      e.preventDefault();
      console.log('test');

      $.ajax({
        type: "GET",
        url: 'https://aecsd.org/test',
        data: 'PROPERTY_COUNTRY=' + $('select[name="PROPERTY_COUNTRY"] option:selected').val(),
        success: function(msg){
          alert('success');
         },
         error: function(msg){
           alert('error');
         }
      });
   });
</sc ript>

ни console.log не срабатывает, ни ajax-запрос

Форум

Центр поддержки

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером