Script not trigger on Load more button

Attributes
1

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.

<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>
2

hey @awaismahmood4! You can use the CMS Load Callback 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 :muscle:

3

Hey @Support-Luis this is the preview link Webflow - Youpal

4

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:

<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>
5

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

6

@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

7

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

8

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

9

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

10

@Support-Luis Removed

11

hey @awaismahmood4! can you please test this code?

<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>
12

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

13

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