Sort_order не изменяется от кнопки сортировки toogle в формах Django Crispy

Я использую django crispy forms и у меня есть кнопка сортировки toogle для сортировки по 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>

и jquery для обработки события click на sort 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();
    }
  });

Когда кнопка нажата, неактивный span скрывается с помощью этого css:

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

У меня есть кнопка переключения и форма отправляется при нажатии.

Порядок сортировки по умолчанию asc, но когда страница перезагружается после отправки формы, кнопка все еще показывает значение по умолчанию.

Я могу сортировать по asc и desc порядку, но я не могу изменить значок span и переменной sort_order.

Что я здесь упускаю?

Вы можете добавить отладочный код в 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>
Вернуться на верх