Joomla! Форма компонента и JQuery для добавления / удаления подмножества полей динамически

Question

У меня есть компонент Joomla для управления мастерскими, называемый com_workshops с соответствующей таблицей jos_workshops.

Затем у меня есть основной компонент com_users с таблицей jos_users.

У меня есть таблица ссылок, jos_works_users, чтобы связать пользователей с мастерскими (N, N).

Я знаю, как добавить поле формы type = "user", чтобы я мог выбрать модальное представление пользователейПользователь.

Но я бы хотел, чтобы форма могла добавлять столько типов полей формы, как этот, сколько я

, и динамически удалять их.Я думаю о

jQuery (append(), clone(), remove() functions)

Но не знаю, возможно ли это в Joomla!форма, и как это сделать.

Answer 1

Я сделал подобное поле, хотя я использовал mootools. Если бы я был тобой, я бы создал новый тип поля ( Joomla docs ) и добавил бы немного javascript на страницу, используя JHTML :: script (). Вам необходимо использовать входное имя, например jform [userids] [], чтобы браузеры могли передавать массив идентификаторов пользователей.

Мое дело было не совсем таким, как у вас, но вот как я это сделал:

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

<div id="ingredientList1">
    <div class="ingredient-row">
        <div class="delete"></div>
        <input type="text" class="amountField" style="display: block; " name="jform[ingredientAmounts][]">
        <input type="text" class="nameField" style="display: block; " name="jform[ingredients][]">
    </div>
    <div class="ingredient-row">
        <div class="delete"></div>
        <input type="text" class="amountField" style="display: block; " name="jform[ingredientAmounts][]">
        <input type="text" class="nameField" style="display: block; " name="jform[ingredients][]">
    </div>
    <div class="ingredient-row">
        <div class="add"></div>
        <input type="text" class="amountField" style="display: none; ">
        <input type="text" class="nameField" style="display: none; ">
    </div>
</div>

Ваш javascript должен:

1. Удаление строки (в mootools: row.dispose ()), когда пользователь нажимает кнопку удаления.
2. Сделать последнюю строку видимой и создать новую скрытую при нажатии кнопки добавления.
3. Есть метод, который может загружать предыдущие данные из БД.
4. Добавить код к вашей таблице в загрузке (чтобы выбрать ваши идентификаторы пользователей) и сохранить (чтобы сохранить их в БД).