Рейтинг: 5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Заполнение данными сайта всплывающего окна

  1. Введение. Постановка задачи модальных окон на сайте Joomla 4.
  2. HTML-код для всплывающего окна
  3. Javascript всплывающего окна
  4. Обработчик запроса содержимого модального окна на стороне сервера
  5. Результат


Введение. Постановка задачи модальных окон на сайте 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

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Войдите чтобы комментировать