Search code examples
jqueryhtmltemplatespyramidmako

How to update this jQuery modal to target selectors on a loaded template page

so my question today is about updating a jQuery modal so it can be called from a button in a loaded sub template.

In my case I'm using the 2kb PopEasy modal. In my Pyramid project I have the modal sitting on the top of the main template. The button which opens the modal is sitting on a sub page template that is loaded into the main template.

enter image description here

<body id="body-dashboard">
    <div id="modalrequest" class="modal">
        <section id="intro-request">
            <h1>The Modal</h1>

The generated markup on the loaded template page:

<td class="table-request-btn incoming-icon">
    <a href="#modalrequest" class="modalLink">Request Intro</a>
    <button class="modalLink" href="#modalrequest">Request Intro</button>
</td>



Now currently the way the Modal jQuery is setup, I'm not able to get it to work. #body-dashboard is the id of the main container in the main template. And .modalLink is the class on the button that is inside of the loaded template.

    // PopEasy for Request Intro
    var modalObj = $('#body-dashboard');
    //var modalObj = $('.modalLink');
    if (modalObj.length && modalObj.modal) {

        modalObj.modal({
            trigger: '.modalLink',
            olay:'div.overlay',
            modals:'div.modal',
            animationEffect: 'fadeIn',
            animationSpeed: 400,
            moveModalSpeed: 'slow',
            background: '000',
            opacity: 0.8,
            openOnLoad: false,
            docClose: true,
            closeByEscape: true,
            moveOnScroll: true,
            resizeWindow: true,
            close:'.closeBtn'
        });
    }



Now when I first encountered this problem I remembered an older issue I had with trying to target a dynamically created class.

This was the solution:

$("body").on("click", ".register_unselected", function(){});



I was able to use that technique to get my loaded template buttons to fire off an alert:

$("#body-dashboard").on("click", ".modalLink", function(){
    alert('this works!');
});



However I'm still having no luck trying to use the same thing on the modal

var modalObj = $('#body-dashboard .modalLink');
modalObj.modal({
    trigger: '#body-dashboard .modalLink',



How would you approach this problem? Do you need to see more code?

Solution

  • You have to call modal init function after the new template is loaded.