sort_order不会从django脆皮形式的toogle排序按钮更改

Question

我正在使用django脆皮表单，并且有一个托格尔排序按钮可以通过asc或desc订单排序。

一个searchform这样：

class SearchForm(forms.Form):
    """Text-searching form."""

    ...
    sort_order = forms.CharField(required=False, widget=forms.HiddenInput)
    ....

    def __init__(self, user, language=None, show_builder=True, **kwargs):
        """Generate choices for other components in the same project."""
        self.user = user
        self.language = language
        super().__init__(**kwargs)

        self.helper = FormHelper(self)
        self.helper.disable_csrf = True
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Div(
                ....
                Div(
                    Field("sort_by", template="snippets/sort-field.html"),
                    Field("sort_order", template="snippets/sort-order.html"),
                    css_class="btn-group search-group sort-field",
                    role="group",
                ),
                css_class="btn-toolbar",
                role="toolbar",
            ),
            ....
        )

我有sort-header.html这样的：

<div class="btn-group sort-order" role="group">
    <button type="button" class="btn btn-default search-field query-sort-toggle">
        <span title="Ascending" class="search-icon active asc">{% icon "sort-ascending.svg" %}</span>
        <span title="Descending" class="search-icon desc">{% icon "sort-descending.svg" %}</span>
    </button>
    <input type="hidden" id="id_sort_order" name="sort_order" value="{{ sort_order|default:'asc' }}" aria-label="{% trans "Sort Order" %}" />
</div>

我有 Order 按钮：

$(".query-sort-toggle").click(function () {
    var $this = $(this);
    var $label = $this.find("span.search-icon");
    $label.toggle();

    var sort_order = $label.attr('class').replace('search-icon active', '')
    var $toggleInput = $this.closest(".sort-order").find("input[name=sort_order]");
    $toggleInput.val(sort_order)

    ....
    if ($this.closest(".result-page-form").length) {
      $this.closest("form").submit();
    }
  });

单击按钮时，此CSS隐藏了不活动的跨度：

.query-sort-toggle span:not(.active) {
  display: none;
}

我有此切换按钮，并在单击时提交表单。

默认排序顺序为asc订单，但是在表单提交后页面重新加载时，该按钮仍显示默认值。

我可以按asc和desc顺序排序，但是我无法更改span的图标和sort_order < /代码>变量。

我在这里缺少什么？

Answer 1

您可以在JavaScript中添加一些调试代码，并查看浏览器控制台，以查看是否将正确的值设置为您的表单。

$(".query-sort-toggle").click(function () {
    var $this = $(this);
    var $label = $this.find("span.search-icon");
    $label.toggle();

    var sort_order = $label.attr('class').replace('search-icon active', '')
    var $toggleInput = $this.closest(".sort-order").find("input[name=sort_order]");
    $toggleInput.val(sort_order)
    // DEBUG
    console.debug('set sort_order value');
    console.debug(sort_order);

    ....
    if ($this.closest(".result-page-form").length) {
      $this.closest("form").submit();
    }
  });

您甚至可以使用视图来验证提交的数据，

def your_view(request):
    print(request.POST.get('sort_order')
    # ... your code
    context['sort_order] = sort_order
    return render(request, 'template/name.html', context)

如果您确保提交正确的值，则可以调整模板以显示所选排序订单图标

<div class="btn-group sort-order" role="group">
    <button type="button" class="btn btn-default search-field query-sort-toggle">
        <span title="Ascending" class="search-icon {% if sort_order == 'asc' %}active{% endif %} asc">{% icon "sort-ascending.svg" %}</span>
        <span title="Descending" class="search-icon {% if sort_order == 'desc' %}active{% endif %} desc">{% icon "sort-descending.svg" %}</span>
    </button>
    <input type="hidden" id="id_sort_order" name="sort_order" value="{{ sort_order|default:'asc' }}" aria-label="{% trans "Sort Order" %}" />
</div>