при выборе статьи в select, появлялся бы заголовок

Здравствуйте. Подскажите пожалуйста, как сделать при выборе статьи в поле select, появлялся заголовок статьи на той же самой странице?

<select class="form-control">
	<option class="link">Статья - 1</option>
	<option class="link">Статья - 2</option>
	<option class="link">Статья - 3</option>
	<option class="link">Статья - 4</option>
	<option class="link">Статья - 5</option>
</select>

<article>
	<span>Статья - 1</span>
</article>

Александр Янк

26 июня 2015, 07:34

1 957

Комментарии: 5

Илья Уткин

26 июня 2015, 15:11

Основы Ajax

Максим Кузнецов

26 июня 2015, 15:43

Если вы хотите вставить только заголовок (или любые другие данные, которые уже есть на данной странице в статьях):

<select class="form-control" id="titleSwitch">
	//здесь вызов при помощи pdoResources всех статей. Чанком отображения будет: <option class="link">[[+pagetitle]]</option>
</select>

<article>
	<span id="article-title">Статья - 1</span>
</article>


<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	$('#titleSwitch').on('change', function() {
		$("#article-title").text($("#titleSwitch option:selected").text()); //берем значение выбранной опции select-a и вставляем в заголовок
	});
</script>

— в противном случае, если данные нужно подгружать — то да, только ajax.

Александр Янк

26 июня 2015, 17:15

да, данные нужно подгрузить с других ресурсов. А как это сделать? есть ли какой нибудь пример?

Максим Кузнецов

26 июня 2015, 17:33

Тогда, как и сказал Илья Уткин, только через ajax.

Постараюсь помочь. Вот примерное решение:

В том месте, где вызываете select со списком, пишем:

<select class="form-control" id="articleSwitch">
	[[!pdoResources? &tpl=`articleSelectOption`]]
	//здесь нужно донастроить параметры для pdoResources, чтобы возвращался список только ваших статей
</select>

Создаем чанк articleSelectOption с содержимым:

<option data-id="[[+id]]" class="link">[[+pagetitle]]</option>

Теперь, где-нибудь внизу страницы после подключенного Jquery пишем:

<script type="text/javascript">
	var canSwitch = true;
	$('#titleSwitch').on('change', function() {
		if (canSwitch == true) {
		
			$.ajax({
				type: "POST",
				url: window.location.href,
				data: {action: 'getArticle', articleId: $("#titleSwitch option:selected").attr("data-id")},
			
				beforeSend: function(){
					canSwitch = false;
				},
			
				success: function(response) {
					$("#article-title").html(response); //здесь мы вставляем нужный результат в контейнер с id = article-title
	
					canSwitch = true;
				}
			});
		}
		return;	

	});
</script>

— при помощи этого мы через ajax обратимся к сниппету, который возвратит нам желаемые данные (в нашем случае — заголовок). Создадим сам сниппет (допустим ajaxReturn):

ajaxReturn

<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}

if (empty($_POST['action'])) {return;}

switch ($_POST['action']) {
	case 'getArticle':
		if (empty(intval($_POST['articleId']))) {
			return;
		}
		$articleOptions = array();
		$articleOptions['resources'] = intval($_POST['articleId']);
		$articleOptions['tpl'] = 'articleTitle'; //шаблон для возвращаемых данных
		//здесь по аналогии можно дописать доп. опции для сниппета pdoResources, через который мы получим результат
		
		$result = $modx->runSnippet('pdoResources', $articleOptions);
		
		break;
}

if (isset($result)) {
	die($result);
}

— теперь в самом низу страницы до закрыващего тега вызовем этот сниппет [[!ajaxReturn]]

Осталось только создать чанк articleTitle, с содрежимым, допустим [[+pagetitle]]

Максим Кузнецов

26 июня 2015, 17:41

Вообще, для одного заголовка правильнее в сниппете ajaxReturn получать данные через pdoField и не морочиться с чанком articleTitle, но в примере я написал через pdoResources на случай, если потребуется возвращать целое превью статьи.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.