Dynamically changing navigation links (next and previous) in Wordpress via AJAX

Question

Inside the loop of single.php, I have a select tag in which the options are the posts of the current category returned via a custom query.

On changing selected option, I have many javascript functions that are working well, but the last function among them (function f_next-previous), doesnt seem to work.

The aim of this function is to update the next and previous links without reloading the page.

Here is the code for navigation links (next and previous) in template:

<div id="nav-above" class="navigation">

<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

</div><!-- #nav-above -->   

The javascript code of this function is:

function f_next-previous(id)
{
       $.ajax({  
       cache: true,  
       type: "GET",  
       timeout: 5000,   
       url: 'wp-content/themes/twentyten/pages/next-previous.php?p='+id,  
       success: function(msg)  
        {  

    $('#nav-above').html(msg);

        },  
        error: function(msg)  
        {  
           alert("Your browser broke!");
                return false;
        }  
});

}

The file next-previous.php content is :

<?php
$p=$_GET['p']; 
require( '../../../wp-load.php' );



$my_query = new WP_Query();
$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  ?>


<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php

endwhile;
endif;

?>

While testing this php file by giving it a value to the p parameter, it gives logical result in the browser. Jquery and function scripts are well included and all AJAX in my website is ok. What am I missing in this work????

UPDATE: Note that the part of my single.php file responsible of triggering the AJAX call is:

   <form method="post" action="">  

    <select class="select2"  name="" id="" >
    <option value="<?php the_ID();?>"><?php the_title();?></option>

    <?php 
global $post;
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$myposts = get_posts("paged=$paged&category=4");

foreach($myposts as $post) :?>

        <option value="<?php the_ID();?>"><?php the_title();?></option>

        <?php endforeach;
        wp_reset_postdata(); ?> 

        </select>
        </form>

Solution

First, I want to note that the approach I mentionned in my question is bad according to almost tutorials talking about AJAX in wordpress. So I decided to change it based on the advice of hakre and his link : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

In other words, the best way for my situation is to use the built-in AJAX in Wordpress, using the wp-admin/admin-ajax.php. AJAX requests should be directed to this file. I know the “admin” part of the file name is a bit misleading. but all requests in the front-end (the viewing side) as well as the admin panel can be processed in admin-ajax.php, with a lot of benefits, especially for security.

The steps are:

1.The JavaScript code that submits the AJAX request should look something like this:

    $(document).ready(function() {
        $('.select2').change(function(e) {
    e.preventDefault();

    var v = $('.select2 option:selected').val(); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", // check the exact URL for your situation
                dataType: 'html',
                data: ({ action: 'nextPrevious', id: v}),
                success: function(data){

                $('#nav-above').html(data);

                },
                error: function(data)  
                {  
                alert("Your browser broke!");
                return false;
                }  

            }); 

    }); 
}); 

Note that you should respect the requeriements of Wordpress in putting the JS script (generally in footer.php before wp-footer() )

2- Handling the action:

in functions.php of your theme (or directly in your plugin file), add:

add_action('wp_ajax_nextPrevious', 'nextPrevious');
add_action('wp_ajax_nopriv_nextPrevious', 'nextPrevious');

and define in the same file nextPrevious callback function like this:

function nextPrevious() {

$p= $_GET['id'];
$my_query = new WP_Query();

$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>



 <div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php endwhile;
endif;                  

wp_reset_query();

die();

}

Do not forget the die function, it is mandatory.

For more details about AJAX in Wordpress, Google first page tutorials are good.

Comments

[BasTaller]

Is wp_reset_query(); neccessary here? You're executing it right before die(). So, it's not.