We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 1761
    • 20 Posts
    Bought a template and I'm using this in MODX 2.2.4-pl. This template has a portfolio page with a filter option (jquery masonry). In the template it works perfectly but in modx it doesn't.

    <section class="filter">
    	<a href="#">all</a>
    	<a href="#video">video</a>
    	<a href="#graphics">graphics</a>
    	<a href="#webdesign">web design</a>
    	<a href="#photography">photography</a>
    </section>
    


    Clicking one of the links the filter works for a second and after that I get redirected to the homepage.

    I tried adding [[~[[*id]]]] before the #, but that makes all the itens dissapear and there is nothing to filter anymore,

    I'm not (yet) familiar with javascript so I did found the filter function but I have no idea if this is what I have to change and how I should do that.

    // Filter
    	$('.filter').each(function() {
    		var links = $('> a', this);
    		var items = $(this).next('.items');
    		links.click(function() {
    			var category = $(this).attr('href').substr(1);
    			if (category == '') {
    				$('.item', items).removeClass('hidden').fadeIn(250);
    			} else {
    				$('.item', items).each(function() {
    					var regexp = new RegExp('\\b'+category+'\\b', 'i');
    					if (
    						(typeof $(this).data('category') == 'undefined') ||
    						(!regexp.test($(this).data('category')))
    					) {
    						$(this).addClass('hidden').fadeOut(250);
    					} else {
    						$(this).removeClass('hidden').fadeIn(250);
    					}
    				});
    			}
    			$(this).parent().find('.active').removeClass('active');
    			$(this).addClass('active');
    			if (typeof items.data('masonry') == 'object') {
    				items.masonry('reload');
    			}
    		});
    		if (links.filter('.active').length > 0) {
    			links.filter('.active').click();
    		} else {
    			links.eq(0).click();
    		}
    	});
    	// hash = unescape(self.document.location.hash);
    


    Help would be really appreciated!
      • 22840
      • 1,572 Posts
      Probably being caused because of the anchor link, have a look at http://rtfm.modx.com/display/revolution20/Named+Anchor
        • 1761
        • 20 Posts
        Thanks for the quick answer.
        It's not working though. The result is the same as using [[~[[*id]]]] in front of the #.
          • 1761
          • 20 Posts
          This is what I mean:
          [[~[[*id]]]]
          .
          Not
          [[~]]
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            Your "portfolio" page probably won't change, so just use the full URL to the actual page.

              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 4172
              • 5,888 Posts
              try this:

              <section class="filter">
                  <a href="[[~[[*id]]]]#">all</a>
                  <a href="[[~[[*id]]]]#video">video</a>
                  <a href="[[~[[*id]]]]#graphics">graphics</a>
                  <a href="[[~[[*id]]]]#webdesign">web design</a>
                  <a href="[[~[[*id]]]]#photography">photography</a>
              </section>
              


              and change:

              var category = $(this).attr('href').substr(1);
              

              to
              var category = $(this).attr('href').split('#')[1];
                -------------------------------

                you can buy me a beer, if you like MIGX

                http://webcmsolutions.de/migx.html

                Thanks!
                • 1761
                • 20 Posts
                @sotwell: I'm using this filter in more than one place so a direct url in the template won't work but thanks for your comment

                @bruno17: THANK YOU!!! It works and that makes me very happy smiley