В данном посте я хотел бы рассмотреть создание разных наборов полей (форм) для разных очередей.
Как здесь мне и посоветовали, я проследовал на otterhub и посмотрел там ветку, в которой велось обсуждение данной проблемы.
Что мы будем делать?
В данном примере - скрывать и показывать разные поля в зависимости от выбранного значения в селекте «Очередь» («Получатель», «To») посредством изменения атрибута class элементов DOM.
Что нам это даст?
У нас действительно будут разные формы заявок для разных очередей. Только вот именовать это решение «не костылём» язык не поворачивается.
Что делать?
1. Нам нужен файл .js, в котором мы будем хранить свои функции и их вызовы.
2. Нам надо добавить его через админ-интерфейс в Loader, чтобы при включении серверного кэширования и оптимизации *.js файлов всё произошло как надо.
3. Свой файл css, в котором мы будем хранить необходимые для совершения всего этого классы.
4. Файл css также необходимо добавить в Loader.
JS
1. Формируем JS объект:
Код: Выделить всё
var containers = {
'Dest': {
'22': ['external-network-access'],
'20': ['create-virtual-machine'],
},
'DynamicField_extAccessConnectionType': {
'3': ['radmin-fields'],
'5': ['vpn-fields', 'radmin-fields'],
},
};
Код: Выделить всё
'id_поля': {
'int целое число, создержащееся в value поля': ['контейнер1', 'контейнер2']
},
...
2. Показываем поля:
Код: Выделить всё
function showFields(elementId, elementVal) {
hideFields(elementId);
elementVal = parseInt(elementVal);
if (containers[elementId] != undefined) {
var current = containers[elementId];
if (!isNaN(elementVal)) {
if (Array.isArray(current[elementVal])) {
$.each(current[elementVal], function(i) {
var id = current[elementVal][i];
$('#' + id).removeClass(elementId + '-hidden');
setValidation(id);
});
}
}
}
}
Код: Выделить всё
3. Скрываем поля:
function hideFields(elementId) {
var current = containers[elementId];
$.each(current, function(i) {
var id = current[i];
$('#' + id).addClass(elementId + '-hidden');
//console.log('Added class: ' + elementId + '-hidden');
});
}