Содержимое поста в модальном окне?

Question

[Mikhail Derkach]

Добрый день. Столкнулся с проблемой.
Надо сделать функционал отображения заголовка, миниатюры и <?php the_content?> в модальном окне.
Проблема в том, что при клике на область, к которой привязан попап, он подгружает данные не этого поста, а хронологически первого.
Читал, что нужно сделать AJAX-запрос, но знаний в этом направлении 0, а решить нужно оперативно проблему.

Если коротко сформулировать вопрос

суть вкратце

модальное окно отображает данные только одного поста, который создан первым. А надо, чтобы при клике по ссылке отображался конкретный пост, в котором эта ссылка размещена. Соответственно, я ищу решение, как можно передать в попап данные этого поста

Коды:

исходники

Код попапа:

<div id="order-popup-big" class="popup-form popup-big">
        <form method="post" action="../handlers/picture.php" id="callback-order-picture" class="form-callback form">
            <h1 class="item-name"><?php the_title(); ?></h1>
            <div class="form-container">
                <div class="left-cont">
                    <div class="thumb"><?php echo get_the_post_thumbnail( $post_ID, array(261, 215), array('class' => 'first-abs-item-img') ); ?></div>
                </div>
                <div class="right-cont">
                    <div class="excerpt">
                        <?php the_content()?>
                    </div>
                    <div class="bottom-inputs">
                       <h2>Заказать картину</h2>
                        <label class="popup-label">
                            <input class="popup-input" type="text" name="name" placeholder="Введите имя">
                        </label>
                        <label class="popup-label">
                            <input class="popup-input" type="tel" name="number" placeholder="Введите номер телефона">
                        </label>
                        <div class="popup-button-wrapper">
                            <button class="popup-button">
                                <span class="popup-button-p">Заказать картину</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

Код loop:

<?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); $post_id = get_the_ID();?>
                <div class="first-abs-item">
                    <div class="first-abs-item-up">
                        <a href="#order-popup-big" data-permalink="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" class="fancybox gather-data first-abs-item-img"><?php echo get_the_post_thumbnail( $id, array(267, 213), array('class' => 'first-abs-item-img') ); ?></a>
                        <a href="#order-popup-big" iata-permalink="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" class="fancybox gather-data first-abs-picture-name"><?php the_title(); ?></a>
                    </div>
                    <?php the_excerpt()?>
                </div>
            <?php endwhile; ?>
            <?php endif; ?>

На просторах интернета нашел следующий код, который кастомизировал чуть под себя:

jQuery('.gather-data').on('click', function() {
    var $thisContent = jQuery(this);
    jQuery.ajax({
        url:'****',
        method:'***',
        data:{
            imageId:$thisImage.attr('data-id')
        }
        dataType:'JSON'
    }).then(function(res) {
        jQuery('#order-popup-big').bindParams({
            imageSrc:res.src,
            imageId:res.id,
            imageName:res.name
        }).show();
    });
});

но что еще нужно исправить и как написать - не знаю + отладчик ругается на строку dataType:'JSON'

Буду признателен любой помощи

Comments

[DTX]

Ничего не понятно, многа букав, лень читать. Упрости вопрос.

>отладчик ругается на строку dataType:'JSON'
Заявтой перед dataType не хватает.

[Mikhail Derkach]

DTX: модальное окно отображает данные только одного поста, который создан первым. А надо, чтобы при клике по ссылке отображался конкретный пост, в котором эта ссылка размещена. Соответственно, я ищу решение, как можно передать в попап данные этого поста

запятую поставил, спасибо

Answer 1

[Артем Чернявский]

но что еще нужно исправить и как написать - не знаю + отладчик ругается на строку dataType:'JSON'

Забыли запятую после data: { ... }

А тут опечатка iata-permalink*

<a href="#order-popup-big" iata-permalink="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" class="fancybox gather-data first-abs-picture-name"><?php the_title(); ?></a>

Думаю можно и без AJAX, а просто брать данные текущей записи посредством jquery

$('.popup-form').fancybox({
	beforeLoad: function () {
		$('h1.item-name').html($('.first-abs-picture-name').html());
		$('.thumb').html($('.first-abs-item-img').html());
		$('.excerpt').html($('.first-abs-item-up').next().html());
	}
});

Конечно очень сомневаюсь в корректности данного способа, есть и более красивее :) но если нужно быстро то как вариант

Comments

[Mikhail Derkach]

я опробовал предложенное вами решение, но не получилось. Из шаблона попапа убрал php-коды, и там просто пустые места.
Может, я что-то не так сделал, но все-равно спасибо

[Mikhail Derkach]

Ваше решение несколько помогло, написал скрипт, но немного другой. Спасибо

[Артем Чернявский]

Не за что :)