Next button on dynamic page only works x times

Hi everyone!

So I ran in to this very strange problem using next / previous buttons on dynamic pages using this method

I use it on a few different dynamic pages and it works on all of them. However! It does not cycle through the whole data set.

If yo go to
https://shellmanscandinavia.wixsite.com/website-1/freeform/ and click on the first frame the next button will only cycle through 6 of the 19 items in the gallery.

However if you go to https://shellmanscandinavia.wixsite.com/website-1/available/ and do the same it will cycle through 21 of 42 items and it doesn’t matter if you start on item 19, you still roll over on 21.

The code on both pages is the same. Is there a data set option I am missing or anything else controlling this?

Thanks

Post your code please

Sorry about that!

For https://shellmanscandinavia.wixsite.com/website-1/freeform/

import { local } from ‘wix-storage’ ;

const linkField = “link-freeform-title” ; // replace this value

$w . onReady ( function () {
$w ( “#dynamicDataset” ). onReady (() => {
const numberOfItems = $w ( “#dynamicDataset” ). getTotalCount ();

$w ( "#dynamicDataset" ). getItems ( 0 ,  numberOfItems ) 
  . then ( ( result ) => {  
    const  dynamicPageURLs  =  result . items . map ( item  =>  item [ linkField ]); 
    local . setItem ( 'dynamicPageURLs' ,  dynamicPageURLs ); 
  } ) 
  . catch ( ( err ) => { 
    console . log ( err . code ,  err . message ); 
  } ); 

} );
} );

And for item page https://shellmanscandinavia.wixsite.com/website-1/freeform/maldiva

import { local } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
$w ( “#previous” ). disable ();
$w ( “#next” ). disable ();

if ( local . getItem ( ‘dynamicPageURLs’ )) {
const dynamicPageURLs = local . getItem ( ‘dynamicPageURLs’ ). split ( ‘,’ );

const  currentPage  =  '/'  +  wixLocation . prefix  +  '/'  +  wixLocation . path . join ( '/' ); 
const  currentPageIndex  =  dynamicPageURLs . indexOf ( currentPage ); 

if  ( currentPageIndex  >  0 ) { 
  $w ( "#previous" ). link  =  dynamicPageURLs [ currentPageIndex  -  1 ]; 
  $w ( "#previous" ). enable (); 
} 

if  ( currentPageIndex  <  dynamicPageURLs . length  -  1 ) { 
  $w ( "#next" ). link  =  dynamicPageURLs [ currentPageIndex  +  1 ]; 
  $w ( "#next" ). enable (); 
} 

}
} );

For https://shellmanscandinavia.wixsite.com/website-1/available Index

import { local } from ‘wix-storage’ ;

const linkField = “link-available-title” ; // replace this value

$w . onReady ( function () {
$w ( “#dynamicDataset” ). onReady (() => {
const numberOfItems = $w ( “#dynamicDataset” ). getTotalCount ();

$w ( "#dynamicDataset" ). getItems ( 0 ,  numberOfItems ) 
  . then ( ( result ) => {  
    const  dynamicPageURLs  =  result . items . map ( item  =>  item [ linkField ]); 
    local . setItem ( 'dynamicPageURLs' ,  dynamicPageURLs ); 
  } ) 
  . catch ( ( err ) => { 
    console . log ( err . code ,  err . message ); 
  } ); 

} );
} );

and title page

import { local } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
$w ( “#previous” ). disable ();
$w ( “#next” ). disable ();

if ( local . getItem ( ‘dynamicPageURLs’ )) {
const dynamicPageURLs = local . getItem ( ‘dynamicPageURLs’ ). split ( ‘,’ );

const  currentPage  =  '/'  +  wixLocation . prefix  +  '/'  +  wixLocation . path . join ( '/' ); 
const  currentPageIndex  =  dynamicPageURLs . indexOf ( currentPage ); 

if  ( currentPageIndex  >  0 ) { 
  $w ( "#previous" ). link  =  dynamicPageURLs [ currentPageIndex  -  1 ]; 
  $w ( "#previous" ). enable (); 
} 

if  ( currentPageIndex  <  dynamicPageURLs . length  -  1 ) { 
  $w ( "#next" ). link  =  dynamicPageURLs [ currentPageIndex  +  1 ]; 
  $w ( "#next" ). enable (); 
} 

}
} );

Do i need to store things in different data sets to be able to use it on different parts of the website? in stead of every index page using #dynamicDataset.

So I found out what the problem was. The last working item before it rolled over to the first item again contained a Swedish ÅÄÖ character in the title, and therefore in the url. If i change the title and remove the Ö for example it works and the link to he item looks better as well.

I’m guessing my best bet is to add another field into the content manager and use that to display names (with ÅÄÖ) and keep the title field for generating urls and remove any special character from that field.

It’s an OK workaround i guess but took some time to figure out and im not sure if its documented anywhere.

If you use letters with diacritic, you should use the encoded URI for that.
For example:
instead of Å use: %C3%85
instead of Ä use %C3%84
and instead of Ö use %C3%96
To do the conversion you use the encodeURI function:

path = encodeURI(pathUrl)

But your solution should work as well.

1 Like