Question

我有一个文章列表，可以根据年份的下拉列表按年分类。我问了这个并得到了一个惊人的答案，但现在我注意到一个问题：每当用户点击＆＃34;返回＆＃34;文章列表总是重置为默认视图（显示所有文章）。但是，下拉列表会记住＆＃34;用户的选择。我希望文章列表与下拉菜单中的选定年份相匹配，以保证用户的一致性和容易性（我不希望他们必须重新选择他们每次点击后退按钮时的年份文章）。

我知道我可以使用会话变量，但我想知道这是否真的有必要？或者考虑如何设置代码，这可能是更容易的路径？

以下是我对NewsReleasesPage模板的代码：

<?php

class NewsReleasesPage extends Page
{
    private static $db = array();

    private static $has_one = array();
}

class NewsReleasesPage_Controller extends Page_Controller
{
    private static $allowed_actions = array(
        'PaginatedReleases',
        'YearFilterForm',
        'handleYearRequest',
        'doFilter',
        'year',
        'index'
    );

    public function init()
    {
        parent::init();
    }


    public function handleYearRequest(SS_HTTPRequest $request)
    {
        $year = $request->param('ID');
        $data = array(
            'Year' => $year,
            'PaginatedReleases' => $this->PaginatedReleases($year)
        );

        if ($request->isAjax()) {
            // in case of an ajax request, render only the partial template
            return $this->renderWith('ArticleList', $data);
        } else {
            // returning an array will cause the page to render normally
            return $data;
        }
    }

    //creates a form to filter through news releases by year
    public function YearFilterForm()
    {
        // get an array of all distinct years
        $list = SQLSelect::create()
            ->addFrom('NewsReleaseArticlePage')
            ->selectField('YEAR("ArticleDate")', 'Year')
            ->setOrderBy('Year', 'DESC')
            ->addGroupBy('"Year"')->execute()->column('Year');

        // create an associative array with years as keys & values
        $values = array_combine($list, $list);

        // our fields just contain the dropdown, which uses the year values
        $fields = FieldList::create(array(
            DropdownField::create(
                'Year',
                '',
                $values,
                $this->getRequest()->param('ID')
            )->setHasEmptyDefault(true)->setEmptyString('Show all')
        ));

        $actions = FieldList::create(array(
            FormAction::create('doFilter', 'Submit')
        ));

        return Form::create($this, 'YearFilterForm', $fields, $actions);
    }

    public function year()
    {
        return $this->handleYearRequest($this->request);
    }

    public function index()
    {
        return $this->handleYearRequest($this->request);
    }

    //redirects to the proper url depending on which year is selected for sorting news
    public function doFilter($data, $form)
    {
        if (empty($data['Year'])) {
            return $this->redirect($this->Link());
        } else {
            return $this->redirect($this->Link('year/' . $data['Year']));
        }
    }

    //created a paginated list of news released by year
    public function PaginatedReleases($year = null)
    {
        $list = NewsReleaseArticlePage::get()->sort('ArticleDate', 'DESC');
        if ($year) {
            $list = $list->where(array('YEAR("ArticleDate") = ?' => $year));
        }
        return PaginatedList::create($list, $this->getRequest())->setLimitItems(0);
    }

}

以下是与此相关的jQuery：

(function($) {
    $(function(){
        // hide form actions, as we want to trigger form submittal
        // automatically when dropdown changes
        $("#Form_YearFilterForm").find(".Actions").hide();

        // bind a change event on the dropdown to automatically submit
        $("#Form_YearFilterForm").on("change", "select", function (e) {
            $("#Form_YearFilterForm").submit();
        });

        // handle form submit events
        $("#Form_YearFilterForm").on("submit", function(e){
            e.preventDefault();
            var form = $(this);
            $("#ArticleList").addClass("loading");
            // submit form via ajax
            $.post(
                form.attr("action"),
                form.serialize(),
                function(data, status, xhr){
                    $("#ArticleList").replaceWith($(data));
                }
            );
            return false;
        });

        // handle pagination clicks
        $("body").on("click", "a.pagination", function (e) {
            e.preventDefault();
            $("#ArticleList").addClass("loading");
            $.get(
                $(this).attr("href"),
                function(data, status, xhr){
                    $("#ArticleList").replaceWith($(data));
                }
            );

            return false;
        });

    });
})(jQuery);

然后呈现列表的SilverStripe模板文件：

<div id="box3" class="clearfix">
    <div id="Box-Main-Right" class="clearfix">
        <p class="Text-Intro">$H1</p>
        $YearFilterForm
    </div>
</div>
<div class="Box-LEADING-BRANDS clearfix">
    <div class="Box-Main-Right1 clearfix">
        <% include ArticleList %>
    </div>
</div>
$Form

Answer 1

我认为你遇到了这个问题，因为表单开始的状态与页面加载时的默认状态不同，因此内容（通过JS加载）与表单字段不同步。

如果下拉值与默认值不同（例如，当它不是空值时），那么简单 - 尽管有点hacky - 方法是仅通过JS提交表单。您可以通过更改JS代码来执行此操作：

// handle form submit events
$("#Form_YearFilterForm").on("submit", function(e){
    // removed code for brevity
});

// NEW CODE TO ADD
// If the dropdown has a value (eg. is not empty), submit it.
if($("#Form_YearFilterForm select").val()){
    $("#Form_YearFilterForm").submit();
}

正确这样做的方法是让您的JavaScript代码与URL更改一起使用。您可以使用History API来完成此操作。因此，您将按如下方式重写JS代码：

;(function($) {
    $(function(){
        // Establish Variables
        var History = window.History,
            State = History.getState();

        // hide form actions, as we want to trigger form submittal
        // automatically when dropdown changes
        $("#Form_YearFilterForm .Actions").hide();

        // bind a change event on the dropdown to automatically submit
        $("#Form_YearFilterForm").on("change", 'select[name="Year"]', function(e){
            $("#Form_YearFilterForm").submit();
        });

        // handle form submit events
        $("#Form_YearFilterForm").on("submit", function(e){
            e.preventDefault();
            var dropdown = $(this).find('select[name="Year"]');
            var year = dropdown.val();
            // Add a new history state where we keep the year as a property
            // and use the urlpattern to build our target URL
            History.pushState(
                { year: year },
                null,
                dropdown.data("urlpattern").replace(/YYYY$/, year)
            );
            return false;
        });

        History.Adapter.bind(window, 'statechange', function(){
            // Whenever the URL changes, we load the proper data via AJAX
            // and set the dropdown value accordingly
            State = History.getState();
            $('#Form_YearFilterForm select[name="Year"]').val(State.data.year);
            $("#ArticleList").addClass("loading");
            $.get(
                State.url,
                function(data, status, xhr){
                    $("#ArticleList").replaceWith($(data));
                }
            );
        });

        // handle pagination clicks
        $("body").on("click", "a.pagination", function (e) {
            e.preventDefault();
            $("#ArticleList").addClass("loading");
            $.get(
                $(this).attr("href"),
                function(data, status, xhr){
                    $("#ArticleList").replaceWith($(data));
                }
            );

            return false;
        });
    });
})(jQuery);

PHP部分保持不变，除了我们将所需的URL模式传递给JS的一小部分。我将它作为HTML5数据属性添加到Dropdown字段，但您可以对其进行硬编码或传递它：

DropdownField::create(
    'Year',
    'Year',
    $values,
    $this->getRequest()->param('ID')
)->setHasEmptyDefault(true)
    ->setEmptyString('Show all')
    ->setAttribute('data-urlpattern', $this->Link('year') . '/YYYY')

这个稍微复杂的解决方案的好处是，它知道URL。因此，您可以使用后退/前进浏览器按钮正常导航，同时仍保留完整的AJAX功能。

SilverStripe - 按回按钮时保持下拉选择的内容

1 个答案: