# Script not trigger on Load more button

**URL:** <https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957>\
**Category:** Attributes\
**Created:** [September 25, 2023, 2:14pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957 "2023-09-25T14:14:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 25, 2023, 2:14pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/1 "2023-09-25T14:14:44Z")

</div>

I have a job collection, in collection list I have a field called skills and the data type of skills is string. In jobs page, I added this field and assigned an ID to it. In collection list, each item have a script that fetch the data using slug and then split it into an array and then append a div and add class to the div.  
The problem is when I clicked on load more button the script not run. But I can see the script in the inspect element. Please provide me solution.

```auto
<script>
	emptySlug = $(`#{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}`);
	var parentDiv = emptySlug.parent('.job-tag_wrapper');
  getSkills = emptySlug.text();
  nameArr = getSkills.split(' ');
  for (i = 0; i < nameArr.length; i++) {
    skill = nameArr[i];
    parentDiv.append($('<div/>',{
    	text: skill,
      class: 'job-tag'
    }));
  }
</script>

```

---

<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:** [September 25, 2023, 3:42pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/2 "2023-09-25T15:42:26Z")

</div>

hey @awaismahmood4! You can use the [CMS Load Callback](https://finsweet.com/attributes/api/cms-load) to run your code on the newly rendered items. If you share a link I can help you debug the issue further if you can’t set it up 💪

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 26, 2023, 5:08am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/3 "2023-09-26T05:08:27Z")

</div>

Hey @Support-Luis this is the preview link [Webflow - Youpal](https://preview.webflow.com/preview/youpal?utm_medium=preview_link&utm_source=designer&utm_content=youpal&preview=ae655fe5209d5527d5de1117056dfcce&pageId=64c3e85a18481b2557c429ca&workflow=preview)

---

<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:** [September 26, 2023, 9:34am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/4 "2023-09-26T09:34:50Z")

</div>

hey @awaismahmood4, we’ll need to remove the embeds from the collection items and create a function that goes through the items on the list.

The only modification to your code would be the dynamic slug value. You’ll need to add this as a hidden element, with a class, so we can create the emptySlug in another way.

This is the general idea for the code:

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

      function createJobTags() {
        //code that iterates through the elements to create the tags
      }

      const [filterInstance] = filterInstances;

      createJobTags();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        createJobTags();
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 26, 2023, 5:10pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/5 "2023-09-26T17:10:03Z")

</div>

Well I’m new in using finsweet so can you please modify my code according to the code you provide me

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 26, 2023, 5:15pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/6 "2023-09-26T17:15:18Z")

</div>

@Support-Luis Note: my site, there are almost 10,000 records to be loaded. So I want an optimal solution that didn’t effect the performance of the website

---

<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:** [September 27, 2023, 9:30am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/7 "2023-09-27T09:30:34Z")

</div>

> can you please modify my code

I’ll need you to add the slug as a text field to all the items, this field can be set to `display: none` but it needs a class.

> 10,000 records to be loaded

Large collections can always come with some challenges, I suggest you also add CMS Load to your setup with the speed boost enabled to give your site the best chance to perform as you expect

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 27, 2023, 10:19am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/8 "2023-09-27T10:19:44Z")

</div>

@Support-Luis Added a slug as a text field to all the items and the name of the class is item\_slug

---

<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:** [September 27, 2023, 10:44am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/9 "2023-09-27T10:44:35Z")

</div>

@awaismahmood4 I do not see the changes, can you also remove the embed from the items?

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 27, 2023, 11:11am UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/10 "2023-09-27T11:11:40Z")

</div>

@Support-Luis Removed

---

<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:** [September 27, 2023, 1:57pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/11 "2023-09-27T13:57:08Z")

</div>

hey @awaismahmood4! can you please test this code?

```js
<script>
  function processItems(items) {
    items.forEach(function (item) {
      var emptySlug = item.element.querySelector('.item_slug');

      if (emptySlug) {
        var parentDiv = item.element.querySelector('.job-tag_wrapper');

        if (parentDiv) {
          // Check if tags have already been added
          var existingTags = parentDiv.querySelectorAll('.job-tag');
          var getSkills = emptySlug.textContent;
          var nameArr = getSkills.split(' ');

          nameArr.forEach(function (skill) {
            // Check if the tag already exists
            var tagExists = Array.from(existingTags).some(function (existingTag) {
              return existingTag.textContent === skill;
            });

            if (!tagExists) {
              var newTag = document.createElement('div');
              newTag.textContent = skill;
              newTag.classList.add('job-tag');
              parentDiv.appendChild(newTag);
            }
          });
        } else {
          console.error('Parent div not found for item:', item);
        }
      }
    });
  }

  window.fsAttributes = window.fsAttributes || [];

  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        processItems(renderedItems);
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![awaismahmood4](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/awaismahmood4/32/1459_2.png) [@awaismahmood4](https://forum.finsweet.com/u/awaismahmood4)\
**Post date:** [September 27, 2023, 3:31pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/12 "2023-09-27T15:31:07Z")

</div>

@Support-Luis it’s not working. It displays slug.

---

<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:** [September 27, 2023, 4:26pm UTC](https://forum.finsweet.com/t/script-not-trigger-on-load-more-button/1957/13 "2023-09-27T16:26:09Z")

</div>

You’ll have to modify the Slug into the desired format. This can be done before this line `newTag.textContent = skill;` modifying the skill format