Pagination - DmxConnect - "jumps" data on the screen

Wappler General Bugs
#1

Dont know if its a bug… or if dmxconnect has changed for a reason.

I have pagination on my site. Its all smooth paging between pages and only loads the images.
Here is the smooth version. You can move between the pages and the content on the page remains in place…

Western Cape Auctions - Online Bidding Platform - Google Chrome 2022-06-28 09-54-06

I have then updated to the latest dmxconnect and traversal…
Now if you click between pages via pagination it “jumps” data on the screen. So when i move between the pages… it “jumps”…

Site Title 111 - Google Chrome 2022-06-28 09-56-45

#2
#3

App Connect is being updated constantly. Do you know which version of App Connect the first video uses? It seems that with the second it replaces the full html content and in the first it only updates partially.

#4

Hi Patrick.

If i go to my backup and online versions.

Version: 1.12.1
© 2022 DMXzone.com
@build 2022-02-16 16:56:20

I don’t have versions in between (appconnect and traversal) but if you have a few you want me to download between

Version: 1.12.1 and Version: 1.14.2 then i can test it and see in which version it all went funny …

If it helps the part that is jumping now is in a repeat.
<div class="row" id="repeatauctionnumber" is="dmx-repeat" dmx-bind:repeat="lotsdataview.data" key="id">

#5

Very similar to what I encountered when updating App Connect: Websockets data and App Connect update cycles

Due to the changed rendering in the new versions of AppConnect (after 1.12.3), many projects became impossible to use, so I had to go back to the old versions of AppConnect.

1 Like
#6

I have removed the key=“id” from the repeat .

<div class="row" id="repeatauctionnumber" is="dmx-repeat" dmx-bind:repeat="lotsdataview.data" >

This seems to have done the trick with the pagination as its smooth now again… But i do still have a page jump when i close the modal.

So all back to “smooth” again…

Weird that the key=“id” was ‘ok’ before but not now… but anyway im sure there is method behind all of this.

@Mr.Rubi

#7

Without the key it is indeed faster, it will just update the minimal changes in the DOM. For lists with pagination and no elements that have some internal state this is the fastest and best way. The key is needed when you have elements with some state (like form elements) or when you only do small updates like swap 2 items or adding/removing an item from the list.