0

I'm having Javascript problem. Created Javascript modal function, which use AJAX to get its content, and innerHTML function puts content into modal. Modal shows content with no problem, but Javascript do not work inside of it. When I inspect element it shows ... with all functions I need, but that doesn't work. I use twig template machine for rendering page and modal, so maybe it could cause that problem?

// index.php where modal shows up

echo $twig->render(...);

// Modal function

function openModal() {

    const request = new XMLHttpRequest();
    request.open('post', 'modalfile.php');
    request.onload = function () {
        document.querySelector('.modal-content').innerHTML = request.response;
    }

    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send();

    document.querySelector('.overflow').style.visibility = 'visible';
    document.querySelector('.modal').style.visibility = 'visible';
}

// modalfile.php

echo $twig->render(...);

If I am right and Javascript problem causes Twig - is it possible to solve that problem? Or maybe it is any other problem?

Centras
  • 1
  • 1

1 Answers1

-1

If I have not misunderstood, what you need is to bind your listener to the parent tag that is not part of the html rendered by ajax.

Look into jQuery on().

For me, I sometimes bind to the body tag like this (if necessary):

$('body').on('click', '.mySelector', myHandler);

This is just my humble solution. If you need more details check this out: Event binding on dynamically created elements?

xDiff
  • 691
  • 1
  • 5
  • 5