Загрузка материала в модальное окно

Добрый день!
Подскажите, что-то не могу разобраться. как сделать так, чтобы определённые материал сайта подгружался в модальном окне. Хочу сделать вывод новостей. Сами анонсы как обычно, а вот пр нажатии по кнопке «Подробнее» хочу, чтобы вылезало модальное окно, а в нем сам материал необходимой мне новости отображался.
Не пойму как надо сделать вызов AjaxSnippet, чтобы анонсы подгружались а по клику по ссылке — в модальном окне грузилось все остальное.

Андрей

19 декабря 2015, 19:05

23 164

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

Сергей Шлоков

20 декабря 2015, 07:20

AjaxSnippet вам тут не поможет. Если вы не знаете javascript, то вам вряд ли объяснишь — нужно делать уже готовое решение, а если знаете, то вот материал в помощь.

Володя

20 декабря 2015, 09:23

может это то? modstore.pro/packages/ecommerce/quickview

Андрей

20 декабря 2015, 09:39

Да, принцип тот же. Вот на этой странице так реализован вывод документации. И там используется AjaxSnippet. По идее в модалку я сам распихаю, а вот как написать запрос ajaxSnippet пока не понял.

Valery

20 декабря 2015, 10:18

Обрати внимание на jQuery-плагин MagnificPopup, аналог LightBox. У него есть возможность вывода материала с подгрузкой по AJAX. По крайней мере, у меня подобное срабатывало без проблем. Можно сделать билд только с AJAX, если остальные функции не нужны.

Андрей

20 декабря 2015, 10:54

Сейчас сделал таким образом:
Сниппет AjaxNews

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

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

$res = '';
switch ($_POST['rid']) {
    case 'getResources':
        $id= filter_input(INPUT_POST,'rid');
        $resource = $modx->getObject('modResource',array('id' => $id));
        $pagetitle = $resource->get('pagetitle');
        $content = $resource->get('content');
        echo "<h1>$pagetitle</h1>";
        echo "$content";
        break;
}
if (!empty($res)) {
	die($res);
}

Вызов AjaxSnippet в шаблоне в модальном окне.

[[AjaxSnippet?
            &snippet=`AjaxNews`
            &parents=`9`
            &as_mode=`onload`
        ]]

Сами же анонсы выводятся просто

[[pdoResources?
  &parents=`9`
  &depth=`0`
  &tpl=`NewsRowTpl`
  &includeTVs=`news-image`
]]

И чанк NewsRowTpl такой:

<div class="col-xs-[[+tv.news-class]]">
    <div class="news-image col-xs-5">
        <img src="../[[+tv.news-image]]" class="img-responsive">
    </div>
    <div class="news-intro col-xs-15">
        [[+introtext]]
    </div>
    <a href="[[~[[+id]]]]" data-rid="[[+id]]" data-toggle="modal" data-target="#myModal">Подробнее</a>
</div>

Проблема в том, что сейчас все работает так: Анонсы выводятся правильно, тут ничего хитрого.
При нажатии на «Подробнее» вылезает модальное окно, в котором отображается ВСЯ страница новости (вместе с head и т.д.), как будто в iframe. Необходимо вывести лишь нужные поля, ну хотя бы поле «Содержимое».
И вторая проблема в том, что при повторном нажатии на ссылку Подробнее или на Подробнее из другой новости уже идет просто переход по ссылке.

Подскажите, где я накосячил?

Андрей

20 декабря 2015, 15:39

Сделал таким образом:

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

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

$action = $_POST['action'];
$res = '';
switch ($action) {
	case 'NewsContent':
		$rid = filter_input(INPUT_POST,'rid');
		$params = array();
		$params['action'] = $_POST['action'];
		$params['rid'] = $rid;
		$res = $params['rid'];
		$resource = $modx->getObject('modResource',$rid);
		$output = $resource->toArray();
		$pagetitle = $resource->get('pagetitle');
		$content = $resource->get('content');
		break;
}

if (!empty($res)) {
	echo $pagetitle;
	echo "$content";
	die();
}

Но есть несколько вопросов:

1. Результат корректно выводится только если отдается через echo. return не работает.
2. Как вывести разные поля ресурса в разные div: К примеру $content в div#result, а $pagetitle в div#header

Сергей Шлоков

22 декабря 2015, 13:08

Вот как вариант.

Андрей

25 декабря 2015, 10:33

Самое оно!
Обнаружил ряд мелких недочетов. Скорее всего даже опечаток.
1. В скрипте

$(document).on('click','#read-more',function(e){

В разметке же написан не id а класс:

<a class="read-more" data-id="5" href="#">Подробнее</a>

2. В коннекторе ajax.php проверяем на наличие action

...empty($_REQUEST['action'])...

В разметке его нет вообще.

<a class="read-more" data-id="5" href="#">Подробнее</a>

И теперь вопрос еще по коду. А как мне вместо надписи Модальное окно в самом модальном окне)) выводить заголовок статьи pagetitle?

P.S. Письмо о регистрации с Вашего сайта мне так и не пришло))

Сергей Шлоков

25 декабря 2015, 12:09

1. Опечатался, спасибо. Конечно нужен класс, ведь таких ссылок на странице несколько.
2. 'action' посылается в скрипте (см. «Шаг 2»). В принципе только для этого случая aсtion можно не использовать. Но это будет полезно для универсального контроллера, так как на него можно слать другие ajax-запросы для других действий.

А как мне вместо надписи Модальное окно в самом модальном окне)) выводить заголовок статьи pagetitle?

Для этого нужно доработать и ajax.php (чтобы возвращал и контент и заголовок) и javascript (чтобы разобрать результат запроса и расставить всё по местам). А load() заменить на post(). Т.е. это для самостоятельного примера.
П.С. А почта могла в спам попасть. Как минимум я и еще двое зарегистрировались без проблем.

Андрей

25 декабря 2015, 13:25

А помогите, пожалуйста, мне поправить контроллер и скрипт для моей задачи. У меня прямо затык на этом месте…
Я на этом месте завис:

$output = array();
$output['content'] = $object->get('content');
$output['pagetitle'] = $object->get('pagetitle');

На выходе я получаю массив с нужными полями, а как их раскидать в модальном окне? Это уже на стороне JS надо делать?

Андрей

25 декабря 2015, 14:10

Ага, раскурил я как нужно было делать. Выкладываю сюда, потому что думаю у меня тут с костылями все, возможно, кто-то напишет как можно было короче решить задачу)))

JS скрипт переписал так:

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	// Вставляем контент в тело модального окна
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.content);
			$('#modal-title').html(data.pagetitle);
			$("#mymodal").modal('show');
		}
	});
});

А сниппет [[!AJAX]] поправил так:

switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
        if (empty($id)) {
            exit();
        };
        $object = $modx->getObject('modResource',$id);
	$output = array();
        $output['content'] = $object->get('content');
	$output['pagetitle'] = $object->get('pagetitle');
	$output = json_encode($output);
        // Парсим теги MODX
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

Сергей Шлоков

25 декабря 2015, 14:18

Все проще.
В сниппете (хотя через файл будет быстрее) в массив нужно добавить признак успешности success=true

$output['success'] = true;
// И выводить в JSON
exit($modx->toJSON($output));

А в файле скрипта функцию load() заменить на post()

$.post("/assets/ajax.php",{action:"getContent",id:id}, function(response) {
	response.success = response.success || false;
	if (response.success) {
		$('.modal-title','#mymodal').text(response.pagetitle);
		$('#content','#mymodal').html(response.content);
		$("#mymodal").modal('show');
	}
}, 'json');

Андрей

25 декабря 2015, 14:22

Да, я тупанул, все через файл у меня))

Виталий Греков

25 декабря 2015, 16:34

Сможете выложить полное решение в тело Заметки?

Андрей

25 декабря 2015, 17:55

Да, не вопрос. Но отмечу, что выкладываю решение работающее, но без правок, которые предложил Сергей Шлоков.
Начнем с разметки. Используем стандартную разметку модального окна на Bootstrap 3.

<div id="mymodal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="modal-title"></h4>
      </div>
      <div class="modal-body" id="content">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Скрипт JS, размещаем на странице, на которой выводятся анонсы статей или в шаблон.

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.content);
			$('#modal-title').html(data.pagetitle);
			$("#mymodal").modal('show');
		}
	});
});

И теперь привожу код файла коннектора запросов ajax.php, который необходимо закинуть в папку assets.

<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}

$action = $_REQUEST['action'];

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;

$output = '';
switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
	$output = array();
        $output['content'] = $object->get('content');
	$output['pagetitle'] = $object->get('pagetitle');
	$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

@session_write_close();
exit($output);

Nik

08 января 2016, 16:03

Приветствую, Андрей.
А как выводить в модальное окно доп. поля c изображением, к примеру tv.news_pic?

Андрей

08 января 2016, 16:14

В файле-коннекторе получаем значение tv поля, например, так:

$output['img'] = $object->getTVValue('news_pic');

Таким образом, у Вас в массиве $output будет и значение TV параметра.
А уже в скрипте JS выводим на свой вкус, к примеру:

var img = data.img; //Заводим в переменную JS путь к картинке
	$('#content').prepend('<img src="'+img+'" id="modal-img"/>') //Вставляем изображение в тело модального окна
	$("#modal-img").css({	//Прописываем свойства для созданного изображения
		'float' : 'left',
		'margin' : '0 10px 5px 0',
		'width' : '100px',
	});

Nik

08 января 2016, 16:19

Спасибо большое! Оперативность ответа на уровне.

Игорь

27 октября 2023, 18:26

себе на заметку.

Николай Савин

27 октября 2023, 22:10

Для такого есть раздел избранное

Роман

27 августа 2016, 22:07

Приветствую!

У меня выводится вот это

{"content":"","pagetitle":"\u041a\u043e\u043d\u0434\u0438\u0446\u0438\u043e\u043d\u0435\u0440\u044b"}

Что я делаю не так?

— 1. Создал файл /assets/ajax.php
В него поместил вышеуказанный код:

<?php
// Если запрос не AJAX или не передано действие, выходим
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}

$action = $_REQUEST['action'];

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;

$output = '';
switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
		$output = array();
        $output['content'] = $object->get('content');
		$output['pagetitle'] = $object->get('pagetitle');
		$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

@session_write_close();
exit($output);

2. Подключен jQuery
3. Подключен JS

$(document).on('click','.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	// Вставляем полученный контент в HTML блок с id="content"
	$("#content").load("/assets/ajax.php",{action:"getContent", id:id});
});

4. На странице

<a class="read-more" data-id="42" href="#content">Подробнее</a>

<div id="content"></div>

Андрей

28 августа 2016, 11:15

Он у Вас возвращает ответ в виде массива json. Вам нужно его разобрать.

Роман

28 августа 2016, 11:17

Каким образом это можно сделать? У тебя так же работает или!?

Андрей

28 августа 2016, 11:19

Вам нужно его разобрать. по идее все верно — ведь в коде есть строка

$output = json_encode($output);

А в том коде что Вы привели — вы не разбираете JSON массив. Посмотрите в моем коде это есть:

$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")"); //Вот тут раскидываем JSON массив
			$('#content').html(data.content);
			$('#modal-title').html(data.pagetitle);
			$("#mymodal").modal('show');
		}
	});

Роман

28 августа 2016, 11:27

К сожалению нет, тоже самое =(
Я не использую бутстрап, по этому немного другие данные. Результата нет

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")"); //Вот тут раскидываем JSON массив
			$('#txt').html(data.content);
			$('#title').html(data.pagetitle);
		}
	}); 
});

Роман

28 августа 2016, 11:33

Вроде разобрался, заработало!

Андрей

28 августа 2016, 11:35

Дело не в бутстрапе, а в том что вы на выходе после файла ajax.php получаете json массив. И Вам его нужно разобрать, чтобы вставлять отдельно название, контент и т.д.
Вот команда eval("(" + response + ")"); позволяет это сделать.

Роман

28 августа 2016, 11:40

Только оказывается это не то, что мне нужно.

Сейчас при загрузке страницы эти данные (Ajax) подгружаются на эту же страницу.
Мне же нужно было, что бы только при клике на ссылку они подгрузились.

Где можно посмотреть, что бы подходило под мои задачи не знаешь?

Андрей

28 августа 2016, 11:49

Если тебе нужен переход по ссылке, то делай переход с передачей параметров. А там уже выводи…

Роман

28 августа 2016, 11:56

Если тебе нужен переход по ссылке, то делай переход с передачей параметров. А там уже выводи…

Можно развернуть ответ, не совсем понял мыль!

Сорри, после гулянки, голова плохо соображает =(

Вот сайт, это на Битриксе, мне нужно сделать такое же!
_http://pro.bitbitrix.ru/catalog/odezhda_i_obuv/

Когда наводишь на картинку товара, появляется кнопка, нажимаешь на нее, появляется модальное окно с данными этого товара. Тут прикол в чем, что данные в модальном окно подгружается только тогда, когда ты их вызываешь.

На этой странице реализовано что данные уже при загрузке страницы загружаются, что для меня не вариант.

Андрей

28 августа 2016, 12:08

Ну так ты тоже самое и сделал.
Тебе нужно получить нужные поля — например, картинку, название, цену.
Вот скриптов в файле ajax.php из получаешь.
В итоге в скрипт JS тебе падает JSON с этими полями
Ты его разбираешь и просто путем подстановки в заранее сверстанный макет разметки подставляешь:

$('#txt').html(data.content); // Здесь в блок с ID txt вставляешь то что в поле content
$('#title').html(data.pagetitle);// Здесь в блок с ID title вставляешь то что в поле title

Таким образом сама модалка у тебя пустая, без каких-либо заранее выводимых данных. Их ты получаешь только после нажатия на ссылку, после чего начинает работать скрипт и собирать данные.
Ну а на последнем этапе показывай саму модалку .modal('show')

Роман

28 августа 2016, 12:16

Да, я был не прав, говорю же после гулянки. То что ты выше написал, я сделал, все уже реализовал, вот ссылка посмотри, потом удалю
_http://remstroigrupp.ru/page под заголовком ссылка подробнее (тестовый вариант без оформления)

Просто я изначально запустил, посмотрел, а уже потом залез и посмотрел код, что у меня есть.

Тут наверное проблема в другом, что после закрытия модального окна, подгруженные данные остается на странице. К примеру у того же Битрикса он исчезает/удаляется _http://pro.bitbitrix.ru/catalog/odezhda_i_obuv/

Как это можно реализовать, или это уже лишнее?

Андрей

28 августа 2016, 12:27

Сделай после закрытия окна очистку полей .empty()

Роман

28 августа 2016, 13:35

Спасибо!

… а как указать, что вот оно закрылось? а то у меня все в теле получается =(

Андрей

28 августа 2016, 13:43

Например, так .fadeOut(); или так .hide();

Роман

28 августа 2016, 14:24

Андрей ты меня еще в больший в ступор ввел =(

Не будет наглостью, если я попрошу пример написать? Спасибо

Андрей

28 августа 2016, 14:30

У тебя все это дело в модалке открывается?
У нее есть например id=«modal»
Значит, закрываешь так

$(#modal).hide();

Роман

28 августа 2016, 14:43

Нет, не отрабатывает, к сожалению =(

и .hide(); не пойдет, нужно что бы удаляло/очищало данные в полях, а не скрывало (display: none;)

Андрей

28 августа 2016, 14:46

hide() ты закрываешь модалку, а после того, как она закрылась, тебе нужно очистить поля. Если сначала очистить а потом закрыть, то пользователь увидит, что поля очистились.
Закрываешь hide()
а потом

$('#txt').empty();
$('#title').empty();

Роман

28 августа 2016, 15:06

Ни как не хочет, display: none присваивает а поля ни очищает

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.content)
			$('#modal-title').html(data.pagetitle);
		}
	});
	$('modal-page').hide(function(){
		$('#content').empty();
		$('#modal-title').empty();
	});
});

Андрей

28 августа 2016, 15:09

$('#content').empty(); — может здесь запятая в конце а не точка с запятой должна быть?

Роман

28 августа 2016, 15:15

Не работает =( Попробуй у себя!

Андрей

28 августа 2016, 15:16

Я на даче))

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

28 августа 2016, 15:16

$('#content').html('');

Если не сработает — проверь, что скрипт вообще доходит до этой строки:

alert ('test');

Андрей

28 августа 2016, 15:17

Да, либо так))

Роман

28 августа 2016, 15:20

Мда, незадача! alert раньше срабатывает

т.е. сперва алерт, потом открывает модальное окно!

Андрей

28 августа 2016, 15:21

Кинь скрипт полностью, чтобы было понятно как у тебя там напсиано

Роман

28 августа 2016, 15:21

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.content);
			$('#modal-title').html(data.pagetitle);
		}
	});
	// alert ('test'); - тут тестил
	$('modal-page').hide(function(){
		$('#content').empty();
		$('#modal-title').empty();
	});
});

Андрей

28 августа 2016, 15:24

чето я алерта не вижу

Роман

28 августа 2016, 15:25

обновил

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

28 августа 2016, 15:27

$('modal-page').hide(function(){
	alert ('test'); 
	$('#content').html('');
	$('#modal-title').html('');
});

— сделай вот так и посмотри, будет ли срабатывать алерт при закрытии.

Андрей

28 августа 2016, 15:28

и да, алерт у тебя не там и не для того. Тебе нужно проверить срабатывает ли он при зарытии

Андрей

28 августа 2016, 15:27

Ну я чего-то вообще не вижу функции открытия модалки — она где?
По идее надо после

$('#modal-title').html(data.pagetitle);

хотя может я туплю?)

Роман

28 августа 2016, 15:35

Вооот! С этого и нужно было наверное капать )))

Моделька у меня на FancyBox

$(document).ready(function() {
	$(".read-more").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

или я что то опять не понял

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

28 августа 2016, 15:37

$(document).ready(function() {
	$(".read-more").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none',
		afterClose : function(){
			$('#content').html('');
			$('#modal-title').html('');
		}
	});
});

Роман

28 августа 2016, 15:38

Если вот так, то он открывает модальное окно, потом срабатывает алерт

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.content);
			$('#modal-title').html(data.pagetitle);
		}
	});
	$('#modal-page').hide(function(){
		alert ('test'); 
		$('#content').empty();
		$('#modal-title').empty();
	});
});

Андрей

28 августа 2016, 15:40

Потому что у тебя все завязано на одной функции, по клику на ссылку.
А закрытие окна отсюда вообще убери — тебе Макс написал как нужно оформить закрытие модалки.

Роман

30 августа 2016, 20:29

Приветствую!

Андрей, а обычный TV ты выводил? У меня почему то не хочет, так же не работает выше указанный код на картинку?

1) ajax.php

<?php 
// Если запрос не AJAX или не передано действие, выходим
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}

$action = $_REQUEST['action'];

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;

$output = '';
switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
        if (empty($id)) {
            exit();
        };
        $object = $modx->getObject('modResource',$id);
		$output = array();
		$output['pagetitle'] = $object->get('pagetitle');
        $output['content'] = $object->get('content');
		$output['img'] = $object->getTVValue('tplImage');
		$output['h1'] = $object->getTVValue('tplH1');
		$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

@session_write_close();
exit($output);

2) jQuery
3) JS

$(document).on('click','a.quick-preview',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
				$('#title').html(data.pagetitle);
				$('#h1').html(data.h1);
				$('#content').html(data.content);
			var img = data.img;
				$('#modal-img').prepend('<img src="'+img+'" class="modal-img"/>')
				$(".modal-img").css({
					'width' : '100%',
				});
		}
	});
});

4) Разметка

<a href="#modal-page" data-id="[[+id]]" class="favorites-button quick-preview">Предпросмотр</a>

<div id="modal-page">
            <div class="col-md-6">
                <div id="modal-img"></div>
            </div>
            <div class="col-md-6">
                <h1 id="title"></h1>
                <h2 id="h1"></h2>
                <div id="content"></div>
            </div>
        </div>

Простое TV вообще не выводит, а с картинкой «undefined»

Андрей

30 августа 2016, 22:20

Сейчас не могу посмотреть как я делал, но картинку выводил. Напомни завтра скину как делать, если сам не раскуришь)))
Возможно, через data параметры передавал. Или в скрипте их получал. Не помню…

Роман

31 августа 2016, 09:31

Ок, напомню!

Роман

01 сентября 2016, 19:28

Андрей — напоминаю тебе посмотреть как у тебя выводятся обычные TV и картинки =)!

Спасибо!

Андрей

01 сентября 2016, 21:12

Как называется у тебя TV поле с картинкой? У меня оно называется image
Эта строка получает его значение

$output['img'] = $object->getTVValue('image');

В результате ты получишь json, где одним из значений будет путь к картинке.
Дальше уже в JS ты разбираешь JSON

var img = data.img;
$('#modal-img').prepend('<img src="'+img+'" class="modal-img"/>') //В разметке должен быть блок с ID=modal-img

Здесь тебе есть смысл добавить строку

console.log(img);

Это выведет тебе в консоль значение IMG — ты уже тут увидишь, правильно ли у тебя все передается-получается.
Чтобы тестить php код — установи дополнение Console — там ты сможешь протестировать свой код, получить все необходимые значения и быть уверенным, что в той части (PHP) все правильно работает.

Роман

28 августа 2016, 15:39

Максим Кузнецов +1 спасибо! Победили )))

Роман

28 августа 2016, 15:37

del

Андрей

28 августа 2016, 15:39

Так бы и сказал. Максим все правильно написал.

Роман

28 августа 2016, 15:40

Таки да ))) Спасибо парни за помощь!

Виталий

01 сентября 2016, 16:50

Приветствую!

С помощью ваших советов удалось сделать загрузку Pagetitle, introtext и price. Делаю что-то вроде быстрого просмотра товара в модальном окне непосредственно из каталога, используется minishop2.
Как туда добавить другие поля?
нужны еще:
Картинки товара
свойства товара (favorite, popular, new, свои плагины)
кнопку добавления в корзину

или это можно сделать как-то иначе?
пробую еще так
[[!msProducts?
&resources=`13`
&tpl=`msProduct.content`
&includeThumbs=`340x476`
]]

выводятся свойства, цена, название. но как туда передавать id ресурса не знаю, и не показываются картинки (This resource is not instance of msProduct class.) кнопка тоже не работает

Андрей

01 сентября 2016, 21:15

нужны еще:
Картинки товара
свойства товара (favorite, popular, new, свои плагины)
кнопку добавления в корзину

Картинка как выводится — стандартно для Minishop?
Свойства получай как обычные значения товара minishop
Кнопка просто верстка — без всякой динамики

Виталий

02 сентября 2016, 13:39

Свойства товара удалось получить так же

$output['popular'] = $object->get('popular');
		$output['favorite'] = $object->get('favorite');
		$output['gipur'] = $object->get('gipur');

если чекбокс выбран – возвращает true. как сделать чтобы работало так же как плейсхолдер:

[[+popular:isnot=`0`:then=`<span class="hit">Хит</span>`:else=``]]

?

кнопка получается не функциональной

<button class="button button_green" type="submit" name="ms2_action" value="cart/add"><span>[[%ms2_frontend_add_to_cart]]</span></button>

пробую внутри модального окна вставить форму из чанка tpl.msProducts.row

<form method="post" class="ms2_form">
<input type="hidden" name="id" value="[[+id]]">
<input type="hidden" name="count" value="1">
<input type="hidden" name="options" value="[]">
<div class="price">[[+price]]  [[%ms2_frontend_currency]]</div>
 <button class="button button_green" type="submit" name="ms2_action" value="cart/add"><span>[[%ms2_frontend_add_to_cart]]</span></button>
 </form>

но так же не работает, товар в корзину не добавляется. Вместо «Добавить в корзину» – ms2_frontend_add_to_cart.
млжет этой форме нужно как-то передать ID товара?

value="[[+id]]"

картинки выводятся стандартно

<img src="[[+340x476:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]" />

Андрей

02 сентября 2016, 13:42

Модалку выводишь по ссылке?
Передай вместе с ней data параметр с ID data-uid=[[+id]]
а в JS так:

var id = $(this).data('uid');

Виталий

02 сентября 2016, 14:00

да, по ссылке, вывожу так:

<a class="read-more" data-id="[[+id]]" href="#modal-page">Быстрый просмотр</a>

в JS сейчас так:

$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	$("#content").load("assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.introtext);
			$('#modal-title').html(data.pagetitle);
			$('#price').html(data.price);
...

Андрей

02 сентября 2016, 14:14

Ну так назад ты id не возвращаешь…

Виталий

02 сентября 2016, 14:26

как его вернуть?)

Андрей

02 сентября 2016, 14:38

В ajax.php пихни его в массив $output. Здесь получишь в JS как

var id = data.id;

Ну и потом в

value = "'+id+'"

Виталий

02 сентября 2016, 19:04

получилось так:

$("input[name='id']").val(data.id)

спасибо!
еще подскажи пожалуйста как вывести сюда картинки minishop?

Андрей

02 сентября 2016, 19:25

Точно не помню, как делал. Сейчас не у компа.
Но можно передать также data параметром на крайняк:

data-pimg="[[+thumb]]"

Ну а потом по той же схеме.
Если на выходных напомнишь, напишу как получить картинку minishop

Виталий

03 сентября 2016, 15:06

Параметром не получилось. Ошибаюсь, по незнанию, наверно в php здесь
$pimg = isset($_POST['pimg'])? (int) $_POST['pimg']: 0;
полный код

$id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
$pimg = isset($_POST['pimg']) ? (int) $_POST['pimg'] : 0;
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
		$output = array();
		$output['id'] = $id;
        $output['introtext'] = $object->get('introtext');
		$output['pagetitle'] = $object->get('pagetitle');
		$output['new'] = $object->get('new');		
		$output['pimg'] = $object->get('pimg');

в JS здесь («src»,«data.pimg»);

var id = $(this).data('id') || 0;
var pimg = $(this).data('pimg') || 0;

	$("#content").load("assets/ajax.php",{action:"getContent",id:id}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.introtext);
			$('#modal-title').html(data.pagetitle);
$('#new').html(data.new);
$("input[name='id']").val(data.id);
$('#pimg').html(data.pimg);
 $("#image").attr("src","data.pimg");

как правильно? как делал ты?

Андрей

03 сентября 2016, 15:22

так а зачем ты приводишь переменную картинки к integer?
Оставляешь так:

$pimg = isset($_POST['pimg']);
...
$output['pimg'] = $pimg;

А в JS вроде все правильно.

Виталий

03 сентября 2016, 18:50

нет, не передает почему-то.

<a class="read-more" data-id="13" data-pimg="/kupalnik/assets/images/products/13/80x112/3.jpg"

а здесь вижу pimg:false

Андрей

03 сентября 2016, 18:52

$("#content").load(«assets/ajax.php»,{action:«getContent»,id:id},

ты здесь не отправляешь pimg

Виталий

03 сентября 2016, 18:57

$("#content").load("assets/ajax.php",{action:"getContent",id:id,pimg:pimg}, function(response){

теперь выдает true, а не /kupalnik/assets/images/products/13/80x112/3.jpg

Андрей

03 сентября 2016, 19:13

var pimg = $(this).data('pimg') || 0;

Попробуй замени на

var pimg = $(this).data('pimg');

Виталий

03 сентября 2016, 19:22

нет, по-прежнему true.

Андрей

03 сентября 2016, 19:46

Чего-то он не так передает, как будто тип данных не тот.
Скинь мне все скрипты, я у себя попробую потестить.
Кусок html, JS, php

Виталий

03 сентября 2016, 21:33

<a class="read-more" data-id="[[+id]]" data-pimg="[[+thumb]]" href="#modal-page">Быстрый просмотр</a>

<div id="modal-page">
<img src="" id="image">
<div id="modal-title"></div>
<div id="content"></div>

<div id="price"></div>
<div id="oldprice"></div>
<div id="new"></div>
<div id="popular"></div>
<div id="favorite"></div>
<div id="gipur"></div>
<div id="pimg"></div>

<form method="post" class="ms2_form">
<input type="hidden" name="id" value="">
<input type="hidden" name="count" value="1">
<input type="hidden" name="options" value="[]">
<div class="price">[[+price]]  [[%ms2_frontend_currency]]</div>
<button class="button button_green" type="submit" name="ms2_action" value="cart/add"><span>В корзину</span></button>
</form>
</div>

<script src="[[++assets_url]]tempalates/js/jquery.fancybox.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$(".read-more").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none',
		afterClose : function(){
			$('#content').html('');
			$('#modal-title').html('');
			$('#price').html('');
		}
	});
});


$(document).on('click','a.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
var pimg = $(this).data('pimg');

	$("#content").load("assets/ajax.php",{action:"getContent",id:id,pimg:pimg}, function(response){
		if (response) {
			var data = eval("(" + response + ")");
			$('#content').html(data.introtext);
			$('#modal-title').html(data.pagetitle);
			$('#price').html(data.price);
$('#oldprice').html(data.oldprice);
$('#new').html(data.new);
$('#popular').html(data.popular);
$('#favorite').html(data.favorite);
$('#gipur').html(data.gipur);
$('#pimg').html(data.pimg);
$("input[name='id']").val(data.id);
 $("#image").attr("src","data.pimg");
		}
	});

});
</script>

PHP

<?php
// Если запрос не AJAX или не передано действие, выходим
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}

$action = $_REQUEST['action'];

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;

$output = '';
switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
		$pimg = isset($_POST['pimg']);
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
		$output = array();
		$output['id'] = $id;
        $output['introtext'] = $object->get('introtext');
		$output['pagetitle'] = $object->get('pagetitle');
		$output['price'] = $object->get('price');
		$output['oldprice'] = $object->get('old_price');
		$output['new'] = $object->get('new');		
		$output['popular'] = $object->get('popular');
		$output['favorite'] = $object->get('favorite');
		$output['gipur'] = $object->get('gipur');
		$output['pimg'] = $pimg;
		
		$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

@session_write_close();
exit($output);

Александр

09 октября 2016, 21:48

Андрей Здравствуйте! Помогите пж разобраться, получается выводить в модалку только, контент и итротекст а так же картинку, но не получается tv поля.

В ajax.php прописываю так:

$output['titok'] = $object->get('titok');

В JS прописываю так:

$('#titok').html(data.titok);

В бутстрап разметке прописываю так:

<div class="modal-titok" id="modal-titok"></div>

Не выводится почему-то подскажите что делаю не так, так же не получается вывести и хлебные крошки

[[Breadcrumbs? &homeCrumbTitle=`Главная` &crumbSeparator=`<li> » </li> `&currentAsLink=`0` &pathThruUnPub=`0` &respectHidemenu=`1`]]

Уже просто замучился экспериментировать помогите пожалуйста разобраться как это сделать?

Андрей

09 октября 2016, 21:51

А если TV так получить:

$modx->resource->getTVValue('titok');

Попробуйте, получится?

Александр

09 октября 2016, 22:07

Андрей вставил в эту часть ajax.php правильно я сделал? остальное не чего не изменял, но не работает, модалка вообще не грузит если я так вставляю

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;
$modx->resource->getTVValue('titok');
$output = '';

Андрей

09 октября 2016, 22:12

нет, не сюда.
А нужно туда, где вы получаете все параметры. Привожу пример из моего кода:

switch ($action) {
    case 'getContent':
        $id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
	$output = array();
        $output['content'] = $object->get('content');
	$output['pagetitle'] = $object->get('pagetitle');
	$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}

Александр

09 октября 2016, 22:27

Вставил вот так: всё равно не работает, модалка загружается но поля этого нет, я вроде правильно вставил?

$output = json_encode($output);
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);        
        $modx->resource->getTVValue('titok');

		}

Александр

09 октября 2016, 22:50

Андрей возможны ли ищё варианты, может ли это зависить от поля числовое или текстовое, или это не играет роли?

Александр

09 октября 2016, 23:10

Спасибо огромное всё работает, недосмотрел вот в этом была проблема TVValue.

Александр

09 октября 2016, 20:05

Здравствуйте! Получается выводить в модалку только, контент и итротекст а так же картинку, но не получается tv поля.
В ajax.php прописываю так:

$output['titok'] = $object->get('titok');

В JS прописываю так:

$('#titok').html(data.titok);

В бутстрап разметке прописываю так:

<div class="modal-titok" id="modal-titok"></div>

Не выводится почему-то подскажите что делаю не так, так же не получается вывести и хлебные крошки

[[Breadcrumbs? &homeCrumbTitle=`Главная` &crumbSeparator=`<li> » </li> `&currentAsLink=`0` &pathThruUnPub=`0` &respectHidemenu=`1`]]

Уже просто замучился экспериментировать помогите пожалуйста разобраться как это сделать?

Андрей

09 октября 2016, 21:53

А крошки лучше выводите через [[pdoCrumbs]]

Александр

09 октября 2016, 23:11

А как это прописывать в аякс и скрипте?

Александр

10 октября 2016, 00:49

Андрей если Вам не трудно подскажите пожалуйста как сделать чтобы [[!prevNext]] работало в модальном окне?

Александр

15 октября 2016, 05:24

Замучился экспериментировать с [[pdoCrumbs]] как прописать в ajax и Php чтобы работало в модальном окне,
в ajax вставляю так:

$output['pdoCrumbs'] = $object->get('pdoCrumbs');

json так:

$modx->resource->get('pdoCrumbs');

в JS так:

$('#modal-pdoCrumbs').html(data.pdoCrumbs);

Поправьте пожалуйста что я не так делаю?

И если нужно чтобы в модалку загружался весь контент страницы, что нужно убрать или добавить?

Петр Синечёв

20 февраля 2019, 21:45

Обновлю топик…
Вопрос не совсем к modx, но всё же

Вызываю страницу auth.html кнопкой

<a href="#" class="btn btn-primary more" data-id="16">

Подключен скрипт

$(document).on('click','.more',function(e){
    e.preventDefault();
    // Вставляем контент в тело модального окна
    $("#ins").load("auth.html", function(response){
        // Если ответ не пустой, открываем модальное окно
        if (response) {
            $("#loginModalCenter").modal('show');
        }
    });
});

Загружается модальное окно и в нём не загружаются лексиконы, не работают закладки, не срабатывает jgrowl, не срабатывает авторизация и т.д.

Если содержимое auth.html положить на одной странице с кнопкой и вызывать стандартными методами bootstrap,

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#loginModalCenter">

Все загружается и работает нормально.

PS стоит написать — появляется решение

$(document).ready(function(){
	$(".more").click(function(){
		$.ajax({
			type: "POST",
			url: "/auth",
			success: function(){
               $("#loginModalCenter").modal('show');
			}
		});
	});
});

Петр Синечёв

20 февраля 2019, 21:57

а, нет, простите — это не решение, поторопился

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

Загрузка материала в модальное окно

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

Здесь упомянуты