Forum

Thread tagged as: Question, Problem

Filter data on click event.

I've been struggling with the filtering of my news items based on the news year. I have created a news page with the list of news items in it and their respective news date. In the left menu it has list of year (2016,2015,2014....) what I want to do is when the site visitor click on 2014 it should filter and shows all the news items (news) which occurred in the year 2014.

How can I have this implemented?

Find my master page (php) code attached along with the content (html) page code below:

Master page code:

perch_content_custom('News', array(
   'page'=>'/news/index.php',
   'template'=>'News page.html',
    'filter'=>'event_date',
    'match' => 'eq',  
    'value' => 'allnews-year',     
   'count'=>1
 ));
?>

Content page code:

<div class="col-md-2" style="padding: 0px;">
    <div id="sidebar-wrapper" class="col-md-8">
      <div id="spy1">
        <ul class="sidebar-nav nav">
          <perch:repeater id="News-year" label="News year">
            <li class="sidebar-brand"> <a href="<perch:content id="_page" />"><span class="">
              <perch:content id="allnews-year" type="text" label="All news year" />
              </span></a> </li>
          </perch:repeater>
        </ul>
      </div>
    </div>
  </div>

<div class="col-md-8">
    <div id='cont'>
      <perch:repeater id="News-section" label="News section">
        <div class="news-main">
          <div class="news-image"><img src="<perch:content id="news-image" type="image" label="News image"/>" alt="" class="news-img img-responsive "/></div>
          <div class="news-right-text">
            <div class="news-date">
              <perch:content id="event_date" type="date" label="News date" format="d.m.Y" />
            </div>
            <div class="news-heading">
              <perch:content id="news-heading" type="text" label="News heading" />
            </div>
            <div class="news-text">
              <perch:content id="news" type="textarea" label="News details" textile="true" editor="markitup" chars="150" />
            </div>
            <div class="news-btn"> <a href="<perch:content id="link" type="text" label="News complete page link"/>" 
              target="_blank">
              <button type="play" class="btn btn-primary hover-class btnblack">Read story</button>
              </a> </div>
          </div>
        </div>
        <div class="clear"></div>
      </perch:repeater>
    </div>
    <div class="news-btn" style="margin-bottom:50px;"> <a href="#" id="button2">
      <button type="play" class="btn btn-primary hover-class btnblack">See all</button>
      </a> </div>
  </div>
Damian McCracken

Damian McCracken 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago 
$year = '2014';

perch_content_custom('News', [
    'page'=>'/news/index.php', 
    'template'=>'News page.html', 
    'filter'=>'event_date', 
    'match' => 'eqbetween',  
    'value' => $year.'-01-01 00:00:00, '.$year.'-12-31 23:59:59',  
]);

Then you need to populate $year. If it's coming in from the URL like year=2014 then you could use:

$year = perch_get('year');
Damian McCracken

Damian McCracken 0 points

5 years ago

Got it Drew. But still the issue is with the click event generation, filter should be working only on click.

Let say when I click on "2014" then only I should get the list of all the news of year 2014.

My click event code is:

<a href="?s=<perch:content id="event_date" type="event_date" />"><span><perch:content id="allnews-year" type="text" label="All news year" /></span></a>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok. How is that not working?
Damian McCracken

Damian McCracken 0 points

5 years ago

Basically we have 2 sections; right section with the news list and left one with years list. When I click on any year from the left section, it is should be filtering the news in the right section based on the selected year (click event). But it isn't working at all, i.e. no filtering happening on click.

Am I missing anything in my click event code? If not, what else can we do?
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What does your code look like?
Damian McCracken

Damian McCracken 0 points

5 years ago

You can refer to the code I've sent in my previous posts.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

The only time you've posted your code is in the very first post, and hopefully you've been putting some of the above suggestions in place since then.

You don't have to show me anything, but if you need help then you'll have to help me to help you. Otherwise I'll just wish you luck with your project and move on.
Damian McCracken

Damian McCracken 0 points

5 years ago

My code implementation is as below:

<?php

    $year = '2014';
    perch_content_custom('News page', [ 
    'page'=>'/news/index.php', 
    'template'=>'News page.html',
    'filter'=>'event_date',
    'match' => 'eqbetween',
    'value' => $year.'-01-01 00:00:00, '.$year.'-12-31 23:59:59', 
    ]);

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>My website</title>



<link rel="icon" href="../perch/img/favicon.ico" type="image/ico">
<link href="../perch/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<link href="../perch/css/cs-select.css" rel="stylesheet" type="text/css"> 
<link href="../perch/css/cs-skin-elastic.css" rel="stylesheet" type="text/css"> 

<link href="../perch/css/style.css" rel="stylesheet" type="text/css"> 
<link href="../perch/css/font-awesome.css" rel="stylesheet" type="text/css"> 

<link href="../perch/css/dropdown.css" rel="stylesheet" type="text/css"> 
<link href="../perch/css/dropdown.min.css" rel="stylesheet" type="text/css"> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <script src="../map.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--[if lt IE 9]>
    <script src="js/respond-1.1.0.min.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/html5element.js"></script>
<![endif]-->
  <script>
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<style>
:focus {
    outline: none !important;
}
@media screen and (min-width: 768px){
.carousel-indicators {
    bottom: 60px;
}}
#map {
    width: 100%; height: 600px;
}
</style>
<body>
<!--Hero_Section-->

<section class="news-top-sec">
  <div class="hero_wrapper">
    <div class="container top_left_cont1 ">
     <h3 class="under-page-hea"> <?php perch_content('News Page Heading'); ?></h3>
    </div>
  </div>
</section>
<header id="header_wrapper" style="height: 88px;">
  <div class="container-fluid">
  <div class="logo"><a href="/"><img src="../perch/img/logo.png" alt=""/></a></div>
  <div class="pull-right">
                <div class="search-area">
                        <form>
                            <input id="search" name="search" type="text" placeholder="Type your search text here...">
                            <input id="search_submit" value="Researcher" type="submit">
                        </form>
                    </div>

               </div>
<div class="header_box">
  <!--  <div class="logo"><a href="#"><img src="img/logo.png" alt="logo"></a></div>-->
  <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div id="main-nav" class="collapse navbar-collapse navStyle">
        <?php perch_pages_navigation(array(
                    'levels'=>1,
                    'hide-extensions' => true
                )); ?>  
            <ul >
              <?php perch_content('Home button'); ?>
            </ul>
     </div>
</nav>
</div>

</div>
</header>
<div style="height:50px;" class="container-fluid col-md-12">
<div class="col-md-1 col-xs-1" style="width: 46px;padding-right: 0px;">
<a href="/">Home</a>
</div>
<div class="col-md-1 col-xs-1" style="width: 35px;">></div>
<div class="col-md-10" style="padding:0px;"> <?php perch_pages_breadcrumbs(); ?></div>
</div>

My click event code is:

<a href="?s=<perch:content id="event_date" type="event_date" />"><span><perch:content id="allnews-year" type="text" label="All news year" /></span></a>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

You have:

$year = '2014';

you need to read the value in from the URL.

$year = perch_get('s', date('Y'));
Damian McCracken

Damian McCracken 0 points

5 years ago

Hi Drew, I got the year variable populated fine, by reading it from the URL just the way you have mentioned.

But this is still not working & I suspect the reason is the filter & value we are suing in our perch code. https://drive.google.com/open?id=0B8Y7bl05-brfRWZCOGplWmh2Tjg

This is how our UI looks, you will notice on the lft panel we have a list of dates, on click of a date we are now successfully getting the value in the $year parameter as above.

On the right section, we have a number of list items which are created using the following HTML code

<perch:repeater id="News-section" label="News section"> <div class="news-main"> <div class="news-image"><img src="<perch:content id="news-image" type="image" label="News image"/>" alt="" class="news-img img-responsive "/></div> <div class="news-right-text"> <div class="news-date"><perch:content id="event_date" type="date" label="News date" format="d.m.Y" /></div> <div class="news-heading"><perch:content id="news-heading" type="text" label="News heading" /></div> <div class="news-text"><perch:content id="news" type="textarea" label="News details" textile="true" editor="markitup" chars="150" /> </div> <div class="news-btn"> <a href="<perch:content id="link" type="text" label="News complete page link"/>" target="_blank"><button type="play" class="btn btn-primary hover-class btnblack">Read story</button> </a> </div> </div>

</div> <div class="clear"></div> </perch:repeater>

so in filter parameter, we are correctly using the event_date section name, this looks correct to me. But the dat is formatted as d.m.Y (1.10.2016) as you can see in the image, just above the new title on right. Can you please let me know if the value we are using ($year.'-01-01 00:00:00, '.$year.'-12-31 23:59:59') is correct given my HTML?

I understand we are searching the items from January 1 to December 31st from midnight to 23:59:59 but as you can see our event_date only has a date component & no time, should this still work as it is?

Do you see something that we may need to fix to make it work? Looking forward to hear from you.

Thanks
Rachel Andrew

Rachel Andrew 394 points
Perch Support

5 years ago

Yes that is correct, the way you are displaying it has no bearing on the filter.

Check in debug to see what your query is returning, that would be the place to start.
Damian McCracken

Damian McCracken 0 points

5 years ago

Thanks for the pointer Rachel, I enabled debugging & was getting an error saying

"No matching content regions found. Check region name (job.header) and page path options."

which we have now solved & the error is now gone. But still neither filter on event_date or a filter on other content (tried news-heading also) didn't work, also tried playing with various match parameters (tried eq. contains etc) no result.

I thought to simplify things I will only try a sort on event_date_param (the list of dates on the left in the image i uploaded earlier) that is not working either. There is no error in debug, just a long query:

SELECT * FROM perch2_pages WHERE pagePath='/news/index.php' LIMIT 1 [1] SELECT regionID, regionTemplate, regionPage, regionRev AS rev FROM perch2_content_regions WHERE regionKey='news Container' AND (regionPage='/news/index.php' OR regionPage='*') [nil] SELECT * FROM ( SELECT idx.itemID, c.regionID, idx.pageID, c.itemJSON, idx2.indexValue as sortval FROM perch2_content_index idx JOIN perch2_content_items c ON idx.itemID=c.itemID AND idx.itemRev=c.itemRev AND idx.regionID=c.regionID JOIN perch2_content_index idx2 ON idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev AND idx2.indexKey='_order' WHERE ((idx.regionID=131 AND idx.itemRev=94)) AND ((idx.indexKey='event_date' AND (idx.indexValue >= '2015-01-01 00:00:00' AND idx.indexValue <= '2015-12-31 23:59:59'))) AND idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev ) as tbl GROUP BY itemID, pageID, itemJSON, sortval ORDER BY sortval ASC

I notice the query is taking the filter parameters from perch into account ((idx.indexValue >= '2015-01-01 00:00:00' AND idx.indexValue <= '2015-12-31 23:59:59'))), but does not filter my news section based on the select year.

Anything else I can try to see what is going wrong? Appreciate your help.

Thanks
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What does your filter and template currently look like?
Damian McCracken

Damian McCracken 0 points

5 years ago

Hi Drew,

https://drive.google.com/open?id=0B8Y7bl05-brfRWZCOGplWmh2Tjg

and my perch html code is --------------->>>>

<div class="col-md-2" style="padding: 0px;"> <div id="sidebar-wrapper" class="col-md-8"> <div id="spy1"> <ul class="sidebar-nav nav"> <perch:repeater id="News-year" label="News year"> <li class="sidebar-brand"> <a href="?s=<perch:content id="event_date_param" type="event_date_param" label="All news year list link"/>"> <span class=""> <perch:content id="allnews-year" type="text" label="All news year" /> </span> </a> </li> </perch:repeater> </ul> </div> </div> </div> <div class="col-md-8"> <div id='cont'> <perch:repeater id="News-section" label="News section"> <div class="news-main"> <div class="news-image"><img src="<perch:content id="news-image" type="image" label="News image"/>" alt="" class="news-img img-responsive "/></div> <div class="news-right-text"> <div class="news-date"> <perch:content id="event_date" type="date" label="News date" format="d.m.Y" /> </div> <div class="news-heading"> <perch:content id="news-heading" type="text" label="News heading" /> </div> <div class="news-text"> <perch:content id="news" type="textarea" label="News details" textile="true" editor="markitup" chars="150" /> </div> <div class="news-btn"> <a href="<perch:content id="link" type="text" label="News complete page link"/>" target="_blank"> <button type="play" class="btn btn-primary hover-class btnblack">Read story</button> </a> </div> </div> </div> <div class="clear"></div> </perch:repeater> </div> <div class="news-btn" style="margin-bottom:50px; margin-top:50px;"> <a href="#" id="button2"> <button type="play" class="btn btn-primary hover-class btnblack">See all</button> </a> </div> </div>

my header master page --------------------------- >>> <?php $year = perch_get('s', date('Y'));

perch_content_custom('news page', [ 'page'=>'/news/index.php',
'template'=>'News page.html', 'filter'=>'News-section.event_date', 'match'=>'eqbetween', 'value'=>$year.'-01-01 00:00:00, '.$year.'-12-31 23:59:59' ]);

?> <?php PerchUtil::output_debug(); ?>

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, maximum-scale=1"> <title>LBFoster Rail-<?php echo($year)?></title> <link rel="icon" href="../perch/img/favicon.ico" type="image/ico"> <link href="../perch/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="../perch/css/cs-select.css" rel="stylesheet" type="text/css"> <link href="../perch/css/cs-skin-elastic.css" rel="stylesheet" type="text/css"> <link href="../perch/css/style.css" rel="stylesheet" type="text/css"> <link href="../perch/css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="../perch/css/dropdown.css" rel="stylesheet" type="text/css"> <link href="../perch/css/dropdown.min.css" rel="stylesheet" type="text/css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <script src="../map.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!--[if lt IE 9]> <script src="js/respond-1.1.0.min.js"></script> <script src="js/html5shiv.js"></script> <script src="js/html5element.js"></script> <![endif]--> <script> $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style> :focus { outline: none !important; }

@media screen and (min-width: 768px) { .carousel-indicators { bottom: 60px; } }

map {

width: 100%;
height: 600px;

} </style> <body> <!--Hero_Section-->

<section class="news-top-sec"> <div class="hero_wrapper"> <div class="container top_left_cont1 "> <h3 class="under-page-hea"> <?php perch_content('News Page Heading'); ?> </h3> </div> </div> </section> <header id="header_wrapper" style="height: 88px;"> <div class="container-fluid"> <div class="logo"><a href="/"><img src="../perch/img/logo.png" alt=""/></a></div> <div class="pull-right"> <div class="search-area"> <form> <input id="search" name="search" type="text" placeholder="Type your search text here..."> <input id="search_submit" value="Rechercher" type="submit"> </form> </div> </div> <div class="header_box"> <!-- <div class="logo"><a href="#"><img src="img/logo.png" alt="logo"></a></div>--> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="main-nav" class="collapse navbar-collapse navStyle"> <?php perch_pages_navigation(array( 'levels'=>1, 'hide-extensions' => true )); ?> <ul > <?php perch_content('LB Foster Europe button'); ?> </ul> </div> </nav> </div> </div> </header> <div style="height:50px;" class="container-fluid col-md-12 brudcr"> <div class="col-md-1 col-xs-1" style="width: 50px;padding-right: 0px;"> <a href="/">Home</a> </div> <div class="col-md-1 col-xs-1" style="width: 35px;">></div> <div class="col-md-10" style="padding:0px;"> <?php perch_pages_breadcrumbs([ 'include-hidden'=> true, ]);?> </div> </div>

my main news master page is --------------------------->>

<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php');

perch_layout('news-global.above', array(
        'title' => perch_page_title(true),
    ));

 perch_content('news page');





perch_layout('global.below');

?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok. So that filter should match any item in the region that has a news section repeater item with the matching dates.

Is that what you're intending?
Damian McCracken

Damian McCracken 0 points

5 years ago

Yes. The intention is to show a list of years on left & a list of news content on the right. Each of these news content has a date associated with it. what we intend to do is that when a user clicks on the year on left, we want to filter the repeater news contents to only show the news items for the selected year.

Hopefully that makes sense, let me know if not. I'll help with more details

Thanks
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Perfect - then I think you should be all good.
Damian McCracken

Damian McCracken 0 points

5 years ago

but its still not working & we can't figure out why. Do you spot something out of the place?
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I feel like maybe this is losing something in the explanation. Do you have anyone there who can look at it with you?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

There's a list of people on our Registered Developers page who you can hire to do your work for you: https://grabaperch.com/developers