Dynamicznie zmieniające się linki nawigacyjne (następne i poprzednie) w Wordpressie poprzez AJAX

Question

Mam w mojej witrynie wordpress, w pętli single.php, tag select, w którym opcjami są posty bieżącej kategorii zwróconej przez niestandardowe zapytanie .

Po zmianie wybranej opcji mam wiele funkcji javascript, które działają dobrze, ale ostatnia funkcja wśród nich (function f_next-previous), wydaje się nie działać.

Celem tej funkcji jest aktualizacja następnego i poprzedniego łącza bez ponownego ładowania strony.

Kod stosunku do linków nawigacyjnych (Next i poprzednich) w moim szablonu działa dobrze i jest wyższa:

<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 --> 

kod JavaScript tej funkcji jest:

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; 
     } 
}); 

} 

Plik next-previous.php zawartość:

<?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; 

?> 

Podczas testowania tego pliku php y nadając jej wartość parametru p, daje wynik logiczny w przeglądarce. Skrypty JQuery i funkcje są dobrze dołączone i wszystkie AJAX na mojej stronie jest w porządku. Czego mi brakuje w tej pracy?

UPDATE: Należy zauważyć, że część mojego single.php plik odpowiedzialny wyzwalania wywołania AJAX jest:

<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> 

Answer 1

Po pierwsze, chcę zwrócić uwagę, że podejście I wymieniono w moje pytanie jest źle według prawie samouczków mówiących o AJAX w wordpress. Dlatego postanowiłem to zmienić na podstawie porady hakre i jego linku: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

Innymi słowy, najlepszym sposobem dla mojej sytuacji jest użycie wbudowanej AJAX w Wordpressie, używając wp-admin/admin-ajax.php. Żądania AJAX powinny być kierowane do tego pliku. Wiem, że część "admin" nazwy pliku jest trochę myląca. ale wszystkie żądania z front-endu (strona widokowa), a także panel administracyjny mogą być przetwarzane w admin-ajax.php, z wieloma korzyściami, szczególnie dla bezpieczeństwa.

Kroki są:

kod 1. JavaScript, który przekazuje żądania AJAX powinna wyglądać mniej więcej tak:

$(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; 
       } 

      }); 

    }); 
}); 

pamiętać, że należy szanować requeriements WordPress na oddanie JS skrypt (zazwyczaj w stopce.php przed wp-footer())

2- Handling działania:

w functions.php swojego tematu (lub bezpośrednio w pliku wtyczki), dodaje:

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

i zdefiniować w ten sam plik nextPrevious funkcja zwrotna tak:

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(); 

} 

nie zapomnij funkcję matrycy, to mandato ry.

Aby uzyskać więcej informacji o AJAX w Wordpress, tutoriale na pierwszej stronie Google są dobre.