How to use AJAX to change pagination in Wordpress
I'm designing a wordpress childtheme based on thematic for a client in which the main work portfolio pagination has to be able to change every time the user clicks on "Order by year", "Order by title" and "Order by collection" (using taxonomy pagination) all using ajax. I've coded some functions following these two posts and these two answers, but it is not working. I'm completely new to ajax so please be patient with me! Any suggestions for a better approach to keep it DRY are very much appreciated. Thank you very much in advance.
UPDATE I've solved the problem myself. I was calling different classes, all the procedure was fine. Corrected code below.
init.js:
$(function(){
var obra_links = $(".select_date, .select_title, .select_collection");
var obra_archive = $(".obra_archive");
obra_links.bind('click', function() {
var $archive_class = $(this).attr("class");
$(this).parent().find('.selected').removeClass('selected');
$(this).toggleClass('selected');
obra_archive.fadeOut(500);
$.ajax(
MyAjax.url,{
type: 'POST',
cache: false,
data: {
action: 'obra_date_toggle',
archive_class: $archive_class
},
success: function(new_archive){
obra_archive.html(new_archive);
},
})
obra_archive.fadeIn(500);
}, false);
});
functions.php:
`[...]`
function childtheme_override_head_scripts() {
if ( !is_admin() ) {
// jQuery Google APIs
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
// Custom
wp_enqueue_script('init', JS . '/init.js', array('jquery'), false, false); // Change last value to true but separate typekit.
// AJAX
wp_localize_script( 'init', 'MyAjax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
} add_action('init', 'childtheme_override_head_scripts');
function select_date() {
// New Query
$args = array(
'post_type' => 'obra',
'posts_per_page' => '-1',
'orderby' => 'date',
'order' => 'ASC',
//'orderby' => 'title',
//'taxonomy' => 'colecciones'
); $wp_query = new WP_Query( $args );
if ($wp_query`->`have_posts()) {
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments ', '1 Comment ', '% Comments '); ?></p>
</div><?php
endwhile;
} else { ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form();
}
}
function select_title() {
`[...]`
}
function select_collection() {
`[...]`
}
function obra_date_toggle() {
if(isset($_POST['archive_class'])) {
$archive_class = $_POST['archive_class'];
}
switch ($archive_class) {
case "select_date":
select_date();
die();
break;
case "select_title":
select_title();
die();
break;
case "select_collection":
select_collection();
die();
break;
default:
echo select_date();
// For initial load, don't die
}
} add_action( 'wp_ajax_nopriv_obra_date_toggle', 'obra_date_toggle' );
add_action( 'wp_ajax_obra_date_toggle', 'obra_date_toggle' );
obra.php:
<?php
/*
Template Name: Obra
*/
// calling the header.php
get_header();
// action hook for placing cont开发者_运维知识库ent above #container
thematic_abovecontainer();
?>
<div id="container">
<?php thematic_abovecontent(); ?>
<div id="content">
<p>
<a class="select_date" href="#">Ordenar por fecha</a><br />
<a class="select_title" href="#">Ordenar por título</a><br />
<a class="select_collection" href="#">Ordenar por colección</a><br />
</p>
<div class="obra_archive"><?php
obra_date_toggle();
?></div><!-- .obra-archive --><?php
wp_reset_postdata();
// calling the widget area 'page-top'
get_sidebar('page-top');
// calling the widget area 'page-bottom'
get_sidebar('page-bottom');
?></div><!-- #content -->
<?php thematic_belowcontent(); ?>
</div><!-- #container -->
<?php
// action hook for placing content below #container
thematic_belowcontainer();
// calling the standard sidebar
thematic_sidebar();
// calling footer.php
get_footer();
?>
UPDATE I've solved the problem myself. I was calling different classes, all the procedure was fine. Corrected code below.
I haven't tried this plugin, but it might do the job for you. http://wordpress.org/extend/plugins/ajaxd-wordpress/
精彩评论