Help with adding and calling a unique ID for CTA in a repeater

[dsanchezRW]

Hi everyone,

So, I have a repeater module and inside of it I added a cta that has a modal option. But the pop-up from the modal is not unique and all of the cta's are displaying the content from the latest repeater and not the one for their own.

I added the ability to add an ID to the button:
{% if item.single_cta_group.choose_type_of_cta == "modal_cta" %}
<div class="cta-grp" >
<div class="row-fluid-wrapper">
<div class="row-fluid">
<div data-id="{{ item.single_cta_group.add_modal_id_here ~ loop.index }}" class="modal-cta left-col">
<a class="cta_button">{{ item.single_cta_group.add_modal_cta_name_here }}</a>
</div>
</div>
</div>
</div>
{% endif %}

I'm calling back to the ID in the popup:
{% if item.cta_group.single_cta_group.choose_type_of_cta == "modal_cta" %}
<div id="{{ item.single_cta_group.add_modal_id_here ~ loop.index }}" class="custom-model-main popup">
<div class="custom-model-inner">
<div class="close-button">×</div>
<div class="custom-model-wrap">
<div class="pop-up-content-wrap">
<p>{{ item.cta_group.single_cta_group.add_popup_text }}</p>
</div>
</div>

Here's the jquery for the popup:

$(document).ready( function() {
$( ".modal-cta" ).on('click', function(event) {
// var tab_no = $(this).attr('data-tab');
// console.log(tab_no);
$(".custom-model-main.popup").addClass('model-open');
$("body").addClass('overflow-hidden');
return false;
});
$(".close-button").click(function(){
$(".custom-model-main").removeClass('model-open');
$("body").removeClass('overflow-hidden');
});
});
</div>
</div>

{% endif %}

1) Are my ID's placed properly in the html?
2) How do I add the ID in the jquery (I tried a few methods but was unsuccessful)?

Here's a preview of the page:
https://www.readyworks.com/solutions-showcase?hs_preview=TJEYaMSz-156543603333

Also, I'm aware that the filtering is not functioning properly. I haven't added the values in the backend.

[erindigsmusic · Accepted solution]

You're so close! Give this a try:

$(".modal-cta").on("click", function() {
  let target = $(this).attr("data-id");
  $(`#${target}`).addClass("model-open");
});

Instead of relying on HubL variables in the jQuery, you can use your data-id attribute to target the ID of the modal you want to open. Shout out to @Jaycee_Lewis because they were on the right track with their response above. 

[dsanchezRW]

Yes! That worked, Thank you!

[dsanchezRW]

Hi Jayce, I haven't resolved it. 

when I add it to the jquery, I do something like:
$(  "#{{ item.single_cta_group.add_modal_id_here ~ loop.index }}".modal-cta" ).on('click', function(event) {

and tried a few other methods but I just end up breaking the button. The issue has to be here but I'm thinking that my implementation is wrong ... (obviously) ... 😅.

[Jaycee_Lewis]

Hey, @dsanchezRW 👋 Were you able to get this resolved?

If not, have you tried to modify your jQuery to read the data-id attribute of the clicked CTA and use it to open the matching modal by ID? Making sure each CTA and modal pair has a unique data-id and id respectively. And adjusting the jQuery click event to target and display the modal based on these IDs.

Best,

Jaycee

PS — Thanks for including your code sample and a link. That's always helpful 🙌

[dsanchezRW]

So I got a step closer, my ID's weren't showing up in the html because my id path was wrong. I updated it to be id="{{ item.cta_group.single_cta_group.add_modal_id_here }}"
If you refresh or clear the chache then you'll see the difference.

As for the jquery (which is not my strong suit), I have it looking like this:
$(document).ready( function() {
$( "#{{ item.cta_group.single_cta_group.add_modal_id_here }}" ).on('click', function(event) {
// var tab_no = $(this).attr('data-tab');
// console.log(tab_no);
$(".custom-model-main.popup").addClass('model-open');
$("body").addClass('overflow-hidden');
return false;
});
$(".close-button").click(function(){
$(".custom-model-main").removeClass('model-open');
$("body").removeClass('overflow-hidden');
});
});

But now I have a warning that reads: HubL in your CSS or JavaScript won’t be parsed, except for the module_asset_url function

What am I missing?