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

StackOverflow https://stackoverflow.com/questions/17367805

Frage

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?

War es hilfreich?

Lösung

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top