Only one custom module triggers pop up modal content

SOLVE
ahemilee
Member

I am working on a Pricing page with custom pricing modules that gives you the option to include a pop up box where you can insert an image or a table. Each module should allow for different modal content. The problem is only one module seems to be triggering the pop up box when clicked on and that modal content overrides all of the other modules. 

 

https://www.antennahouse.com/testingmodals?hs_preview=WFtzvCpQ-33535024768

Example: The first pricing module under "Sample Product" has an image inserted that is a horizontal green table for the modal content, but if you click on "View Add-ons", a different image displays. The purple table image you see is inserted in a different module (last module at the bottom of the page under section "AHRTS"). If you can click on the buttons labeled "View Add-ons" or "Compare Versions" in any of the modules, you'll see the same purple table which is not what we want.

 

Is there any way to allow for different images to be inserted as the modal content for the other modules on the page?

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

@ahemilee ,

 

Ideally you would want a custom module with a repeater group, and the repeated set fields that would be button and modal content/settings. 

 

You could also use the same module multiple times if you have a static module with only one set of fields. 

Either way, the issue with repeating javascript actions is scoping. Like if you have multiple sliders on a page and each has prev/next button. If you don't scope correctly then the javascript function that slides the slider on prev/next button click, per slider, would slide all of the sliders.

something like this:

 

 

<div class="scope-wrapper">
    <div class="slider"></div>
    <button></button>
</div>

 

 

 

var button = $("button");

button.on('click touch', function() {
    var par = $(this).parent(".scope-wrapper"),
        sli = par.find(".slider");
    
    run_function(sli);
});

 

 

The button that is clicked you go up the dom tree to find a parent with a class ".scope-wrapper", then go back down to find a child with the class ".slider". Multiple instances of this code will work independently because it's based on the parent of the button clicked.

View solution in original post

0 Upvotes
5 Replies 5
sharonlicari
Community Manager

Hey @ahemilee 

 

Thank you for sharing this information, I'll tag a few experts could share their knowledge with you.

 

Hey @Jsum @FabianRichter @Kevin-C any advice you can give to @ahemilee?

 

Thank you 
Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
Kevin-C
Recognized Expert

Thanks @sharonlicari 

 

Hey @ahemilee 

 

In the inspector type "btn", and see what you get:

Screeenshot - 2020-08-13 at 8.57.13 AM.png

You've got a scope issue. The "btn" variable is being overwritten with each module until the last one because it is global, which is why we see it contents. To fix this you create a closure with an IIFE. Just wrap you module js in a document ready function:

 

   $("document").ready(function() {
      // Module JS here
  });

 

 

ahemilee
Member

Thank you Kevin, the global module is the main issue. I tried your solution, but it prevented the pop up from opening when clicked on.

 

I'm not familiar with javascript, so I'm resorting to creating new modules in order to insert different images for each pop up. 

0 Upvotes
Jsum
Solution
Key Advisor

@ahemilee ,

 

Ideally you would want a custom module with a repeater group, and the repeated set fields that would be button and modal content/settings. 

 

You could also use the same module multiple times if you have a static module with only one set of fields. 

Either way, the issue with repeating javascript actions is scoping. Like if you have multiple sliders on a page and each has prev/next button. If you don't scope correctly then the javascript function that slides the slider on prev/next button click, per slider, would slide all of the sliders.

something like this:

 

 

<div class="scope-wrapper">
    <div class="slider"></div>
    <button></button>
</div>

 

 

 

var button = $("button");

button.on('click touch', function() {
    var par = $(this).parent(".scope-wrapper"),
        sli = par.find(".slider");
    
    run_function(sli);
});

 

 

The button that is clicked you go up the dom tree to find a parent with a class ".scope-wrapper", then go back down to find a child with the class ".slider". Multiple instances of this code will work independently because it's based on the parent of the button clicked.

View solution in original post

0 Upvotes
ahemilee
Member

@Jsum Thank you!