Update content after selecting date from dropdown using PHP and jQuery

Question

I'm working on a page for a SilverStripe site that lists articles. I have included a dropdown with the available years to return specific articles. The trouble I'm having is finding a way to connect the selected date from the dropdown with the database value for the Date field for the article data object.

Here is the article data object class with a function that stores the year for each article in a function called getYearCreated:

class RecentCoverageDoc extends DataObject {

    private static $db = array(
        'Title' => 'varchar(250)',
        'Publisher' => 'varchar(250)',
        'Date' => 'date',
    );

    private static $has_one = array(
        'ArticleDoc' => 'File',
    );

    private static $summary_fields = array(
        'Title' => 'Title',
        'Publisher' => 'Publisher',
        'Date' => 'Date'
    );

    public function getYearCreated() {
      return date('Y', strtotime($this->Date));
    }

}

In Page.php, this is the function I'm working on building that is meant to take the selected value from the year dropdown list and use it to get the correct list of articles associated with that year:

public function getDocsByYear(){
        //Get the year selected by the dropdown
        $docYear = $this->getRequest()->param('ID');

        //Group together all docs that are associated with that selected year
        $documents = GroupedList::create(RecentCoverageDoc::get()->sort('Date'));

        $return = array();

        //put the articles into the array that match the selected year
        foreach($documents as $document){
            $docDate = date("Y", strtotime($document->Date));
            $selectedDate = date("Y",strtotime($docYear));
             if($docDate == $selectedDate){
                $return[] = array(
                   'title' => $document->Title,
                   'date' => $document->Date,
                    'publisher' =>$document->Publisher
                );
             }
        }

        return json_encode($return);

    }

And lastly, the jQuery code that is getting the value of the year dropdown and sending it to the getDocsByYear function:

   (function($) {
    $(document).ready(function() {

        var SelectYear = $('#SelectYear');

        SelectYear.change(function() {
            if (SelectYear.val() != "" && SelectYear.val() != null) {
                sendYear();
            }
        });

        function sendYear(){
            var year = SelectYear.find('option:selected').attr('value');
            $.ajax({
                type: "POST",
                url: "/home/getDocsByYear/"+year,
                dataType: "json"
            }).done(function (response) {
                var list = '';
                var docSection = $('.RecentDocs');

                for (var i=0;i<response.length;i++){
                    list += response[i].date + ', ' + response[i].publisher + ', ' + '<a href="' + response[i].title + ' target="_blank">"' + response[i].title +"</a> <br />";
                }
                docSection.empty();
                docSection.append(list);
            });
        }

    });
}(jQuery));

I'm trying to think of the best way to get the list of articles based on the year selected from the dropdown. The year dropdown list and the listing of articles on the page are populated by using the GroupedList feature:

<select id="SelectYear">
    <% loop $GroupedDocsByDate.GroupedBy(YearCreated) %>
        <option value="$YearCreated">$YearCreated</option>
    <% end_loop %>
</select>
<br /><br />
<div class="RecentDocs">
    <% loop $getAllRecentCoverageDocs %>
        $Date, <a href="$ArticleDoc.URL" target="_blank">$Title</a>, $Publisher<br /><br />
    <% end_loop %>
</div>

I figure that using something similar would work for getting articles by year, but I'm stuck as to how to finish the getDocsByYear function so I have the correct list of articles based on the year selected by the dropdown list. Right now, with what I have, I only get one article returned regardless of which year is selected, and this is not correct. Any suggestions would be helpful!

Dejsa Cocan Dejsa Cocan · Accepted Answer · 2016-04-20T17:44:07

Ok, finally got it!

     public function getDocsByYear(){
        //Get the year selected by the dropdown
        $docYear = $this->getRequest()->param('ID');

        //Group together all docs that are associated with that selected year
        $documents = RecentCoverageDoc::get();
        $return = array();

        //put the articles into the array that match the selected year
        foreach($documents as $document){
            $docDate = date("Y", strtotime($document->Date));

             if($docDate == $docYear){
                $return[] = array(
                   'title' => $document->Title,
                   'date' => $document->Date,
                    'publisher' =>$document->Publisher
                );
             }
        }

        return json_encode($return);

    }

I didn't need a GroupedList. I was making it too complicated. This method seems to be working. Not sure if it's the best method ever, but I don't see anything wrong with it, either.

Update content after selecting date from dropdown using PHP and jQuery

1 Answers