Read data from collection items in JavaScript

Design help CMS
1

Hello fellows,

I have a collection list showing one row for each of a month. I add a collection list into the page, and when selecting the collection source, it shows the 30 rows, one for each day.

Now, I have the day of the month and I have a button. With a custom code embedded in the collection item, I am trying to read data specific to that collection item into a JavaScript (to pass the data to a pop-up modal screen).

The problem seems to be that the button is repeated for each collection and this is why it has one ID. So if I click on any of them buttons, I will get the same data of the very first row, not of the row I clicked its button.

A visit to the following links might explain the issue. I am not sure if there is something I can do, or it is currently not addressed in CMS collection features.

From the menu bar, click “Ramadan”, then “Iftar Service Schedule”.

Let me know what you think.

Here is my public share link: https://preview.webflow.com/preview/masjidlutwyche?utm_source=masjidlutwyche&preview=b418ad8869db99f25e1ef1c7dc3c5a60

1 Like
2

if you want unique data-attribute (or class) for each button - you must use the button as an embed code and bind some CMS field.

image
image986Ă—403 49.8 KB

If you want to get “data-hello” value by js this is the code:

var dataElement = $("button.iftar-button");

$(dataElement).each(function() {
    console.log($(this).data('hello'));
});

Anyway, no way to give you full answer (You talk about JS - but your page without any custom code -or- embed HTML) + Please add the modal library.

3

Adding a button for each row is not the problem. What I am trying to do, is getting the data from the row. For instance, if I click on the button on the third row, I need pass the number appearing in the “ID: Day” text field (which is the number appearing in green in each row) to the “BookDay” in the modal pop-up (the first Modal Rapper).

I added an embed code item and wrote the code for you to check.

It works fine for the first row. But it doesn’t for any other row.

4

I click on 3 i get by js 3 - than What you want to do with this value?

5

It is a DIV block named “Modal Rapper”. the first one on the page’s DOM. Just need to set the Display as “Flex” box.

I already set it as show for you.

6

https://preview.webflow.com/preview/masjidlutwyche?utm_source=masjidlutwyche&preview=b418ad8869db99f25e1ef1c7dc3c5a60&pageId=5c6a0d0495409809dc76953c

7

Again - by code its simple to solve this (to get the number “3”) when you click on 3 - but what is the end result? (You put this var inside function, view or and other trick)

image

This code store the number of the button by data-day. So on webflow use this idea:

image
image808Ă—205 7.34 KB

Inside your modal add text-element with id of “status”
image

Publish. Than by js every click will change this text inside #status (click on book1 to 1 and so on).

before body – copy—paste code

<script>
var dataElement = $("button.iftar-button");
var number = "";
$(dataElement).each(function () {
    var $this = $(this);
    $this.on("click", function () {
        number = $(this).data('day');
         $('#status').html(number);
    });
});
</script>
8

I am new to JavaScript, so I was trying the following code:

Code
Code1192Ă—320 23.9 KB

I am not sure though, why your code works but not mine.

With the code I wrote, I always get “30”.

9

Thank you Siton, that was really helpful. Truly appreciated.

10

What is “book”? Again you should bind the data. You won’t get always 30 if you bind the click to this element button.iftar-button (Every click the var change).

In your example you use “day of month” (same value) for every click.

Add live URL to solve this issue.