Я использую WordPress как систему управления контентом, и мой шаблон имеет div с классом box и содержит раскрывающийся список. моя цель – получить значение этого droplist и query post в ajax-методе с этим значением, а затем перезагрузить только box div с помощью ajax, для получения более четкой здесь разметки:
<select> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> </select> ------------------ <div class="content"> <?php $args = array( "meta_query" => array( array( 'key' => 'meta', 'value' => '$select_value', ) ) ); query_posts( $args ); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_content(); ?> <?php endwhile; else: ?> <p>sorry no post found with this value.</p> <?php endif; ?>
Я думаю, что образец кода ясен, но я хочу сделать это:
пользователь выбирает элемент в dropdown list --> get select value --> put it in $select_value --> run query --> show the div box без перезагрузки всей страницы с помощью ajax …
Может ли кто-нибудь помочь мне написать это?
<select id="select-dropdown"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> </select>
Для этого вам нужно знать об администраторе Ajax в wordpress.
Admin Ajax : в вашем header.php
<script type="text/javascript"> var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>'; </script>
в вашем пользовательском файле js
my-custom.js , запишите файл js
jQuery(document).ready(function(){ jQuery(body).on('change','#select-dropdown', function(){ var selected_item = jQuery(this).val(); jQuery.ajax({ type: "POST", url: "ajax_url", data: { action: 'load_posts', selected_item: selected_item, }, success: function(res){ console.log(res); //append the result in frontend jQuery('.box').html(res); }, }) }) });
В вашем function.php
function _boom_load_posts(){ //get your results here as per selected option if(!empty($_POST['selected_item'])){ $selected_item = $_POST['selected_item']; $output = ''; //rest of the code as per selected_item, store result in $output $args = array( "meta_query" => array( array( 'key' => 'meta', 'value' => '$select_value', ) ) ); query_posts( $args ); if ( have_posts() ) : while ( have_posts() ) : the_post(); $output .= get_the_content(); endwhile; else: $output .= "<p>sorry no post found with this value.</p>" endif; echo $output;//you result here die(1); } } add_action('wp_ajax_load_posts', '_dot1_load_posts'); add_action('wp_ajax_no_priv_load_posts', '_dot1_load_posts');
внесите необходимые изменения, так как я не могу опубликовать весь код для вас, приложите некоторые усилия, и приведенный выше код поможет вам понять, как он будет работать.