I have a nav bar with categories in it. When I hover over a category I want to query the 3 most recent post using ajax.
html mark up
<ul>
<li id="alabama">Alabama</li>
<li id="banana">Banana</li>
<li id="bible">Bible</li>
</ul>
<div id="main"></div>
ajax call
$( "#alabama" ).click(function() {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$.post(
ajaxurl,
{
'action' : 'fetch_posts',
'fetch' : 'alabama',
},
function(output){
$('#main').html(output);
});
});
enter code here
php in functions.php
function import_post() {
if($_REQUEST['fetch'] == 'alabama'){
$query_args = array(
'post_type' => 'post',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array( 'news' ),
),
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array( 'alabama' ),
),
),
);
$the_query = new WP_Query( $query_args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
$return_str.= '<div class="col-md-3">';
$return_str.= '<li>' . get_the_title() . '</li>';
$return_str.='</div>';
endwhile;
wp_reset_postdata();
else :
$return_str.= 'No posts found';
endif;
}
echo $return_str;
die;
}
add_action('wp_ajax_fetch_posts', 'fetch_posts');
add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts');
1 Answer
I would like to make a series of comments, but the overall length would be too long for a comment, so I have to write an answer.
-
You should state what is working and what is failing, and tell us what you have tried to get it working. Looking at your code is too general.
-
In wordpress, the jQuery alias
$
generally does not work. However, if you have the Developer Tools console open, you should get an error message. I always usejQuery
instead of$
just to avoid stupid errors. -
You state you would like to hover over a category, but your trigger is on click.
$( "#alabama" ).click(function() {
If you are not getting any hover behavior, try clicking.
-
Your AJAX call looks all right, though the call back function seems to be putting the data in the wrong location. If you want the query to happen on a hover, shouldn’t the
output
go into a tooltip? -
The action in the AJAX call is to
fetch_posts
but your PHP function is calledimport_post
. These two functions need to be identical for AJAX to work. -
Your PHP function uses the
$_REQUEST[]
variable. Since you are sending the AJAX via POST, then you can use the$_POST[]
variable. It probably won’t break or fix anything to change, but to me it makes more sense (the code is more readable). -
When I develop an AJAX call, I set up the jQuery AJAX call, like you have. Then I create the PHP function that handles the AJAX call. First, I just echo the data I sent via AJAX. Once I know that works, then I write the SQL, echo that to make sure there are no syntax errors. At that point, I grab the data I want and send it back. The last step is to properly display the data in the AJAX callback function.
OK, there’s your AJAX tutorial. Hope it helps.