Question

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 &raquo;'); ?>
            </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 content 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&iacute;tulo</a><br />
                <a class="select_collection" href="#">Ordenar por colecci&oacute;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();

?>

Answer 1

UPDATE I’ve solved the problem myself. I was calling different classes, all the procedure was fine. Corrected code below.