Cambiamento dinamico dei collegamenti di navigazione (successivo e precedente) in Wordpress tramite AJAX

Question

Ho nel mio sito wordpress, all'interno del loop di single.php, un tag select in cui le opzioni sono i post della categoria corrente restituita tramite una query personalizzata .

Quando si modifica l'opzione selezionata, ho molte funzioni javascript che funzionano bene, ma l'ultima funzione tra loro (function f_next-previous) non sembra funzionare.

Lo scopo di questa funzione è aggiornare i collegamenti successivi e precedenti senza ricaricare la pagina.

Il codice relativo al link di navigazione (precedente e successiva) nel mio modello sta lavorando bene ed è al di sopra:

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

Il codice javascript di questa funzione è:

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

} 

Il file next-previous.php il contenuto è:

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

?> 

Durante il test di questo file php b aggiungendo un valore al parametro p, dà un risultato logico nel browser. Gli script di Jquery e di funzione sono ben inclusi e tutti gli AJAX nel mio sito web sono ok. Cosa mi manca in questo lavoro ????

UPDATE: nota che la parte del mio file single.php responsabile di innescare la chiamata AJAX è:

<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

In primo luogo, voglio sottolineare che l'approccio che ho menzionate nelle mia domanda è male secondo quasi tutorials parlando di AJAX in wordpress. Così ho deciso di cambiarlo sulla base del consiglio di hakre e il suo link: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

In altre parole, il modo migliore per la mia situazione è utilizzare l'AJAX integrato in Wordpress, utilizzando wp-admin/admin-ajax.php. Le richieste AJAX devono essere indirizzate a questo file. So che la parte "admin" del nome del file è un po 'fuorviante. ma tutte le richieste nel front-end (lato di visualizzazione) e nel pannello di amministrazione possono essere elaborate in admin-ajax.php, con molti vantaggi, specialmente per la sicurezza.

I passi sono:

codice 1. JavaScript che invia la richiesta AJAX dovrebbe essere simile a questa:

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

      }); 

    }); 
}); 

Nota che è necessario rispettare le requeriements di Wordpress nel mettere il JS script (generalmente nel footer.php prima wp-piè di pagina())

2- Handling l'azione:

in functions.php del vostro tema (o direttamente in file plugin), aggiungere:

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

e definire in lo stesso file nextPrevious funzione di callback come questo:

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

} 

non dimenticare la funzione die, è Mandato ry.

Per ulteriori dettagli su AJAX in Wordpress, le esercitazioni della prima pagina di Google sono buone.