Swiper - strange behaviour when filtering query dynamically

I have put this down as a bug but i am not entirely sure whether i am just expecting too much of the slider component.
I have a basic swiper displaying dynamic elements from a data query. This query returns, among other things, an image link, a UK city name and a description.
These details are displayed within the swiper (i have tried two versions, one with paragraphs and images, one with a card)

I have a text search box which is used to dynamically filter the query. (city contains $_GET.filter)

I can see that filter is working correctly as i have appended a table under the swiper to show the current query data.
NOW THE ISSUE
As i enter a search term the swiper disappears completely revealing only the table (showing the filter is working correctly)
At this point i assumed that the swiper data source could not be filtered i.e. i was expecting too much from it or that some kind of dynamic refresh was required.

Then i noticed that if i typed a city name the started to backspace deleting some of the term the swiper would suddenly reappear and was filtered on the remaining letters!

So for example i type “london” and the swiper disappears then backspace to “lo” the swiper reappears filtered on “lo”
similarly typing “bourne” then backspacing to “bo” reveals “bournemouth”

I have to add that this seems slightly random as sometimes the backspacing doesn’t work, other times i can type the full city name.
Any ideas?

The page can be found at https://findmystudentdigs.co.uk/slider2.php

Nobody got any ideas?

Will investigate tomorrow, will probably needs more insights from @patrick

1 Like

Poor Patrick, he gets all the difficult ones :grinning:

well I looked at your slider Brian, and have a few suggestions:

  • you shouldn’t filter directly on the input - but on a state manager value - like query string param
  • add on change dynamic event on the entry - with a debounce (like 200ms - so that it doesn’t fire on every keypress) - that sets the value of the state manager query param

So this should solve your problem.

No, just attach dynamic event on change to the input - and when fired set value of the state manager value as I explained above

Sorry George, misread your reply, must put my proper glasses on!

1 Like

Still having issues here.
I have followed your advice @george and it did help to some degree but not a solution

Firstly i found that using the change event did not fire at all however using the updated event had the required effect and i can see the query string in the url update as expected.

I have tried increasing the value of debounce up to as high as 10000 in case it is a sync/event issue but that makes no difference.

So currently i type into the box and the filter appears in the URL bar as expected. I have added a notification to show when the event is fired.
The query is filtered, the table shows correct results but the swiper disappears. (very occasionally it works but rarely)
HOWEVER if i press ENTER after typing the search term the page functions exactly as i want i.e. the swiper updates correctly, not sure if that helps.
Any other ideas?

Using Update event
https://findmystudentdigs.co.uk/slider2.php

Using Change event
https://findmystudentdigs.co.uk/slider3.php

I think it might update correctly if you re-load the query:

image

Good call but sadly not the solution

Sorry that didn’t help. I remembered I had a very similar refresh problem which was fixed like that.

I think the problems may be related to this thread - which i’m hoping to have an update on. This matter of timing and variables being set is pretty important. Some clarification would be very helpful. It’s probably difficult to give a definitive answer, but the issue could be critical if it relates to updates etc…

Yes, i tend to agree. That’s why i tried setting debounce to a very high value to try and allow the any event complete before the update event was sent. Sadly it didn’t make a difference.
Shame the Swiper does not have a refresh action as well as its start and stop actions. gut feeling is that would solve the problem. I am the first to admit by jquery skills lag far behind my sql

Similar to this:

Perhaps I should make it a request.

It looks like there is a bug in the swiper with dynamic data, currently working on a fix.

1 Like

This is now solved in the latest version 1.7.0

Sadly not George, have amended swiper slightly to refresh on post as the events did not seem to be firing as i would expect. Now state manager is updated on the “Submit” event

Go to https://findmystudentdigs.co.uk/slider.php

enter “leeds” and click search

Table shows 3 results for leeds, swiper shows 2 repeated 3 times

Enter “liver” and click search

Table shows 2 entries for liverpool, Swiper shows 1 repeated three times

Enter “Exeter” and click Search
Table shows 1 result for Exeter, Swiper is blank

It seems record 1 of the record set is never displayed and the remainder are repeated three times?

i have the same problem now i have a swiper with dynamic data in it and some filters and when the state manager from which my swiper gets its items changes my swiper gets a very strange and disappointing behavior like we get 3 sliders instead of 12 and we have 1 slider per view instead of 5, whyyy? it's got me really literally mad!! i can't believe this bug has been there since 2018 !!!