Ajax Post Filter

My Portfolio

WordPress, PHP, Html, jQuery, CodeIgnitor, ReactJS, AWS, Rest API and Design

I have completed above 100 projects can you look at portfolio

Portfolio

A simple AJAX posts filtering working under AJAX. Easy to modify and Simple AJAX posts filter by category and publish date for WordPress

//wordpress-ajax

function.php
function ajax_customize_init(){
	wp_register_script('ajax-customize-script', get_stylesheet_directory_uri() . '/assets/js/ajax-customize-script.js', array('jquery') );
	wp_enqueue_script('ajax-customize-script');
	wp_localize_script( 'ajax-customize-script',
						'ajax_customize_object',
						array(
						'ajaxurl' => admin_url( 'admin-ajax.php' ),
						'loadingmessage' => __('Please wait...')
						));
	add_action( 'wp_ajax_nopriv_customize_home_search', 'customize_home_search' );
	add_action( 'wp_ajax_customize_home_search', 'customize_home_search' );
}
add_action('init', 'ajax_customize_init');

function customize_home_search(){
	$args = array(
	    'post_type' => 'post',
	    's' => $_POST['solution'],
	    'post_status' => 'publish',
	    'orderby'     => 'title',
	    'order'       => 'ASC',
			'posts_per_page' => 5
	);
	$return = array();
	$return['status'] = false;
	$return['message'] = 'No result found!';
	$wp_query = new WP_Query($args);
	if(count($wp_query) > 0){
		$return['status'] = true;
		$return['message'] = 'Result found!';
	}
	if( $wp_query->have_posts() ):
		$return['data'] = '<ul>';
	    while( $wp_query->have_posts() ): $wp_query->the_post();
				$return['data'] .= '<li><a href="'.get_the_permalink().'" >'.get_the_title().'</a></li>';
	    endwhile;
		$return['data'] .= '<ul>';
	endif;
	wp_reset_postdata();
	echo json_encode($return);
	die;
}

//ajax-customize-script.js

jQuery(document).ready(function($) {
  // Perform AJAX login on form submit
  //$('#customize_home_search').on('click', function(e) {
  $("form#customize_home_search").submit(function(e) {
      e.preventDefault();
      var solution = $("#select_solution").val();
    //$('.customize_partner_details p.status').show().text(ajax_login_object.loadingmessage);
    $('#search_render_model').show().slideDown(500);
    $('#search_render_model').html('<span class="loading">'+ajax_customize_object.loadingmessage+'</span>');
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: ajax_customize_object.ajaxurl,
      data: {
        'action': 'customize_home_search',
        'solution': solution
      },
      success: function(response) {
        if(response.status == true){
          $('#search_render_model').html(response.data);
        }else{
          $('#search_render_model').html(response.message);
        }
      }
    });

  });
});

//close click on out side
jQuery(document).mouseup(function(e)
{
    var container = jQuery("#search_render_model");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});
About author
Generic placeholder image
Vadivel A

I love WordPress, Woo-Commerce, PHP, CodeIgnitor, JavaScript, Rest API and HTML/CSS so much. 6 yrs of experience.