6

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>
Adib Aroui
  • 4,981
  • 5
  • 42
  • 94
  • Please log PHP errors to file and enable the highest level for logging. Eliminate all errors before wondering why it does not work (yes it got errors, yes PHP tells you where). – hakre Mar 02 '13 at 14:12
  • Thanks Hakre for your quick feedback, but I dont understand you well. I dont have any errors in my browser! or maybe I dont know how to do, and also how to enable highest level for logging?? – Adib Aroui Mar 02 '13 at 14:18
  • ok I think this link http://www.w3schools.com/php/php_ref_error.asp will explain these notions to me, I need some time to come back here and give the final result – Adib Aroui Mar 02 '13 at 14:21
  • See as well: [How to get useful error messages in PHP?](http://stackoverflow.com/questions/845021/how-to-get-useful-error-messages-in-php); I normally suggest this: http://stackoverflow.com/a/14504459/367456 – hakre Mar 03 '13 at 11:19
  • Thank you very much hakre, I will be back here to give the solution based after resolving the problems in my error log file. – Adib Aroui Mar 03 '13 at 16:26
  • We even have [a reference for common PHP errors here on SO](http://stackoverflow.com/q/12769982/367456). Might be useful for you, too. – hakre Mar 07 '13 at 01:02
  • 1
    Dear hakre, thank you for your time, I can now read my php errors log and I find that there is a PHP Warning: Cannot modify header information - headers already sent. This warning is resolved but the main problem remains. As I said in the post, all the other ajax functions work correctly, only this one related to navigation. – Adib Aroui Mar 07 '13 at 10:46
  • I think you should make your AJAX callback PHP code more this way: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side – hakre Mar 07 '13 at 11:16
  • Found it based on the AJAX callback approch. Thank you very much hakre, I will be back here in minutes to post the detailed solution. – Adib Aroui Mar 09 '13 at 19:08

1 Answers1

10

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.

Adib Aroui
  • 4,981
  • 5
  • 42
  • 94