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();
});

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();
});

• javascript
• jquery
• html
• css

• It's not taking data-filter's value from page where it is given?what's the problem or any alternative for above? – 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 Commented Feb 2, 2014 at 11:08
• 1 please add the actual question to your question. – xlembouras 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 Commented Feb 2, 2014 at 11:13
• @user2696142 any ment about my answer? – Ergec Commented Feb 3, 2014 at 12:10

1 Answer 1

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/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();