using data-filter attribute

Question

Following is html code of two pages where in one page i have written data-filter attribute which i need to apply in other html page. The way i have done it's not working.

<div class="grid_12" id="category-nav">
<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
    <li><a href="otherpage.html" data-filter="wandelingen">Wandelingen</a></li>
    <li><a href="otherpage.html" data-filter="rondleidingen">Rondleidingen</a></li>
    <li><a href="otherpage.html" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
</ul>

The HTML code for otherpage.html is

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

</article><!-- End article.post -->
<article class="post" data-cat="rondleidingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

Javascript/Jquery is:

var posts = $('.post');
posts.hide();

$( "#category li a" ).click(function() { 

    var customType = $( this ).data('filter'); 
    console.log(customType);
    console.log(posts.length); 

    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});

It's not taking data-filter's value from page where it is given?what's the problem or any alternative for above? — ITGeek
– ITGeek, Commented Feb 2, 2014 at 10:55
You mean when you click on a link the relative data is not storing in customType from var customType = $( this ).data('filter'); ? — Suman Bogati
– Suman Bogati, Commented Feb 2, 2014 at 11:08
If i click on Wandelingen link,it should redirect to otherpage.html and filter but it's not happening in above code,that's actual question — ITGeek
– ITGeek, Commented Feb 2, 2014 at 11:13

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Your problem is you are redirection on click to otherpage.html without any info about your data filter. Also it's way simpler to do this in one page not two. Check this fiddle out

http://jsfiddle.net/ergec/kwPLp/

For two page setup

First page HTML only, no javascript

<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html#rondvaart" class="current-cat" data-filter="">Rondvaart</a></li>
    <li><a href="otherpage.html#wandelingen" data-filter="">Wandelingen</a></li>
    <li><a href="otherpage.html#rondleidingen" data-filter="">Rondleidingen</a></li>
    <li><a href="otherpage.html#groepsarrangementen" data-filter="">Groepsarrangementen</a></li>
</ul>

Second Page (otherpage.html)

HTML

<article class="post" id="rondvaart">
    <header>
        <p class="byline">Rondvaart</p>
         <h2>rondvaart</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="wandelingen">
    <header>
        <p class="byline">wandelingen</p>
         <h2>wandelingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="rondleidingen">
    <header>
        <p class="byline">rondleidingen</p>
         <h2>rondleidingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="groepsarrangementen">
    <header>
        <p class="byline">groepsarrangementen</p>
         <h2>groepsarrangementen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->

Javascript

var hash = window.location.hash;
hash = hash.split("#");
hash = hash[1];
var posts = $('.post');
posts.hide();
$("#" + hash ).show();

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 2, 2014 at 11:31

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ITGeek Over a year ago

i know it's easier to do in one page but what i want is that on one page i have done data-filter which is running fine when i click on hyperlink which is on 2nd page should filter same as it does on single page and redirect to 1st page?

Ergec Over a year ago

my second setup gets the filter from first page and displays the proper article on second page. If this is not what you are looking for then you should tell us your main objective.

Collectives™ on Stack Overflow

using data-filter attribute

1 Answer 1

For two page setup

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

For two page setup

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related