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

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

Андрей

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

23 581

Комментарии: 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

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