filterChanged() not working

Question

filterChanged() not working

Josephine-Marie opened this issue 3 years ago · 0 comments

Hello, I am currently trying to implement the filter-functionality into my SHOP project, I have a product model that has a many2many relation to a catchphrase model. My filter looks like this: (same as docs)

class FilterForm(NgModelFormMixin, Bootstrap3Form):
    scope_prefix = 'filters'


class CatchphraseFilter(FilterSet):
    catchphrases = ModelMultipleChoiceFilter(
        queryset=Catchphrase.objects.all(),
        widget=SelectMultiple(attrs={'ng-change': 'filterChanged()'})
    )

    class Meta:
        model = Product
        form = FilterForm
        fields = ['catchphrases']

    @classmethod
    def get_render_context(cls, request, `queryset):`
        filter_set = cls(data=request.GET)

        filter_field = filter_set.filters['catchphrase'].field
        filter_field.queryset = filter_field.queryset.filter(
            id__in=queryset.values_list('catchphrases'))
        return dict(filter_set=filter_set)

the widget works fine, only the catchphrases that are currently used by products get displayed, but when I click on one of them the site reloads and nothing happens. (Also when I use "/?catchphrases", the shop page loads with all products). Also there is "[invalid name]" over the widget, I saw that I need a field name somewhere but where?

<html>
<body>
<!--StartFragment-->

 
--
<form shop-product-filter="catchphrases" style="margin-bottom: 10px;">
  | <div class="djng-line-spreader"><ul ng-show="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt.$pristine" class="djng-form-errors" ng-cloak><li ng-show="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt.$error.rejected && Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt.$message" class="invalid" ng-bind="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt.$message"></li></ul></div>
  | <div class="has-feedback form-group"><label class="control-label" for="id_catchphrase">[invalid name]</label><select name="catchphrase" ng-change="filterChanged()" class="form-control" ng-model="filters[&#x27;catchphrase&#x27;]" id="id_catchphrase" multiple>
  | <option value="1">Fische</option>
  |  
  | <option value="3">Subtil</option>
  |  
  | <option value="5">Underwater</option>
  |  
  | <option value="6">Gerolsteiner</option>
  |  
  | </select><ul ng-show="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt['catchphrase'].$pristine" class="djng-form-control-feedback djng-field-errors" ng-cloak><li ng-show="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt['catchphrase'].$error.rejected && Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt['catchphrase'].$message" class="invalid" ng-bind="Q2F0Y2hwaHJhc2VGaWx0ZXJGb3Jt['catchphrase'].$message"></li></ul></div>
  |  
  | </form>
  |  

<!--EndFragment-->
</body>
</html>

everything gets loaded correctly (angular modules etc.) but I cannot figure out why it is not filtering my products.

Thanks a lot for help in advance!