XF 2.2 How to run JS also in a popup?

Orit

Active member
Hi
I have page with some simple JS.
When opening in its own dedicated page- all works as it should.
But when attempting to open in a popup, the JS does not work.
Why is that?
Is there anything I can do?

I am still running XF 2.2

HTML:
<xf:button id="name-bt1" class="button--cta button">
    {{ phrase('contact') }}
</xf:button>
<div id="customContactText" style="display:none;">
    <div class="contact-buttons">
        <div id="contact-email" class="contact-button"></div>
        <div id="contact-name" class="contact-button"></div>
    </div>
</div>

JavaScript:
document.addEventListener('DOMContentLoaded', function() {
    var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';

    var myButton = document.getElementById('name-bt1');
    var container = document.getElementById('customContactText');
    //const contactEmail = '{$entity.contact_email} ';
    const contactEmail = 'test@example.com ';
    var emailDiv = document.getElementById('contact-email');
    console.log(contactEmail);

    if (myButton && container) {
        myButton.addEventListener(clickEvent, function(e) {
            e.preventDefault();
            e.stopPropagation();

            container.style.display = 'block';
            emailDiv.innerText = contactEmail;
            const parentButton = emailDiv.closest('.contact-button');
            if (parentButton) {
                parentButton.setAttribute('data-copy-text', contactEmail);
            }

            myButton.style.display = 'none';
        });
    }
});
 
What exactly does not work?
How is the JS called from the template?
The js does a simple thing:
When clicking the button it displays an email address (I tried a more complex script but it did not work, so checked a simple script which apparently does not work either...).

Both of the codes I added in my post are simply the page template:
First the HTML, then the js in <script> tags (<xf:js> made no difference).
 
Back
Top Bottom