通过AJAX动态变化的导航链接（next和previous）在Word preSS [英] Dynamically changing navigation links (next and previous) in Wordpress via AJAX
问题描述
我有我的话preSS网站，single.php中的循环中，一个选择标记，其中的选项都可以通过自定义查询返回的当前类的帖子。
在改变所选的选项，我有一个运作良好众多JavaScript函数，但其中的最后一个函数（函数f_next- previous ），似乎不的工作。
该功能的目的是无需刷新页面来更新下一个和previous链接。
在code相对于导航链接（next和previous）在我的模板运作良好，高于：
＆LT; DIV ID =资产净值高于级=导航＆GT;
＆LT; DIV CLASS =nav- previous＆GT;＆LT; PHP previous_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）。 /images/$p$pvious.png/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =NAV-NEXT＆GT;＆LT; PHP next_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）/图片/下一个。 PNG/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - ＃NAV-以上 - ＆GT;
该功能的JavaScript的code是：
函数f_next- previous（ID）
{
$阿贾克斯（{
缓存：真正的，
键入：GET，
超时：5000，
网址：'？的wp-content /主题/ twentyten /页/下一页 - previous.php P ='+ ID，
成功：函数（MSG）
{
$（'＃NAV-上面）HTML（MSG）;
}，
错误：函数（MSG）
{
警报（您的浏览器打破了！）;
返回false;
}
}）;
}
文件下一步 - previous.php 内容：
＆LT; PHP
$ P = $ _ GET ['P'];
需要（'../../../wp-load.php'）;
$ my_query =新WP_Query（）;
$ my_query-＆GT;查询（阵列（'post__in'=＆GT;数组（$ P）））;
如果（$ my_query-＆GT; have_posts（））：而（$ my_query-＆GT; have_posts（））：$ my_query-＆GT; the_post（）; ？＆GT;
＆LT; DIV CLASS =nav- previous＆GT;＆LT; PHP previous_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）。 /images/$p$pvious.png/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =NAV-NEXT＆GT;＆LT; PHP next_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）/图片/下一个。 PNG/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; PHP
ENDWHILE;
ENDIF;
？＆GT;
虽然通过向p参数给它一个值测试这个PHP文件，它提供了合乎逻辑的结果在浏览器中。 jQuery和功能的脚本也包括在内，在我的网站所有的AJAX是好的。那我在这个工作????
失踪更新： 请注意，我single.php中的部分文件触发AJAX调用的责任是：
＆LT;形式方法=邮报行动=＆GT;
＆LT;选择类=选择2NAME =ID =＆GT;
＆LT;期权价值=＆LT; PHP the_ID（）;？＆GT;＆GT;＆LT; PHP the_title（）;？＆GT;＆LT; /选项＆GT;
＆LT; PHP
全球$岗位;
$分页= get_query_var（'分页'）？ get_query_var（'寻呼'）：1;
$ myposts = get_posts（分页分页= $＆放大器;类= 4）;
的foreach（$ myposts为$后）：＆GT;
＆LT;期权价值=＆LT; PHP the_ID（）;？＆GT;＆GT;＆LT; PHP the_title（）;？＆GT;＆LT; /选项＆GT;
＆LT; PHP endforeach;
wp_reset_postdata（）; ？＆GT;
＆LT; /选择＆GT;
＆LT; /形式GT;
首先，我要指出，根据近教程中字preSS谈论AJAX，我mentionned在我的问题的做法是不好的。所以我决定根据 hakre 的意见和他的链接进行更改： HTTP：//$c$cx.word$p$pss.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side
在换句话说，我的情况最好的方法是使用内置的AJAX在Word preSS，使用可湿性粉剂管理员/管理员-ajax.php。 AJAX请求应被定向到该文件。我知道文件名的admin的一部分，是一个有点误导。但在前端的所有请求（观看侧），以及管理面板可管理-ajax.php进行处理，有很多好处，尤其是对安全性。
的步骤是：
1，JavaScript的code表示提交AJAX请求应该是这个样子：
$（文件）。就绪（函数（）{
$（'。选择2'）。改变（功能（E）{
即preventDefault（）;
变种V = $（'。选择二选项：选择）VAL（）。
$阿贾克斯（{
键入：GET，
网址：可湿性粉剂管理员/管理员-ajax.php，//查询确切的网址您的具体情况
数据类型：HTML，
数据：（{行动：接下来的previous，ID：V}），
成功：功能（数据）{
$（'＃NAV-上面）HTML（数据）;
}，
错误：功能（数据）
{
警报（您的浏览器打破了！）;
返回false;
}
}）;
}）;
}）;
请注意，你应该尊重字preSS的requeriements在把JS脚本（一般在footer.php WP英尺（）之前）
2 - 处理的操作：
在的functions.php 你的主题（或者直接在你的插件文件），地址：
add_action（'wp_ajax_next previous'，'下一个previous'）;
add_action（'wp_ajax_nopriv_next previous'，'下一个previous'）;
和定义在同一文件中下一previous 这样的回调函数：
函数下一previous（）{
$ P = $ _GET ['身份证'];
$ my_query =新WP_Query（）;
$ my_query-＆GT;查询（阵列（'post__in'=＆GT;数组（$ P）））;
如果（$ my_query-＆GT; have_posts（））：而（$ my_query-＆GT; have_posts（））：$ my_query-＆GT; the_post（）; ？＆GT;
＆LT; DIV CLASS =nav- previous＆GT;＆LT; PHP previous_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）。 /images/$p$pvious.png/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =NAV-NEXT＆GT;＆LT; PHP next_post_link（％链接'，'＆LT; IMG高度=34SRC ='get_bloginfo（template_directory）/图片/下一个。 PNG/＆GT;'）; ？＆GT;＆LT; / DIV＆GT;
＆LT; PHP ENDWHILE;
ENDIF;
wp_reset_query（）;
死（）;
}
不要忘了模具的功能，它是强制性的。
有关AJAX在Word preSS的详细信息，谷歌第一页的教程都不错。
I have in my wordpress site, inside the loop of single.php , 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.
The code relative to navigation links (next and previous) in my template is working well and is above:
<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>
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.
这篇关于通过AJAX动态变化的导航链接（next和previous）在Word preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
