I’m trying to implement an Ajax request to load more posts on click.
However I’ve got an error : Call to undefined function query_posts()
Here is my Ajax script :
$('#next-container').click(function() {
var IDs = [];
$(".element").each(function(){ IDs.push(this.id); });
$('#next-container').html('loading');
$.ajax({
url: 'wp-content/themes/freakyshape/inc/data.php',
type: 'POST',
data: {'post_ids[]': IDs },
success: function(data) {
$container.isotope( 'insert', $(data));
}
});
});
my data.php file to load post:
<?php
if (isset($_POST['post_ids'])) {
$ids = array();
$ids[] = $_POST['post_ids'];
$posts_per_page = 8;
global $wp_query;
query_posts(array('post_type' => array('post', 'portfolio'), 'post__not_in' => $ids, 'posts_per_page' => $posts_per_page));
while (have_posts()) : the_post();
?>
// I do some stuff echo;
<?php
endwhile;
wp_reset_query();
}
?>
and in my functions.php:
$admin_path = TEMPLATEPATH . "/inc/";
require_once ($admin_path . "data.php");
What do I need to make it work?
EDIT:
I try with the right way to do it but nothing works like this… I miss something… It’s not easy to correctly understand blog instruction when you are not fluent in English…
function.php:
add_action('wp_ajax_load_post', 'load_post_callback');
add_action('wp_ajax_nopriv_load_post', 'load_post_callback');
wp_enqueue_script('script', get_template_directory_uri().'/js/load_post.js', array('jquery'), '1.0', 1 );
wp_localize_script('script', 'ajax_var', array('url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax-nonce')));
load_post.php :
<?php
function load_post_callback() {
if (isset($_POST['post_ids'])) {
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) ) {
die ( 'Interdit !');
}
$ids = array();
$ids[] = $_POST['post_ids'];
$posts_per_page = 8;
global $wp_query;
query_posts(array('post_type' => array('post', 'portfolio'), 'post__not_in' => $ids, 'posts_per_page' => $posts_per_page));
while (have_posts()) : the_post();
$post_type = get_post_type( $post->ID );
if ($post_type == 'post') {
$post_type = 'blog';
}
?>
<div class="element normal <?php echo $post_type; ?>" id="<?php echo the_id(); ?>">
<div class="element-container">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id()); ?>" class="thumbnail" />
<div class="element-back"></div>
<div class="element-description"><?php echo the_title(); ?></div>
<div class="element-category"><i class="icon"></i>   <?php echo $post_type; ?></div>
<a class="link" href="" title="<?php echo the_title(); ?>" onclick="gestionClic(compteur'id');">
<div class="more">more.</div>
</a>
</div>
</div>
<?php
endwhile;
wp_reset_query();
}
}
?>
load_post.js:
jQuery(document).ready(function() {
var url = ajax_var.url;
var nonce = ajax_var.nonce;
jQuery('#next-container').click(function() {
var IDs = [];
$(".element").each(function(){ IDs.push(this.id); });
console.log(IDs);
$('#next-container').html('loading');
$.ajax({
url: 'wp-content/themes/freakyshape/inc/load_post.php',
type: 'POST',
data: {'post_ids[]': IDs },//'post_ids='+IDs,
success: function($data) {
$container.isotope( 'insert', $data);
}
})
})
})
Using Ajax this way is not correct. For your code to work, you need to include
wp-load.php
and use some other workarounds. The web is full of this awful examples.Otto, core contributor, explains the main reasons why we Donât include wp-load, please.. And these are:
The proper way is:
wp_ajax_
hooks to run PHP code and return it to the JS file.wp_localize_script
to pass PHP variables to the JS file.One working example of mine at WordPress Answers. And lots of good examples from one of our mods and leading contributor to the Ajax tag.