Как правильно сделать ajax запрос в wp?

Question

[redesupar]

Делаю ajax фильтр на вп
filter.js

jQuery( function( $ ){
	$( '#filter' ).submit(function(){
		var filter = $(this);
		$.ajax({
			url : true_obj.ajaxurl, // обработчик
			data : filter.serialize(), // данные
			type : 'POST', // тип запроса
			beforeSend : function( xhr ){
				filter.find( 'button' ).text( 'Загружаю...' ); // изменяем текст кнопки
			},
			success : function( data ){
				filter.find( 'button' ).text( 'Применить фильтр' ); // возвращаеи текст кнопки
				$( '#response' ).html(data);
			}
		});
		return false;
	});
});

functions.php дочерней темы

add_action( 'wp_enqueue_scripts', 'truemisha_jquery_scripts' );
 
function truemisha_jquery_scripts() {
 

 
	wp_register_script( 'filter', get_stylesheet_directory_uri() . '/js/filter.js', array( 'jquery' ), time(), true );
	wp_enqueue_script( 'filter' );
  wp_localize_script('truescript', 'true_obj', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action( 'wp_ajax_myfilter', 'true_filter_function' ); 
add_action( 'wp_ajax_nopriv_myfilter', 'true_filter_function' );
 
function true_filter_function(){
 
	$args = array(
		'orderby' => 'date', // сортировка по дате у нас будет в любом случае (но вы можете изменить/доработать это)
		'order'	=> $_POST[ 'date' ] // ASC или DESC
	);
 
	// для таксономий
	if( isset( $_POST[ 'categoryfilter' ] ) )
		$args[ 'tax_query' ] = array(
			array(
				'taxonomy' => 'bwf_events_date',
				'field' => 'id',
				'terms' => $_POST[ 'categoryfilter' ]
			)
		);
	
 
	 
	query_posts( $args );
 
	if ( have_posts() ) {
      		while ( have_posts() ) : the_post();
			// тут вывод шаблона поста, например через get_template_part()
          		echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
		endwhile;
	} else {
		echo 'Ничего не найдено';
	}
 
	die();
}

вот так вывожу в шаблоне

<?
echo '<form action="" method="POST" id="filter">';
 
// категории
if( $terms = get_terms( array( 'taxonomy' => 'bwf_events_date', 'orderby' => 'name' ) ) ) { // как я уже говорил, для простоты возьму рубрики category, но get_terms() позволяет работать с любой таксономией
	echo '<select name="categoryfilter"><option>Выберите категорию...</option>';
	foreach ( $terms as $term ) {
		echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // в качестве value я взял ID рубрики
	}
	echo '</select>';
}
 
 

 
echo '<button>Применить фильтр</button><input type="hidden" name="action" value="myfilter">
</form>';

?>
        <div id="response"></div>

и получаю ошибку
Uncaught ReferenceError: true_obj is not defined

в чем может быть проблема?

Comments

[Дмитрий]

query_posts нельзя использовать
совсем нельзя
даже если очень хочется

найдите того, кто вам посоветовал ее использовать, и ему сообщите, что нельзя так делать

https://developer.wordpress.org/reference/function...

[redesupar]

Дмитрий, так а что использовать и как выводить?

[redesupar]

Дмитрий, сделал так, но всеравно ошибка та же

function true_filter_function(){
 
	$args = array(
	'post_type'=> 'bwf-events',
		'orderby' => 'date', // сортировка по дате у нас будет в любом случае (но вы можете изменить/доработать это)
		'order'	=> $_POST[ 'date' ]	// ASC или DESC
	);
 
	// для таксономий
	if( isset( $_POST[ 'categoryfilter' ] ) )
		$args[ 'tax_query' ] = array(
			array(
				'taxonomy' => 'bwf_events_date',
				'field' => 'id',
				'terms' => $_POST[ 'categoryfilter' ]
			)
		);
	
 
	
$query = new WP_Query( $args );
while($query->have_posts()){
   $query->the_post();
   
   echo '<h2>' . get_the_title() . '</h2>';
   echo get_the_content();
}
wp_reset_postdata();


}

[Дмитрий]

redesupar,
wp_localize_script('truescript'
неправильно

правильно
wp_localize_script('filter'

[redesupar]

Дмитрий, ага спасибо заработало

Answer 1

[Григорий Моргачев]

Вот так должно работать

Тут изменил url:

jQuery( function( $ ){
  $( '#filter' ).submit(function(){
    var filter = $(this);
    $.ajax({
      url : ajax_script.ajaxurl, // обработчик
      data : filter.serialize(), // данные
      type : 'POST', // тип запроса
      beforeSend : function( xhr ){
        filter.find( 'button' ).text( 'Загружаю...' ); // изменяем текст кнопки
      },
      success : function( data ){
        filter.find( 'button' ).text( 'Применить фильтр' ); // возвращаеи текст кнопки
        $( '#response' ).html(data);
      }
    });
    return false;
  });
});

А в functions.php - wp_localize_script

add_action( 'wp_enqueue_scripts', 'truemisha_jquery_scripts' );
 
function truemisha_jquery_scripts() {

  wp_register_script( 'filter', get_stylesheet_directory_uri() . '/js/filter.js', array( 'jquery' ), time(), true );
  wp_enqueue_script( 'filter' );
  wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}