Выдача постов по поисковому запросу с учётом AJAX подгрузки постов
Итак есть страница блога, на которой выводится форма поиска по постам и 6 записей. тут же выводится кнопка "Загрузить ещё".
Код формы поиска:
<form name="posts-search" role="search" id="searchform" method="GET" action="<?php echo esc_url( home_url( '/' ) ); ?>" accept-charset="utf-8" _lpchecked="1" style="overflow: visible;">
<div class="input-field">
<input type="text" value="<?php echo (isset($_GET['s']))?$_GET['s']:''; ?>" name="s" id="textInput">
<!-- input type="hidden" value="post" name="post_type" / -->
<!-- placeholder="Напишите, что вы ищете, и жмите Enter" -->
<small></small>
<div class="placeholder-text">Напишите, что вы ищете, и жмите Enter</div>
</div>
<div class="search-posts-button">
<button id="search-submit" type="submit" value="<?php echo theme_locals("search") ?>">Поиск</button>
</div>
</form>
Код AJAX подгрузки постов взят отсюда - https://misha.blog/wordpress/ajax-pagination.html
Работает норм.
Код search.php (вывод результатов поиска):
<?php get_header(); ?>
<div class="motopress-wrapper content-holder clearfix">
<div class="container">
<div class="row">
<div class="span12" data-motopress-wrapper-file="search.php" data-motopress-wrapper-type="content">
<div class="row">
<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<?php get_template_part('static/static-title'); ?>
</div>
</div>
<div class="row">
<div class="span12" data-motopress-type="loop" data-motopress-loop-file="loop/loop-search.php">
<?php get_search_form(); ?>
<?php if ( have_posts() ) : ?>
<div id="ajax" class="bricks-wrapper">
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('bricks'); ?>>
<div class="bricks-inner lazy-load-box">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'news-bricks' ); ?>
<?php else : ?>
<img width="424" height="424" src="<?php $blog_img = get_theme_mod('blog_img'); echo $blog_img; ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
<span class="date">
<span class="time time_d"><?php echo the_time('d'); ?></span><span class="time time_m"><?php the_time('F') ?><br/><?php echo the_time('Y'); ?></span>
</span>
<span class="category-section"><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span>
<span class="title-wrapper"><?php the_title(); ?></span>
<span class="more-link">Подробнее</span>
</a>
</div>
</div>
<?php endwhile; // end of the loop. ?>
<?php wp_reset_postdata(); ?>
</div>
<?php get_template_part('static/static-load-more'); ?>
<?php else : ?>
<p><?php _e( 'Извините, по Вашему запросу ничего не найдено. Пожалуйста, попробуйте снова.', 'techacademy' ); ?></p>
<?php endif; ?>
</div>
</div><!-- .row (end) -->
<div class="spacer"></div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
Код скрипта, где мы получаем данные обработчика, сериализованного массива параметров запроса и количество страниц:
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<script>
var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
</script>
<div id="true_loadmore">Загрузить ещё</div>
<?php endif; ?>
Код скрипта loadmore.js:
jQuery(function($){
$('#true_loadmore').click(function(){
$(this).text('Показываю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
var data = {
'action': 'loadmore',
'query': true_posts,
'page' : current_page
};
$.ajax({
url:ajaxurl, // обработчик
data:data, // данные
type:'POST', // тип запроса
success:function(data){
if( data ) {
$('#true_loadmore').text('Показать ещё').before(data); // вставляем новые посты
current_page++; // увеличиваем номер страницы на единицу
if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
} else {
$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
}
}
});
});
});
Функция-обрабочтик вывода постов:
function true_loadmore_scripts() {
wp_enqueue_script( 'true_loadmore', THEME_OPTIONS_DIR_PATH_URL . 'js/loadmore.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );
function true_load_posts(){
// $args = json_decode( stripslashes( $_POST['query'] ), true );
$args = unserialize( stripslashes( $_POST['query'] ) );
$args['post_type'] = array('post');
$args['paged'] = $_POST['page'] + 1;
query_posts( $args );
echo '<div id="ajax" class="bricks-wrapper">';
if( have_posts() ) :
// запускаем цикл
while( have_posts() ): the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('bricks'); ?>>
...
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
echo '</div>';
die();
}
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');
Но как только введён поисковый запрос и нажата кнопка "Найти" выдаётся ошибка Uncaught SyntaxError: Unexpected token { ?s=курс&year=0&monthnum=0:650
Данные на момент поиска:
var ajaxurl = 'https://rosatomtech.ru/wp-admin/admin-ajax.php';
var true_posts = 'a:67:{s:1:"s";s:8:"курс";s:4:"year";i:0;s:8:"monthnum";i:0;s:5:"error";s:0:"";s:1:"m";s:0:"";s:1:"p";i:0;s:11:"post_parent";s:0:"";s:7:"subpost";s:0:"";s:10:"subpost_id";s:0:"";s:10:"attachment";s:0:"";s:13:"attachment_id";i:0;s:4:"name";s:0:"";s:6:"static";s:0:"";s:8:"pagename";s:0:"";s:7:"page_id";i:0;s:6:"second";s:0:"";s:6:"minute";s:0:"";s:4:"hour";s:0:"";s:3:"day";i:0;s:1:"w";i:0;s:13:"category_name";s:0:"";s:3:"tag";s:0:"";s:3:"cat";s:0:"";s:6:"tag_id";s:0:"";s:6:"author";s:0:"";s:11:"author_name";s:0:"";s:4:"feed";s:0:"";s:2:"tb";s:0:"";s:5:"paged";i:0;s:8:"meta_key";s:0:"";s:10:"meta_value";s:0:"";s:7:"preview";s:0:"";s:8:"sentence";s:0:"";s:5:"title";s:0:"";s:6:"fields";s:0:"";s:10:"menu_order";s:0:"";s:5:"embed";s:0:"";s:12:"category__in";a:0:{}s:16:"category__not_in";a:0:{}s:13:"category__and";a:0:{}s:8:"post__in";a:0:{}s:12:"post__not_in";a:0:{}s:13:"post_name__in";a:0:{}s:7:"tag__in";a:0:{}s:11:"tag__not_in";a:0:{}s:8:"tag__and";a:0:{}s:12:"tag_slug__in";a:0:{}s:13:"tag_slug__and";a:0:{}s:15:"post_parent__in";a:0:{}s:19:"post_parent__not_in";a:0:{}s:10:"author__in";a:0:{}s:14:"author__not_in";a:0:{}s:9:"post_type";s:4:"post";s:19:"ignore_sticky_posts";b:0;s:16:"suppress_filters";b:0;s:13:"cache_results";b:1;s:22:"update_post_term_cache";b:1;s:19:"lazy_load_term_meta";b:1;s:22:"update_post_meta_cache";b:1;s:14:"posts_per_page";i:6;s:8:"nopaging";b:0;s:17:"comments_per_page";s:2:"50";s:13:"no_found_rows";b:0;s:18:"search_terms_count";i:1;s:12:"search_terms";a:1:{i:0;s:8:"курс";}s:20:"search_orderby_title";a:1:{i:0;s:167:"wp_posts.post_title LIKE '{0f9439ab2fb36ff8925ba77329a11a2c977982a096668a2358d50c9fef4718c3}курс{0f9439ab2fb36ff8925ba77329a11a2c977982a096668a2358d50c9fef4718c3}'";}s:5:"order";s:4:"DESC";}';
var current_page = 1;
var max_pages = '39';
Я так понимаю не нравится ему именно вот эта часть
"wp_posts.post_title LIKE '{0f9439ab2fb36ff8925ba77329a11a2c977982a096668a2358d50c9fef4718c3}курс{0f9439ab2fb36ff8925ba77329a11a2c977982a096668a2358d50c9fef4718c3}'"
Ну а при нажатии на кнопку "Загрузить ещё" вылезает ошибка в скрипте loadmore.js Uncaught ReferenceError: true_posts is not defined
Т.е. в массив параметров запроса неправильно передаётся сам поисковый запрос что ли?
Попробуй поменять:
на
а в функции
на
Пробовал, не помогает
мне помогло))
Тьфу, забыл нормально закомментить перемунную true_posts. Всё заработало, спасибо большое.
Сам долго мучался этой проблемой)) так что рад был помочь
Спасибо, а то у трумиши аналогичная ошибка!!!
еще в js 'query': true_posts заменить на 'query': posts
Нельзя сериализацию в AJAX использовать нетрумиша вас научит... Конкретно в этом случае опасности вроде бы нет, но все равно не нужно использовать стерилизацию, ведь есть родной для JS формат JSON.
Сериализация нужна для внутреннего использования в PHP коде, для всяких там кэшей и прочего.