# Re-trigger embed code after pagination loading content

**URL:** <https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930>\
**Category:** Attributes\
**Tags:** cmsload\
**Created:** [May 21, 2024, 1:44am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930 "2024-05-21T01:44:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 21, 2024, 1:44am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/1 "2024-05-21T01:44:31Z")

</div>

Hi,

I’m having issues with custom code within a collection item not running after pagination. I’ve contacted webflow support and they suggest i get help with code that can reload my code snippet after pagination reload. Here’s the reply from support,

"In Webflow, interactions and other JavaScript functions typically work on page load. However, when pagination is used and elements on the page are replaced without reloading it, these functions need to be restarted each time the page content changes.

To address this issue, you’ll need to ensure that the functions within the collection items are restarted whenever the page content changes. This might involve manually triggering these functions again after the pagination operation is completed or finding a way to bind these functions to elements dynamically so that they are applied to new elements loaded via pagination."

> **[Royalty-Free Music Tracks for Commercial Use | OMP](https://ompltd.webflow.io/music-library)**
>
> Browse our collection of royalty-free music tracks available for commercial licensing. Find the perfect instrumental or song for your next video, podcast, or other commercial project. All tracks can be licensed for an affordable one-time fee.

The portfolio of Orchestral Music Productions Limited. Showcase of Lincoln Lam’s past projects, including pop songs, film scores, arrangements, custom music etc.

Does any one know how to achieve that? Thanks a lot!

* * *

Here is my site Read-Only: [Webflow - Orchestral Music Productions Limited](https://preview.webflow.com/preview/ompltd?utm_medium=preview_link&utm_source=designer&utm_content=ompltd&preview=007126246c8c50bf88648b61e484f129&pageId=6618f3cdc0d3539f1e2db794&locale=en-HK&workflow=preview)

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 22, 2024, 2:23am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/2 "2024-05-22T02:23:13Z")

</div>

hi, just checking if anyone’s got time to help me out a bit? been stuck for a long time… thanks!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 24, 2024, 10:54am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/3 "2024-05-24T10:54:26Z")

</div>

Hey @lincoln! I’m afraid we can not trigger inline scripts at all. You can, however, modify the current script to make it run for each item.

You can use the CMS Load API callback shown below to run the function each time new items are rendered on the page.

```js
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    console.log('cmsload Successfully loaded!');

    // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
    const [listInstance] = listInstances;
   
    //Your function declaration goes here

    //Call the function here for items rendered on page load

    // The `renderitems` event runs whenever the list renders items after switching pages.
    listInstance.on('renderitems', (renderedItems) => {
    //Call function here for newly rendered items
    console.log(renderedItems);
    });
  },
]);

```

I see you are using dynamic fields on the embed, we will need to add these fields to the item and target them with a query selector.

Let me know if you need any help rewriting the code!

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 27, 2024, 5:02am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/4 "2024-05-27T05:02:37Z")

</div>

hi luis, yes, i do need some help with codes and where to put them. So where should i put that code on my page? Thanks for getting back!!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 27, 2024, 8:50am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/5 "2024-05-27T08:50:10Z")

</div>

Hey @lincoln! I can help you with the complete code, that you will need to add to the `</body>` section of your custom code.

First I need you to add all these dynamic elements to the items as we will need to rewrite this function to iterate through all the items as we can not trigger inline scripts.

 ![Screenshot 2024-05-27 at 10.46.50](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/1/1df42e357e861899ff00cfa7738c62572e2824b6.png)

The fields can be hidden! I just need the data to make this code work.

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 28, 2024, 3:33am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/6 "2024-05-28T03:33:08Z")

</div>

> [@Support-Luis](#):
>
> as we will need to rewrite this function to iterate through all the items as we can not trigger inline scripts.

hi Luis, thanks for getting back!

Im not quite sure what I need to do exactly. What do you mean by the ‘items’? The dynamic fields are all connected to my collection items.

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 29, 2024, 2:59am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/7 "2024-05-29T02:59:56Z")

</div>

HI @Support-Luis , the dynamic fields are all pulled from my cms items. So what else am i missing? thanks!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 30, 2024, 7:08am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/8 "2024-05-30T07:08:16Z")

</div>

Hey @licoln!

We cannot trigger inline code, which is where we have the elements such as `uniqueID`, `Slug`, and `TrackLink`.

As we can not trigger this code again after rendering more items we need to have these fields within the element, ideally, as text elements so we can run a function on each element.

Something like this

```js
function createWaveSurfer(config) {
  const wavesurfer = WaveSurfer.create({
    container: config.container,
    progressColor: '#ffffff',
    waveColor: '#ffffff',
    barGap: '2',
    barWidth: '1',
    height: '65',
    cursorWidth: '0',
    url: config.tracklink,
    // Add more configuration options as needed
  });

  wavesurfer.on('decode', () => {
    const button = document.querySelector(config.buttonSelector);
    button.onclick = () => {
      // Bottom player
      const globalplaybtn = document.querySelector('#globalplaybtn');
      globalplaybtn.src = 'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf7333f7a2a70dbd9b21_pause.png';

      document.getElementById('globaltracktitle').innerHTML = config.name;
      wavesurferbottom.load(config.tracklink);
      wavesurferbottom.on('decode', () => {
        wavesurferbottom.play();
      });
    };
  });
}

//This will be run on every pagination change
tracks.forEach(track => {
  createWaveSurfer(track);
});

```

_ **Note that this is just a Chat GPT example of how the function might look like. This is not tested nor the final version!** _

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 30, 2024, 7:10am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/9 "2024-05-30T07:10:52Z")

</div>

We can add dynamic fields like this, a hidden div with the fields as text elements.

 ![Screenshot 2024-05-30 at 09.10.06](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/2/284cddd1dd07ae3581713b153a93a65404715354.png)

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 30, 2024, 9:00am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/10 "2024-05-30T09:00:01Z")

</div>

> [@Support-Luis](#):
>
> an add dynamic fields like this, a hidden div with the fields as text elements.

thanks @Support-Luis , can you give me an example of what I should put inside the text blocks? and where i should put the code above? thanks.

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [May 30, 2024, 9:06am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/11 "2024-05-30T09:06:28Z")

</div>

Sorry, im not a coder, and im trying to understand the whole mechanism of fs and webflow… may need more pointers in next steps…

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 31, 2024, 10:10am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/12 "2024-05-31T10:10:26Z")

</div>

Sure! I’ll try to record a loom later today to show you what I mean by adding the dynamic fields 😉

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [June 1, 2024, 12:17pm UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/13 "2024-06-01T12:17:27Z")

</div>

thanks! wait for your instructions!

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [June 4, 2024, 2:35am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/14 "2024-06-04T02:35:24Z")

</div>

Hi @Support-Luis , I have added those fields within the hidden div block as suggested above. Could you please take a look if im doing it right? If so, shall we continue? Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 6, 2024, 9:12am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/15 "2024-06-06T09:12:47Z")

</div>

Hey @lincoln! can you publish the page with this changes and let me know?

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [June 6, 2024, 10:27am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/16 "2024-06-06T10:27:44Z")

</div>

@Support-Luis hi its been published. [Music Library](https://ompltd.webflow.io/music-library)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 10, 2024, 10:33am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/17 "2024-06-10T10:33:54Z")

</div>

Hey @lincoln! I am still not seeing the div added to the published page, are you sure this is the correct live page?

I don’t know if it could be a Webflow bug where a div without a class is not correctly published so we can also try adding something like `player_info` as a class or something like so.

 ![Screenshot 2024-06-10 at 12.32.04](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/d/d1642ed18be529765879bde8499a240a262ea7c3.jpeg)

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [June 11, 2024, 9:15am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/18 "2024-06-11T09:15:38Z")

</div>

Hi @Support-Luis , thanks. It doesn’t seem to be able to appear when it’s hidden in the inspector even i gave all of them a class. So i make it visible and change the size to 0 and it can appear in inspector now. So what’s the next step? Thanks!

![Screenshot 2024-06-11 at 5.14.12 PM](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/b/b0861895fc7db6297fcb300a389f68735fd72887.png)  
 ![Screenshot 2024-06-11 at 5.13.49 PM](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/c/c436e24e846efe488933ff114c5deff065951b83.png)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 11, 2024, 11:31am UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/19 "2024-06-11T11:31:14Z")

</div>

Thank you @lincoln!

Now this should be copy/paste ready as I tested it multiple times. Great music by the way!

You can replace all of the code inside you `</body>` tag with this

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;
      const items = listInstance.items;
      const globalPlayBtn = document.querySelector('#globalplaybtn');

      items.forEach((item) => {
        const trackContainerElement = item.element;
        const trackDataContainer = trackContainerElement.querySelector('.hidden_div');

        const uniqueID = trackDataContainer.querySelector('.uniqueid').textContent;
        const slug = trackDataContainer.querySelector('.slug').textContent;
        const trackLink = trackDataContainer.querySelector('.tracklink').textContent;
        const trackName = trackDataContainer.querySelector('.trackname').textContent;

        const trackData = { uniqueID, slug, trackLink, trackName };
        createWaveSurfer(trackData);
      });

      function createWaveSurfer(config) {
        const { uniqueID, slug, trackLink, trackName } = config;

        const wavesurfer = WaveSurfer.create({
          container: `#${slug}`,
          progressColor: '#ffffff',
          waveColor: '#ffffff',
          barGap: 2,
          barWidth: 1,
          height: 65,
          cursorWidth: 0,
          url: trackLink,
          // Add more configuration options as needed
        });

        wavesurfer.on('decode', () => {
          const button = document.querySelector(`#${uniqueID}`);
          button.onclick = () => {
            globalPlayBtn.src =
              'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf7333f7a2a70dbd9b21_pause.png';

            document.getElementById('globaltracktitle').innerHTML = trackName;

            if (window.wavesurferBottom) {
              window.wavesurferBottom.destroy();
            }

            window.wavesurferBottom = WaveSurfer.create({
              container: '#globalwaveform',
              cursorColor: '#4facb3',
              progressColor: '#525252',
              waveColor: '#00eeff',
              barGap: 2,
              barWidth: 1,
              height: 65,
              // Add more configuration options as needed
            });

            window.wavesurferBottom.load(trackLink);
            window.wavesurferBottom.on('decode', () => {
              window.wavesurferBottom.play();
            });

            const globalButton = document.querySelector('#globalbutton');
            globalButton.onclick = () => {
              if (window.wavesurferBottom.isPlaying()) {
                globalPlayBtn.src =
                  'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf745c4247757e19b954_play-buttton.png';
                window.wavesurferBottom.pause();
              } else {
                globalPlayBtn.src =
                  'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf7333f7a2a70dbd9b21_pause.png';
                window.wavesurferBottom.play();
              }
            };

            // Current time & duration
            const formatTime = (seconds) => {
              const minutes = Math.floor(seconds / 60);
              const secondsRemainder = Math.round(seconds) % 60;
              return `${minutes}:${secondsRemainder.toString().padStart(2, '0')}`;
            };

            const timeEl = document.querySelector('#globaltime');
            const durationEl = document.querySelector('#globalduration');

            window.wavesurferBottom.on('decode', (duration) => {
              durationEl.textContent = formatTime(duration);
            });

            window.wavesurferBottom.on('timeupdate', (currentTime) => {
              timeEl.textContent = formatTime(currentTime);
            });
          };
        });

        return wavesurfer;
      }

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        renderedItems.forEach((item) => {
          const trackContainerElement = item.element;
          const trackDataContainer = trackContainerElement.querySelector('.hidden_div');

          const uniqueID = trackDataContainer.querySelector('.uniqueid').textContent;
          const slug = trackDataContainer.querySelector('.slug').textContent;
          const trackLink = trackDataContainer.querySelector('.tracklink').textContent;
          const trackName = trackDataContainer.querySelector('.trackname').textContent;

          const trackData = { uniqueID, slug, trackLink, trackName };
          createWaveSurfer(trackData);
        });
      });
      filterInstance.listInstance.on('switchpage', (targetPage) => {
        if (window.wavesurferBottom.isPlaying()) {
          globalPlayBtn.src =
            'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf745c4247757e19b954_play-buttton.png';
          window.wavesurferBottom.pause();
        } else {
          console.log('No audio playing');
          window.wavesurferBottom.pause();
        }
      });
    },
  ]);
</script>

```

Please let me know how it goes!

---

<div class="post-metadata">

**Author:** ![lincoln](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@lincoln](https://forum.finsweet.com/u/lincoln)\
**Post date:** [June 11, 2024, 1:12pm UTC](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930/20 "2024-06-11T13:12:36Z")

</div>

Wow Thanks a lot! it works like magic!

Just wondering if there’s a way for the ‘Global Player’ to not pause and disappear when changing pages or adding filters? If it’s complicated then I will just take it as is. Thanks a lot for your help!

[Next page](https://forum.finsweet.com/t/re-trigger-embed-code-after-pagination-loading-content/2930.md?page=2)