Заполнение данными сайта всплывающего окна без перезагрузки страницы в Joomla 4

Информация о материале: Родительская категория: CMS — движки сайтов; Категория: Joomla 4

Введение. Постановка задачи модальных окон на сайте Joomla 4.

Этот совет возникает из возможного компонента, который имеет много информации, пока не подгруженной на страницу. Например, пользователь сайта на Joomla 4 хочет увидеть некоторые довольно большие фрагменты дополнительных данных или выполнить какую-либо задачу, например отправить электронное письмо. Эти функции запускаются кнопками или ссылками на исходной странице, содержащий такой функционал. Событие, инициализированное пользователем, например, клик по кнопке, открывает дополнительный диалог в модальном окне, и отображение диалогового окна запускает извлечение данных с помощью Javasript по специальному запросу с сервера в это модальное окно.

HTML-код для всплывающего окна

Код кнопки запуска находится в таблице в файле default.php с шаблоном вывода списка. По умолчанию существует 20 строк данных, поэтому 20 похожих кнопок:

<button
	class="btn btn-sm btn-info w5rem mb-1" 
	data-bs-toggle="modal" 
	data-bs-target="#modal-box" 
	data-bs-title="Починка шельфовых ледников" 
	data-bs-id="14794" 
	data-bs-action="showCampDescription" 
	onclick="return false;">
		Описание
</button>

Код всплывающего диалогового окна включен в нижнюю часть файла следующим образом:

<?php include_once JPATH_COMPONENT . '/layouts/modalbox.php'; ?>

И файл макета содержит следующее:

<?php echo HTMLHelper::_(
	'bootstrap.renderModal',
	'modal-box', // selector
	array( // options
		'modal-dialog-scrollable' => true,
		'title'  => 'Тут название',
		'footer' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
					<button type="button" class="btn btn-primary" id="modal-save">Отправить</button>',
	),
		'<div id="modal-body">Содержимое, заданное ajax.</div>'
); ?>

Обратите внимание, что на этом этапе модальное диалоговое окно содержит текст-заполнитель для заголовка, тела и двух кнопок нижнего колонтитула. Эти элементы обновляются с помощью Javascript при отображении модального диалогового окна.

Javascript всплывающего окна

var modalbox = document.getElementById("modal-box");
var modalSave = document.getElementById("modal-save");
if (modalbox) {
	var modalTitle = modalbox.querySelector('.modal-title');
	var modalBody = modalbox.querySelector('.modal-body');	
}

modalbox && modalbox.addEventListener('show.bs.modal', function (event) {
	// Кнопка, которая активировала всплывающее окно
	let button = event.relatedTarget;
	// Извлечение информации из атрибутов data-bs-* 
	let title = button.getAttribute('data-bs-title');
	let action = button.getAttribute('data-bs-action');
	let item_id  = button.getAttribute('data-bs-id');
	modalTitle.textContent = title;
	// Очистка содержимого модального окна
	modalBody.textContent = 'Извлечение контента - Пожалуйста, ждите!';
	// получить описание и внедрить в код модального окна
	if (action == 'showCampDescription') {
		// это простое отображение, поэтому кнопка действия не должна быть видна
		modalSave.classList.add('hidden');
		setModalContent('camp.getDescription', button.getAttribute('data-bs-id'), '')
	}
	...
	// еще много вариантов действий с асинхронной функцией для извлечения данных
	...
})

async function setModalContent(itemTask, itemId, saveTask) {
	const token = Joomla.getOptions('csrf.token', '');
	let url = 'index.php?option=com_mycomponent&task=' + itemTask;
	let data = new URLSearchParams();
	data.append(`itemId`, itemId);
	data.append(token, 1);
	const options = {
		method: 'POST',
		body: data
	}
	let response = await fetch(url, options);
	if (!response.ok) {
		throw new Error (Joomla.Text._('COM_MYCOMPONENT_JS_ERROR_STATUS') + `${response.status}`);
	} else {
		let result = await response.text();
		let description = document.querySelector(".modal-body");
		description.innerHTML = result;
		let modalSave = document.querySelector("#modal-save");
		if (saveTask) {
			modalSave.setAttribute('saveTask', saveTask);
			modalSave.classList.remove('hidden');
		} else {
			modalSave.classList.add('hidden');
		}
	}
}

Обработчик запроса содержимого модального окна на стороне сервера

Обратите внимание, что URL-адрес, установленный в javascript, вызывает компонент, контроллер и задачу. В этом случае com_mycomponent, CampController.php в папке src/Controllers и public function getDescription; Фрагмент кода:

	public function getDescription() {
		Session::checkToken('post') or die;
		$app = Factory::getApplication();
		$camp_id = $app->input->get('itemId', 0, 'int');
		...
		// получить данные в виде строки html
		...
		echo $result;
		exit();
	}

Результат

Обработчик запроса содержимого модального окна Joomla 4 на стороне сервера

Перевод официальной документации Joomla 4:
https://docs..org/Joomla_4_Tips_and_Tricks:_Modal_Box_Data

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)