Swiper - strange behaviour when filtering query dynamically

Wappler General Bugs
#1

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

#2

Nobody got any ideas?

#3

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

1 Like
#4

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

#5

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.

#7

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

#8

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

1 Like
#9

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

#10

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

image

#11

Good call but sadly not the solution

#12

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…

#13

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

#14

Similar to this:

Perhaps I should make it a request.

#15
#16
#17

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

1 Like
#18

This is now solved in the latest version 1.7.0

#19
#20

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?