We Keep Coding

How can I change this javascript so it does target my code for this Ajax filter?

I want an Ajax filter for my WordPress catagories.
The script I show here is targeting a select dropdown, but I want to have some buttons instead.
My Javascript knowledge isn't 100%, so I don't know how I can change some to be able to use buttons instead of the dropdown.
Can you help me out here?
I tried to change the html code to input:radio, and then change the javascript to onclick, but it doesn't work. The filter keeps showing all.
The only way it works is with the dropdown.
The script I used was found on
http://dominykasgel.com/ajax-posts-filter/
The Javascript I used.
jQuery( ".js-category, .js-date" ).on( "change", function() {
var category = $( '.js-category' ).val();
var date = $( '.js-date' ).val()
data = {
'action': 'filterposts',
'category': category,
'date': date
};
$.ajax({
url : ajaxurl,
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
$('.filtered-posts').html( 'Laden...' );
$('.js-category').attr( 'disabled', 'disabled' );
$('.js-date').attr( 'disabled', 'disabled' );
},
success : function( data ) {
if ( data ) {
$('.filtered-posts').html( data.projecten );
$('.js-category').removeAttr('disabled');
$('.js-date').removeAttr('disabled');
} else {
$('.filtered-posts').html( 'Helaas, er zijn geen projecten gevonden.' );
}
}
});
});
The php code I used for the functions.php
function ajax_filterposts_handler() {
$category = esc_attr( $_POST['category'] );
$date = esc_attr( $_POST['date'] );
$args = array(
'post_type' => 'projecten',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
if ( $category != 'all' )
$args['cat'] = $category;
if ( $date == 'new' ) {
$args['order'] = 'DESC';
} else {
$args['order'] = 'ASC';
}
$posts = 'Helaas, er zijn geen projecten gevonden.';
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
ob_start();
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'includes/content-post' );
endwhile;
$posts = ob_get_clean();
endif;
$return = array(
'projecten' => $posts
);
wp_send_json($return);
}
add_action( 'wp_ajax_filterposts', 'ajax_filterposts_handler' );
add_action( 'wp_ajax_nopriv_filterposts', 'ajax_filterposts_handler' );
The code for in the archive.php file:
<div class="filter-wrap">
<div class="category">
<!-- <div class="field-title">Category</div> -->
<?php $get_categories = get_categories(array('hide_empty' => 0)); ?>
<select class="js-category">
<option value="all">alles</option>
<?php
if ( $get_categories ) :
foreach ( $get_categories as $cat ) :
?>
<option value="<?php echo $cat->term_id; ?>">
<?php echo $cat->name; ?>
</option>
<?php endforeach;
endif;
?>
</select>
</div>
</div>
<div class="filtered-posts">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'includes/content-post' );
endwhile;
endif;
?>
</div>
The code for my content-post.php:
<article id="post-id-<?php the_id(); ?>" <?php post_class('clearfiks archive-projecten'); ?>>
<a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3>
</article>

Can you remove wordpress post tags with js/php after certain date (ACF date time picker)?

So my website lists upcoming film screenings in my area.
I'm using the ACF date time picker to only show posts/film screenings that are in the future in the wordpress loop.
I have tags filtering the results dynamically using ajax (thanks to https://www.bobz.co/ajax-filter-posts-tag/) except there are tags that aren't relevant to the results because they belong to posts that are older than the current date (past screenings).
*For example on the website, the 'animated film festival' is still coming up with the other tags.
I don't know if it's possible to delete a posts tags with PHP (within the post template while it loops through other posts) - and to delete the posts tags if the ACF date time field for that post is older than the current date.
I haven't found much luck googling this and I am a bit of a noob so...
This is my site: http://pigcine.pamrosel.com/
This is what I'm doing in my functions.php file at the moment:
// Get all tags and display
function tags_filter() {
$tax = 'post_tag';
$terms = get_terms( $tax );
$count = count( $terms );
if ( $count > 0 ): ?>
<div class="post-tags">
<?php
foreach ( $terms as $term ) {
$term_link = get_term_link( $term, $tax );
echo '' . $term->name . ' ';
} ?>
</div>
<?php endif; }
// Script for getting posts
function ajax_filter_get_posts( $taxonomy ) {
// Verify nonce
if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce($_POST['afp_nonce'], 'afp_nonce' ) )
die('Permission denied');
$taxonomy = $_POST['taxonomy'];
// WP Query
$args = array(
'tag' => $taxonomy,
'post_type' => 'post',
'posts_per_page' => -1,
'meta_key' => 'datetime',
'orderby' => array(
'datetime' => 'ASC'
),
);
// If taxonomy is not set, remove key from array and get all posts
if( !$taxonomy ) {
unset( $args['tag'] );
}
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while($query->have_posts()) : $query>the_post();
$today = date('Y-m-d H:i:s', strtotime('+9 hours'));
$event_date = get_field('datetime');
if (strtotime($today) <= strtotime($event_date)) {
?>
<div class="sl">
<div class="sl_closed">
<div class="col-2-8"><div class="modulepad">
<p><?php the_field('datetime'); ?></p>
</div></div>
<div class="col-3-8"><div class="modulepad">
<p><?php the_title(); ?><br>
<?php $wpmovieinput = get_field('movie_title'); $movie = imdb_connector_get_movie($wpmovieinput); echo implode(", ", $movie["directors"]); ?>
</p>
</div></div>
<div class="col-3-8"><div class="modulepad">
<p><?php the_field('location_name'); ?><br>
<?php $wpmovieinput = get_field('movie_title'); $movie = imdb_connector_get_movie($wpmovieinput); echo implode(", ", $movie["countries"]) . " "; echo $movie["released"] . " "; echo implode(", ", $movie["runtime"]); ?>
</p>
</div></div>
</div><!--SL_CLOSED-->
<?php } endwhile; ?>
<?php else: ?>
<h2>No posts found</h2>
<?php endif;
die();
}
add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

Duplicate posts on AJAX call in WordPress

I've attempted to setup a 'load more' button in WordPress. Simple idea, you press the button and it loads more posts using AJAX without reloading the page or needing to use pagination.
I followed a previous article on SO and have managed to get it to mostly work.
So far, I've been able to get additional posts loading fine, but for some reason, they are being duplicated. I had a look in the Networks tab and it seems each time I press the button, admin-ajax.php runs twice which I suspect is what's causing the duplication. Unfortunately, I'm not too sure what I need to change to resolve this.
It would also be really helpful to know how to get this working for custom post types as well as normal posts. On my website, I've got two post types, Standard blog posts and a custom 'Projects' post type. Each has its own page and own loop, how would I modify the above to get it to work for both? Would I need to write out the whole thing twice or maybe It's something simpler?
Any ideas guys?
Here is the HTML:
<section id="ajax-posts" class="layout">
<?php get_template_part( 'content', 'blog' ); ?>
</section>
<div class="load-more layout">
<a id="more_posts" class="button"><span class="icon-plus"></span></a>
</div>
Here is the main loop:
<?php
$postsPerPage = 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail();?>
<div class="inner-text">
<h4 class="post-title"><?php the_title(); ?></h4>
<h5><span class="icon-calendar"></span> <?php the_date(); ?></h5>
<?php the_excerpt(); ?>
Read More<span class="icon-arrow-right2"></span>
</div>
</article>
<?php endwhile; wp_reset_postdata(); ?>
Here is my functions.php:
function wpt_theme_js() {
wp_enqueue_script( 'bigredpod-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '', true );
wp_localize_script( 'bigredpod-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'bigredpod'),
));
}
wp_localize_script( 'bigredpod-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'bigredpod'),
));
function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 1;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'posts_per_page' => $ppp,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .=
'<article id="post-'. get_the_ID().'" class="'. implode(' ', get_post_class()) .'">
'.get_the_post_thumbnail().'
<div class="inner-text">
<h4 class="post-title">'.get_the_title().'</h4>
<h5><span class="icon-calendar"></span> '.get_the_date().'</h5>
<p>'.get_the_excerpt().'</p>
Read More<span class="icon-arrow-right2"></span>
</div>
</article>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); ?>
Here is my JS:
jQuery(document).ready(function($) {
var ppp = 1; // Post per page
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").addClass('posts_loading');
} else{
$("#more_posts").removeClass('posts_loading').addClass('no_more_posts');
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
});

You have put twice
wp_localize_script( 'bigredpod-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'bigredpod'),
));
In your wpt_theme_js() function. This is probably what causes the ajax to load twice.

Using php, how should I get the upcoming date from an array and pass it to javascript?

I have setup a loop for WordPress which gets the date from a custom field (date picker) and passes it to a array. I need to determine the closest date in the future (upcoming date) from that array.
<?php
$today = current_time('m/d/Y');
$args=array(
'meta_key' => 'opening',
'orderby' => 'meta_value',
'order' => 'ASC',
'posts_per_page' => -1,
'post_type' => 'event',
);
$query = new WP_Query($args);
?>
<?php if($query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$date = DateTime::createFromFormat('Ymd', get_field('opening'));
$dates[] = $date->format('m/d/Y');
endwhile; endif; wp_reset_postdata();
print_r($dates);
?>
And pass it to javascript.
$('#tl').timeline({
startItem : '$resultOfUpcomingDateEvaluation',
});
Please advice, thanks for the time.

Found a solution, little dirty so will be nice if someone has a more elegant one.
I wrote a second loop with a similar setup, limiting the posts to 1 and comparing the meta_value with a var that gets current_time. Then i echo the result wrapping it in a div with a class that hides it (not elegant).
<?php
$today = current_time('Ymd');
$args=array(
'meta_key' => 'opening',
'orderby' => 'meta_value',
'order' => 'ASC',
'posts_per_page' => 1,
'post_type' => 'event',
'meta_query' => array(
'key' => 'opening',
'compare' => '>=',
'value' => $today,
)
);
$query = new WP_Query($args); ?>
<?php if($query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$date = DateTime::createFromFormat('Ymd', get_field('opening'));
$upcoming = $date->format('d/m/Y');
endwhile; endif; wp_reset_postdata();
echo '<div class="hide" id="upcomingdiv">';
echo $upcoming;
echo '</div>';
?>
After that, on my javascript file, i get the element by ID and get the .textContent of the div that contains the result of the loop and store it to a variable.
var setupUpcoming = document.getElementById("upcomingRef");
var upcoming = setupUpcoming.textContent;
Finally i pass the variable to the startItem.
$('#tl').timeline({
startItem : upcoming,
});

How to edit php code to insert string multiple="multiple" for dropdown?

I have a dropdown with Regular select. I need a dropdown with Multiselect.
I added the js script in header.php, now I need add string multiple="multiple".
In firebug I multiple = "multiple" in a string
http://gyazo.com/e324c9bdcdd1d89cd3c78ba947145e68
Now I need add string multiple="multiple" in to this block but I don't know how do this:
<?php wp_editor( get_the_content() , 'post_content' ); ?>
<?php
$terms = wp_get_post_terms( $post->ID,"listing_category" );
$terms = isset($terms[0]) ? $terms[0]->term_id : "";
if(get_field("custom_attributes_input_types","options") == "Dropdowns"):
wp_dropdown_categories(
array(
'taxonomy' => 'listing_category',
'hierarchical'=>1,
'show_option_none'=>__('Choose Category:','um_lang'),
'name' => 'listing_category',
'hide_empty' => false,
'selected' => $terms
)
);
else:
?>