gistfile1.txt

/**
* JS
*
**/
$(document).on('change','.js-filter-form', function(e){
            e.preventDefault();
            var category = $(this).find('option:selected').val();
            $.ajax({
                url: wpAjax.ajaxUrl,
                data:{ action: 'filter_ajax_wap', category: category },
                type: 'post',
                success: function(result){
                    $('.js-filter').html(result);
                },
                error: function(result){
                    console.warn(result);
                }
            });
        });


/**
* PHP Functions
*
**/
function load_scripts(){
   wp_enqueue_script('ajax', get_stylesheet_directory_uri().'/js/script.js', array('jquery'),'1.0', true );
   wp_localize_script('ajax', 'wpAjax', array('ajaxUrl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts','load_scripts');


add_action('wp_ajax_nopriv_filter_ajax', 'filter_ajax');
add_action('wp_ajax_filter_ajax', 'filter_ajax');
function filter_ajax(){
	$category = $_POST['category'];
	if( in_category( 'category_2' ) ):
		$args = array(
				'post_status' => 'publish',
				'post_type' => 'post',
				'posts_per_page' => -1,
				'child_of'  => 102,
				'category_name'  => 'cat1,cat2,cat3,cat4'
			);
		elseif(in_category( 'category_1' )) :
			$args = array(
				'post_status' => 'publish',
				'post_type' => 'post',
				'posts_per_page' => -1,
				'child_of'  => 101,
				'category_name'  => 'cat_1,cat_2,cat_3,cat_4'
			);
	endif;

	if (isset($category)){
		$args['category__in'] = array($category);
	}

	$query = new WP_Query($args);

	if ($query->have_posts()): ?>
		<div>
			<?php while($query->have_posts()) : $query->the_post(); ?>
			<div>
				<div class="desciption">
					<figure style="background: url(<?php the_field('thumbnail'); ?>) no-repeat">
						<figcaption><?php foreach((get_the_category()) as $category): echo $category->name . '<br/>'; endforeach; ?></figcaption>
					</figure>
					<h3><?php the_title(); ?></h3>
					<a href="<?php the_permalink(); ?>">Read More</a>
				</div>
			</div>
			<?php endwhile; ?>
		</div>
<?php
	endif;
	wp_reset_postdata();
	die();
}



/**
* HTML/PHP
**/
<form class="js-filter-form" method="post">
	<select name="categories">
		<?php
		if( in_category( 'category_2' ) ):
			$cat_args = array(
				'post_type' => 'post',
				'option_all' => 'All',
				'exclude' => array(1),
				'child_of'  => 101
			);
		elseif(in_category( category_1' )) :
			$cat_args = array(
				'post_type' => 'post',
				'option_all' => 'All',
				'exclude' => array(1),
				'child_of'  => 102
			);
		endif;

		$categories = get_categories($cat_args); ?>
			<option class="js-filter-item" value="-1">All</option>
		<?php foreach ($categories as $cat) : ?>
			<option class="js-filter-item" value="<?= $cat->term_id; ?>"><?= $cat->name; ?></option>
		<?php endforeach; ?>
	</select>
</form>


<div class='js-filter'>
		<?php
		if( in_category( 'category_2' ) ):
			$args = array(
				'post_status' => 'publish',
				'post_type' => 'post',
				'posts_per_page' => -1,
				'child_of'  => 102,
				'category_name'  => 'cat1,cat2,cat3,cat4'
			);
		elseif(in_category( 'category_1' )) :
			$args = array(
				'post_status' => 'publish',
				'post_type' => 'post',
				'posts_per_page' => -1,
				'child_of'  => 101,
				'category_name'  => 'cat_1,cat_2,cat_3,cat_4'
			);
		endif;

		$query = new WP_Query($args);

		if ($query->have_posts()): ?>
			<div>
			<?php while($query->have_posts()) : $query->the_post(); ?>
				<div class="article__conntent">
					<div class="desciption">
						<figure style="background: url(<?php the_field('thumbnail'); ?>) no-repeat">
							<figcaption><?php foreach((get_the_category()) as $category): echo $category->name . '<br/>'; endforeach; ?></figcaption>
						</figure>
						<h3><?php the_title(); ?></h3>
						<a href="<?php the_permalink(); ?>">Read More</a>
					</div>
				</div>
			<?php endwhile; ?>
			</div>
		<?php endif; ?>
<?php wp_reset_postdata(); ?>

Can you get the POST data to be displayed in the HTML?

It'll be something as simple as:

echo '<pre>';
if ($_POST['category']) {
    echo $_POST['category'];
} else {
    echo 'No POST';
}
echo '</pre>';

Also try changing die() to wp_die(); it has been a bug for me in the past.

@Quin452 it only displayed No POST in HTML

@Quin452 it only displayed No POST in HTML

Then the issue is that category isn't being posted.
Are you using <select name="categories"> or <select name="category">? POST needs to match name.

Currently using the <select name="categories">,I tried to change into this <select name="category"> but the posts in another category option are not displaying.

…

On Wed, 17 Jun 2020, 10:19 PM Quin452 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Then the issue is that category isn't being posted. Are you using <select name="categories"> or <select name="category">? POST needs to match name. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/a6dd2abadbfe8a4d399c6cf8734e809a#gistcomment-3344938>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACKC2EHPVEVVMHEMGAT5UW3RXDGGZANCNFSM4OAT4FCA> .

I don't know what you mean by "posts in another category option are not displaying".

What we need to do is try to get whatever category you've selected posted.

I would scrap the categories in categories thing you've got going on, and simply list all the categories for now.

@Quin452 if I tried to change the $category = $_POST['category']; into $category = $_POST['categories']; the posts are not displaying when selecting another option. Now, I changed the $category = $_POST['category']; to this $category = $_POST['categories']; to be match in the html <select name="categories"> and I checked if the $_POST['categories'] has already a value, no luck. Still getting the No post.

You'll need to get the select box/drop down to submit some data, any data at this point.
There is also an option in Developer Tools, which could be more useful than trying to echo out a response.