при выборе статьи в 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
modx.pro
1 900
0

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

Илья Уткин
Илья Уткин
26 июня 2015, 15:11
+1
Основы Ajax
    Максим Кузнецов
    Максим Кузнецов
    26 июня 2015, 15:43
    +1
    Если вы хотите вставить только заголовок (или любые другие данные, которые уже есть на данной странице в статьях):
    <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
      0
      да, данные нужно подгрузить с других ресурсов. А как это сделать? есть ли какой нибудь пример?
        Максим Кузнецов
        Максим Кузнецов
        26 июня 2015, 17:33
        +1
        Тогда, как и сказал Илья Уткин, только через 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
          +1
          Вообще, для одного заголовка правильнее в сниппете ajaxReturn получать данные через pdoField и не морочиться с чанком articleTitle, но в примере я написал через pdoResources на случай, если потребуется возвращать целое превью статьи.
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      5