TicketForm и поля multiselect (multiple)

2 1 000
Всем здравствуйте.

Искал решения для заполнения полей типа multiselect htmlbook.ru/html/select/multiple через ticketForm. Есть решение для select modx.pro/help/6325/#comment-45022, но хотелось бы использовать ТВ-поля «множественный список» в админке, а на фронтенде — multiselect. Нужно это для последующей фильтрации через mFilter2. У страницы будут выбраны одно или несколько значений из списка с множественным выбором.

Если у вас есть наработки в этой области и вы готовы поделиться — я с удовольствием отблагодарю небольшим спасибо на карту или телефон.

Заранее благодарен.
Wassi Wassinen
10 мая 2018, 07:55
modx.pro
1
1 000
0

Комментарии: 3

Максим Кузнецов
15 мая 2018, 16:25
+2
На мой взгляд, плагин тут нецесообразен, так как, во-первых, увеличит время сохранения тикета, а во-вторых его относительно-универсальная реализация (в случае, если нужен точечный контроль формы, родителей и тд) будет куда более громоздкой, чем тоже самое, но на js:

1. Добавляем в параметры допустимых полей сниппета ticketForm необходимое тв-поле (tvname1)

2. Добавляем внутри формы создания/обновления мультиселектор:
<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

2. Добавляем для тега select атрибут data-real, со значением, равным названию нашего тв-поля и произвольный класс (пусть будет bimbo-input, от слова «пустышка»):
select data-real="tvname1" class="bimbo-input"

3. После тега select (или в любом другом месте внутри тега form) добавляем настоящий инпут, хранящий значение тв-поля:
//Для формы создания
<input type="hidden" name="tvname1" id="ticket-tvname1" class="bimbo-real" value="" />

//Для формы обновления
<input type="hidden" name="tvname1" id="ticket-tvname1" class="bimbo-real" value="[[+tvname1]]" />

4. В js добавляем событие, переносящие заполненные значения от селектора-пустышки в настоящий инпут при изменении первого:
$(document).on('change', '.bimbo-input', function(e) {
	$('input[name="' + $(this).attr("data-real") + '"]').val($(this).val());
});

5. В тот же js добавляем событие, переносящие реальное значение из скрытого инпута в пустышку при загрузке страницы:
$(document).ready(function(){
	$('.bimbo-real').each(function(){
		$('.bimbo-input[data-real="' + $(this).attr("name") + '"]').val($(this).val());
	});
});

В итоге:
— решение относительно универсально, т.к. не привязано ни к ticket-ам, ни к конкретным родителям, а упирается только в наличие нужных классов и скрытых полей
— вся лишняя нагрузка происходит в процессе заполнения
— может работать не только с мультиселекторами, но и простыми селекторами или инпутами (удобно в случаях, если селектор нужно кастомизировать каким-либо js-скриптом, который в процессе видоизменяет его структуру)
    Максим Кузнецов
    15 мая 2018, 16:48
    +2
    UPD: Упс, забыл добавить преобразование массива значений в пригодный вид для мультиселектора админке:

    //измененный шаг 4
    $(document).on('change', '.bimbo-input', function(e) {
    	var real_form = $('input[name="' + $(this).attr("data-real") + '"]');
    
    	if ($(this).val() instanceof Array) {
    		real_form.val('');
    
    		$.each($(this).val(), function(key, value) {
    			if (real_form.val() == "") {
    				real_form.val(value);
    			}
    			else {
    				//Если разделитель отличается от дефолтного - указать актуальный
    				real_form.val(real_form.val() + '||' + value);
    			}
    		});
    	}
    	else {
    		real_form.val($(this).val());
    	}
    });
      Максим Кузнецов
      15 мая 2018, 19:47
      +2
      UPD2: Вдогонку, раз изменили шаг 4, нужно подправить и шаг 5:

      $(document).ready(function(){
      	$('.bimbo-real').each(function(){
      		if ($(this).val().split("||") instanceof Array) {
      			//В зависимости от указанного в админке разделителя, заместо || может быть запятая
      			$('.bimbo-input[data-real="' + $(this).attr("name") + '"]').val($(this).val().split("||"));
      		}
      		else {
      			$('.bimbo-input[data-real="' + $(this).attr("name") + '"]').val($(this).val());
      		}
      	});
      });
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    3