Выдача постов по поисковому запросу с учётом 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 коде, для всяких там кэшей и прочего.