Ajax request to query_posts is undefined

Question

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>&nbsp;&nbsp <?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);

                }
            })
    })
})

Answer 1

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:

Why this is wrong

1. You don’t have the first clue where wp-load.php actually is. Both the plugin directory and the wp-content directory can be moved around in the installation. ALL the WordPress files could be moved about in this manner, are you going to search around for them?
2. You’ve instantly doubled the load on that server. WordPress and the PHP processing of it all now have to get loaded twice for every page load. Once to produce the page, and then again to produce your generated javascript.
3. You’re generating javascript on the fly. That’s simply crap for caching and speed and such.

The proper way is:

• using wp_ajax_ hooks to run PHP code and return it to the JS file.
• using 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.