# Previous/Next button for Dynamic Pages 

**URL:** <https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [November 20, 2017, 9:24pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084 "2017-11-20T21:24:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yvette-weathersby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yvette-weathersby/32/1064_2.png) [@yvette-weathersby](https://forum.wixstudio.com/u/yvette-weathersby)\
**Post date:** [November 20, 2017, 9:24pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/1 "2017-11-20T21:24:41Z")

</div>

Hello,

I created a dynamic item page and followed the instructions form the article below to create previous/next buttons, but I’m having issues with my urls in the code so the buttons are not working. Can I get some feedback on what I’m doing wrong here.

> **[Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page...](https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code)**
>
> Visit the Velo by Wix website to onboard and continue learning.When you want to add previous and next buttons to a dynamic page, you may be tempted to add two b

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/3/d37be7761e3bfd93a700f3b7c038eef54f534b87.png)

---

<div class="post-metadata">

**Author:** ![admin-23](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/admin-23/32/708_2.png) [@admin-23](https://forum.wixstudio.com/u/admin-23)\
**Post date:** [November 21, 2017, 12:14pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/2 "2017-11-21T12:14:36Z")

</div>

Hello Yevette,

Are you importing local from Wix-storage?

```javascript
import {local} from "wix-storage";

```

---

<div class="post-metadata">

**Author:** ![yvette-weathersby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yvette-weathersby/32/1064_2.png) [@yvette-weathersby](https://forum.wixstudio.com/u/yvette-weathersby)\
**Post date:** [November 21, 2017, 5:54pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/3 "2017-11-21T17:54:26Z")

</div>

Hello Ido,

Thank you for the advice. That cleared up the “local” error. However I am still having issues with the “https”. Did I copy the url incorrectly?

 ![](https://us1.discourse-cdn.com/wix/original/3X/7/0/70e6c3923a528ea2d899ec51b3b2791f2097707a.png)  
incorrectly?

---

<div class="post-metadata">

**Author:** ![system](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/system/32/86885_2.png) [@system](https://forum.wixstudio.com/u/system)\
**Post date:** [November 21, 2017, 8:01pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/4 "2017-11-21T20:01:24Z")

</div>

Hi Yvette,  
‘local.setItem’ accepts two parameters, the first one is a ‘Key’ and the second one is ‘Value’.

In the article, they have the following line:

```javascript
const dynamicPageURLs = result.items.map(item => item[linkField]);         
local.setItem('dynamicPageURLs', dynamicPageURLs);

```

Which actually sets the Key named ‘dynamicPageURLs’ to be an array of URLs (which is what you get when calling ‘result.items.map’ if the previous line).

Hope this helps,  
Liran.

---

<div class="post-metadata">

**Author:** ![\_yoyo](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_yoyo/32/1000_2.png) [@\_yoyo](https://forum.wixstudio.com/u/_yoyo)\
**Post date:** [December 5, 2017, 4:59pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/5 "2017-12-05T16:59:19Z")

</div>

I’m having the same problem. Followed the tutorial and my previous/next buttons are not working on my item page.

This is my code for review.

```javascript
// INDEX PAGE
import {local} from "wix-storage";

const linkField = "link-Member-Applications-emailText"; // replace this value

$w.onReady(function () {
  $w("#MemberApps").onReady(() => {
    const numberOfItems = $w("#MemberApps").getTotalCount();
  
    $w("#MemberApps").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);
      } );
  } );
} );

```

I got “link-Member-Applications-emailText” from the database, from the field that was auto-generated when I created and linked the Item page to my Index page.

```javascript
// ITEM PAGE
import {local} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
	$w("#prevButton").disable();
	$w("#nextButton").disable();
	
	if (local.getItem('dynamicPageURLs')) {
		let dynamicPageURLs = local.getItem('dynamicPageURLs').split(",");

		let currentPage = "/" + wixLocation.path.join('/');
		let currentPageIndex = dynamicPageURLs.indexOf(currentPage);

		if (currentPageIndex > 0) {
			$w("#prevButton").onClick( () => {
				wixLocation.to(dynamicPageURLs[currentPageIndex - 1]);
			} );
			$w("#prevButton").enable();
		}

		if (currentPageIndex < dynamicPageURLs.length - 1) {
			$w("#nextButton").onClick( () => {
				wixLocation.to(dynamicPageURLs[currentPageIndex + 1]);
			} );
			$w("#nextButton").enable();
		}
	}
});

```

Something strange happens and I’m not sure if it’s related, in the editor when I open the page code, it shows the little error icons beside the line numbers, then it disappears once I click in the code.

Okay, so upon further inspection, I have found that the next button works but no matter which item you are viewing, the button takes you to the first item in the dataset.

---

<div class="post-metadata">

**Author:** ![mikhail-spirin-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mikhail-spirin-wix/32/838_2.png) [@mikhail-spirin-wix](https://forum.wixstudio.com/u/mikhail-spirin-wix)\
**Post date:** [December 6, 2017, 10:20am UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/6 "2017-12-06T10:20:45Z")

</div>

Hi! First thing is known and handled (apperaing erros for second)

Second is something strange, but looks like you don’t have anyitems in your local storage

Is it possible to share link to your site here? I can check

---

<div class="post-metadata">

**Author:** ![\_yoyo](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_yoyo/32/1000_2.png) [@\_yoyo](https://forum.wixstudio.com/u/_yoyo)\
**Post date:** [December 6, 2017, 4:51pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/7 "2017-12-06T16:51:32Z")

</div>

Yes, I wish there was a way to private message though. Please let me know when you no longer need the URLs, so I can delete them.

Index Page **redacted url**  
Item Page **redacted url**

---

<div class="post-metadata">

**Author:** ![mikhail-spirin-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mikhail-spirin-wix/32/838_2.png) [@mikhail-spirin-wix](https://forum.wixstudio.com/u/mikhail-spirin-wix)\
**Post date:** [December 7, 2017, 9:22am UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/8 "2017-12-07T09:22:35Z")

</div>

Copied those and checking, so please delete

---

<div class="post-metadata">

**Author:** ![mikhail-spirin-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mikhail-spirin-wix/32/838_2.png) [@mikhail-spirin-wix](https://forum.wixstudio.com/u/mikhail-spirin-wix)\
**Post date:** [December 7, 2017, 10:22am UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/9 "2017-12-07T10:22:50Z")

</div>

Hi! Found the problem

Why did you delete this part from original tutorial?)

tutorial -  
**const currentPage = ‘/’ + wixLocation.prefix + ‘/’ + wixLocation.path.join(‘/’);**

your site -  
**const currentPage = ‘/’ + wixLocation.path.join(‘/’);**

This causes the issue.

It tries to find this -  
/leafrielcoyle%[40gmail.com](http://40gmail.com)

in this array -  
/Member-Applications/testemail3%[40gmail.com](http://40gmail.com),/Member-Applications/testemail2%[40gmail.com](http://40gmail.com),/Member-Applications/testemail1%[40gmail.com](http://40gmail.com),/Member-Applications/leafrielcoyle%[40gmail.com](http://40gmail.com),/Member-Applications/jaded.rogue%[40gmail.com](http://40gmail.com)

And it doesn’t succeed, because there is no such item

---

<div class="post-metadata">

**Author:** ![\_yoyo](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_yoyo/32/1000_2.png) [@\_yoyo](https://forum.wixstudio.com/u/_yoyo)\
**Post date:** [December 7, 2017, 5:35pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/10 "2017-12-07T17:35:16Z")

</div>

I honestly don’t know know how that happened… I thought I had copied it perfectly… 😅😅😅

I’m sure it’ll work but I’ll let you know once I’ve confirmed.  
Thank You Mikhail! Much Appreciated! xx

---

<div class="post-metadata">

**Author:** ![\_yoyo](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_yoyo/32/1000_2.png) [@\_yoyo](https://forum.wixstudio.com/u/_yoyo)\
**Post date:** [December 7, 2017, 5:54pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/11 "2017-12-07T17:54:03Z")

</div>

YAY! as expected, that fixed it. Thank You!

One final question.  
Is there a way to loop the entries? So when you’re on the first item, if you click the previous button it takes you to the last item. And if you’re on the last item and you click the next button, it takes you back to the first item?

---

<div class="post-metadata">

**Author:** ![mikhail-spirin-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mikhail-spirin-wix/32/838_2.png) [@mikhail-spirin-wix](https://forum.wixstudio.com/u/mikhail-spirin-wix)\
**Post date:** [December 8, 2017, 11:30am UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/12 "2017-12-08T11:30:22Z")

</div>

Yes, you should add more conditions -  
if (currentPageIndex = 0) { … set wixLocation.to to last item on prevButton … }  
if (currentPageIndex = dynamicPageURLs.length {… set wixLocation.to to first item on nextButton … }

but i won’t write code for you, i can only give you heneral idea how to achieve this

---

<div class="post-metadata">

**Author:** ![\_yoyo](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_yoyo/32/1000_2.png) [@\_yoyo](https://forum.wixstudio.com/u/_yoyo)\
**Post date:** [December 8, 2017, 12:51pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/13 "2017-12-08T12:51:38Z")

</div>

I’m fine with that! I should just need a point in the right direction 🙂  
Thanks so much Mikhail!  
Cheers! 🍻

---

<div class="post-metadata">

**Author:** ![security-risk](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/security-risk/32/1839_2.png) [@security-risk](https://forum.wixstudio.com/u/security-risk)\
**Post date:** [February 3, 2018, 11:43pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/14 "2018-02-03T23:43:23Z")

</div>

Help!

[https://www.saildaddy.com/NewZealand/Picton-Marina](https://www.saildaddy.com/NewZealand/Picton-Marina)

I’m have some difficulties with adding a “Next button and a Previous button” on a single not a category Dynamic page. I just can’t figure it out. I’ve followed steps #8 from the tutorial below and nothing happened

- [CMS (Formerly Content Manager): Displaying Collection Content on a Regular Page | Help Center | Wix.com](https://support.wix.com/en/article/tutorial-using-a-dataset-on-a-regular-page-to-display-content)

1. Create Previous and Next Buttons  
Now that all your elements are connected to the same collection through the same dataset, you need to allow your visitors to browse through the information. To do this, add two buttons to your page, connect them to the same dataset as the other elements, and define their click actions.

**To create Previous and Next buttons** :

1. Add two **buttons** to your page and change their texts to **Previous** and **Next**.

2. Click their **Connect to Data** 📷  
buttons.

3. In the **Connect Button** panel, select your **dataset**.

4. Under **Link connects to** , select **Previous** for the first button and **Next** for the second button.

So I then followed the tutorial below and I’m confused and don’t know what I’m supposed to add in

**import {local} from ‘wix-storage’;** to resolve the error message on line 6? Also am I supposed to be on the site or the page when adding this code?

> **[Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page...](https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code)**
>
> Visit the Velo by Wix website to onboard and continue learning.When you want to add previous and next buttons to a dynamic page, you may be tempted to add two b

 ![](https://us1.discourse-cdn.com/wix/original/3X/6/f/6f973f86c097bed18d0aec4f6200d2ddb453f685.jpeg)  
Thank you for any help

---

<div class="post-metadata">

**Author:** ![roi-bendet](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/roi-bendet/32/1283_2.png) [@roi-bendet](https://forum.wixstudio.com/u/roi-bendet)\
**Post date:** [February 5, 2018, 9:52am UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/15 "2018-02-05T09:52:19Z")

</div>

Hi,  
Can you specify the name of the page ?  
Roi

---

<div class="post-metadata">

**Author:** ![lostsoulscomic66](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lostsoulscomic66/32/9286_2.png) [@lostsoulscomic66](https://forum.wixstudio.com/u/lostsoulscomic66)\
**Post date:** [February 18, 2019, 5:49pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/16 "2019-02-18T17:49:05Z")

</div>

hi, i am having some issue with my next and previous button. i used the technique from [Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code | Help Center | Wix.com](https://support.wix.com/en/article/wix-code-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code)

for some reason the wixLocation.path.join (‘/’) only give me a value of yoursitename and not the info of the page i need.

this page work perfectly

![](https://us1.discourse-cdn.com/wix/original/3X/b/0/b06cca1d17b4b77d76434367b8fa6b49a4e3a6bf.png)

but than i get stuck at getting the link with ^^’

![](https://us1.discourse-cdn.com/wix/original/3X/0/f/0fc9d24dfec6e73e852d8d3ef8a738c0bd2dbce7.png)  
can someone please help me?

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [February 18, 2019, 6:32pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/17 "2019-02-18T18:32:36Z")

</div>

Go back and read the page again.

On the dynamic item page, begin by adding two buttons to the page. Feel free to change the design and text of the buttons, but make sure not to add any links to the buttons.

The code we will add to the dynamic item page does the following:  
Disables the previous and next buttons

You need to change your code:

```javascript
 $w.onReady(function () {
   $w("#previous").disable(); // you have this as hidden so button still active
   $w("#next").disable(); // you have this as hidden so button still active

```

You need to have the buttons as disabled and not hidden, otherwise the code does not work as the buttons are still active despite being set as hidden and so the if statements won’t be able to enable them.

Also change the last line on each if statement too:

```javascript
$w("#previous").enable(); //not as isVisible
       and
$w("#next").enable(); //not as isVisible

```

You can’t have visible or hidden in your code setup, you are mixing up hidden/visible with hide/show and should be used as below:

```javascript
let isHidden = $w("#myElement").hidden; // false
or
let isVisible = $w("#myElement").isVisible; // true

In code like this
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

```

See more here:

> **[HiddenMixin - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/hiddenmixin)**
>
> Provides functionality for elements that can be hidden.

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [February 18, 2019, 6:40pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/18 "2019-02-18T18:40:56Z")

</div>

Lines 6 and 7 need to be at the top of the code before everything else, basically just delete everything before them as you’ve currently got the onReady function for the page happening before you’ve imported anything.

Like this:

```javascript
1. import {local} from 'wix-storage';
2. import wixLocation from 'wix-location';
3.
4. $w.onReady(function () {
5. $w("#previous").disable();
6. $w("#next").disable(); 

```

Plus, you won’t need anything past line 30 either, so delete 31 to 33.

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [February 18, 2019, 6:53pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/19 "2019-02-18T18:53:28Z")

</div>

However, as you are not using dynamic pages, then that tutorial might not be any good for you unless you change your pages to dynamic pages.

Look at this link:  
[https://www.wix.com/code/reference/wix-window.html#referrer](https://www.wix.com/code/reference/wix-window.html#referrer)

Try something like this as stated on that link:

Get the previous page within a Wix site  
This example demonstrates how to use session storage to know which page is the page a site visitor previously visited. The code below needs to be placed in the **Site** tab so that it runs on all your site’s pages. The code retrieves the URL of the page a visitor previously visited from session storage. It then stores the URL of the visitor’s current page in session storage. When the visitor navigates to another page, this stored URL is retrieved as the previous page URL.

```javascript
// In Site tab

import {session} from 'wix-storage';
import wixLocation from 'wix-location';

let previousPageURL;

$w.onReady(function () {
  previousPageURL = session.getItem("page");
  session.setItem("page", wixLocation.url);
});

```

This is another back button code example from Yisrael (Wix Mod):

This example shows how to implement a Back Button to allow the site visitor to return to the previously viewed site page. This feature will only work for a published site and will not work in the Editor.​

Note that the code is added to the Site tab of the code so that it is available on all pages.

```javascript
// In Site tab

import wixWindow from 'wix-window';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';

let previousPageURL;

$w.onReady(function () {

    previousPageURL = session.getItem("page");
    console.log(previousPageURL);
    session.setItem("page", wixLocation.url);
    $w("#btnBack").link = previousPageURL;
    $w("#btnBack").target = "_self";
});

```

---

<div class="post-metadata">

**Author:** ![lostsoulscomic66](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lostsoulscomic66/32/9286_2.png) [@lostsoulscomic66](https://forum.wixstudio.com/u/lostsoulscomic66)\
**Post date:** [February 19, 2019, 2:34pm UTC](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084/20 "2019-02-19T14:34:56Z")

</div>

@givemeawhisky hi thanks for taking the time to respond. I found my error earlier which was to publish the website. the reason i used isVisible and hidden is that my button are actually image. image doesnt have those attribut (kept saying error) so i used those two instead and it works ^^

[Next page](https://forum.wixstudio.com/t/previous-next-button-for-dynamic-pages/35084.md?page=2)