Question

I have a work page that shows all projects. I am using a taxonomy to group and display results according to which link is clicked. The overall goal is to keep the link that was clicked highlighted while showing the filtered result. If the user clicks Things, then Things will be bold and the page will only load the results categorized as “Things” in WP.

The html is like this:

<div class="more">
    <a class="static" href="site/work">ALL</a>
    <a class="static" href="site/?type=Things">Things</a>
    <a class="static" href="site/?type=More Things">More Things</a>
    <a class="static" href="site/?type=Objects">Objects</a>
    <a class="static" href="site/?type=Goals">Goals</a>
    <a class="static" href="site/?type=Books">Books</a>
    <a class="static" href="site/?type=Drawings">Drawings</a>
    <a class="static" href="site/?type=Thoughts">Thoughts</a>
</div>

So the link filters the project result set. Here is the WP loop that pulls the links:

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

I have setup some Jquery so it shows which page the user is on.

$(function(){
    $("div.more a").forEach(function(i){
        var active = window.location.hash;

        if($(this).text() == active){
            $(this).trigger('click');
        }
    }); 
});

$("div.more a").on("click", function (event) {
   event.preventDefault();
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

This is where the problem arises. In order to keep the class change which shows the user what project title was clicked, I have removed the page reload option. I still need to pass the ?type= through the url to get a new filtered result. It was suggested this could be done using Ajax. I would not know about how to execute that.

Or can I use Jquery to get the value passed through the url and match that up with the link?

UPDATE

Let me simplify. I would like to show the user which link has been clicked by passing the <a> tag a class called active.

So by default, the code looks like this:

<div class="more">
        <a class="static" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

But when the user clicks a link, for example “Things”, the code looks like this:

<div class="more">
        <a class="active" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

In most cases this can be resolved with JQuery

removeClass("static").addClass("active)

But because the page is reloading when a new url variable is passed, the addClass(“active”) does not persist after the page is reloaded.

Is there a solution to this?

Answer 1

You have 2 kinds of solutions:

1. When loading the next page, check taxonomy and make that navigation item active. In that case, use <a class="static<?php if (is_post_type_archive('Things')) { echo ' active'; } ?>" href="site/?type=Things"> and similars for each item inside the navigation. Note I choosed is_post_type_archive function but it might differ depending on your taxonomies.
2. Load the page contents with AJAX and using jQuery just replace the container div where your content is.

Something like this might help:

$("div.more a").on("click", function (event) {
    // prevent page reload
    event.preventDefault();
    // get the contents
    $.get(this.href, function (response) {
        // jquerify the response HTML string and find our replaceable area
        var result = $(response).find('#myContentDiv');
        // do the replace
        $('#myContentDiv').html(result);
    });
});

I hope you find this information useful. #myContentDiv should be the place where you have your Loop.