Динамическое изменение навигационных ссылок (next и previous) в Wordpress через AJAX

у меня на моем сайте wordpress, внутри цикла single.php, тег select, в котором параметры являются сообщениями текущей категории, возвращаемыми через пользовательский запрос.

при изменении выбранного параметра у меня есть много функций javascript, которые работают хорошо, но последняя функция среди них (function f_next-previous), похоже, не работает.

цель этой функции-обновить следующие и предыдущие ссылки без перезагрузки страницы.

код относительно навигационные ссылки (следующие и предыдущие) в моем шаблоне работают хорошо и выше:

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

код javascript этой функции:

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

}

файл next-previous.php содержание :

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

?>

при тестировании этого php-файла, давая ему значение параметра p, он дает логический результат в браузере. JQuery и функциональные скрипты хорошо включены, и все AJAX на моем сайте в порядке. Чего мне не хватает в этом? работа????

обновление: Обратите внимание, что часть моего сингла.php-файл, ответственный за запуск вызова 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>
6
ajax javascript wordpress

1 ответов

во-первых, я хочу отметить, что подход, который я упомянул в своем вопросе, плох в соответствии с почти учебниками, говорящими об AJAX в wordpress. Поэтому я решил изменить его, основываясь на совете hakre и его ссылка:http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

другими словами, лучший способ для моей ситуации-использовать встроенный AJAX в Wordpress, используя wp-admin / admin-ajax.РНР. Запросы AJAX должны быть направлены в этот файл. Я знаю, что часть "admin" имени файла немного вводит в заблуждение. но все запросы в интерфейсе (сторона просмотра), а также панель администратора могут быть обработаны в admin-ajax.php, с большим количеством преимуществ, особенно для безопасности.

действия:

1.Код JavaScript, который отправляет запрос AJAX, должен выглядеть примерно так:

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

            }); 

    }); 
});

обратите внимание, что вы должны уважать requeriements Вордпресс поставить JS скрипт (обычно в футере.php перед wp-footer ())

2 - Обработка действия:

на functions.php вашей темы (или непосредственно в вашем файле плагина), добавьте:

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

и определить в том же файле nextPrevious функция обратного вызова такой:

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

}

не забудьте функцию die, это обязательно.

для получения более подробной информации о AJAX в Wordpress, учебники первой страницы Google хороши.

9