TicketForm и поля multiselect (multiple)

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

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

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

Заранее благодарен.
Wassi Wassinen
Wassi Wassinen
10 мая 2018, 07:55
modx.pro
1
2 724
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