0

I'm stumped - I've got two very similar pop up modals - one will close when I click the item from the dynamically generated list, the other will not - the second broken modal instead makes the clicked element disappear and leaves the modal open - the desired behavior would be to append that item to another location (this works) and close the modal.

the x button in the modal with data-close works, I've tried adding data-toggle="modalId" to the appended elements that make up the selection list in the modal, but to no avail - I even tried inline styling away the modal and overlay with display none but found that it prevented my screen from scrolling.

where the dynamically generated list goes:

<div id="indoor-unit-selection" class="product-selection cell small-11 medium-10 large-6 grid-x reveal" data-reveal aria-labelledby="indoor-unit-selection" aria-hidden="true" >
            <a class="close-button" data-close aria-label="Close modal">&#215;</a>
</div>

what triggers the modal appearance:

<div id="indoor-selection5" class="indoor-selection unselected indoor-selection-toggle cell small-10 medium-9 large-6  grid-x grid-padding-x align-center" data-toggle="indoor-unit-selection">
            <div class="sub-header2 small-8 medium-10">Select an indoor model</div>
</div>

JS: generates the modal list:

    let indoorUnitSelectionGeneration = function () {  // to do: need to tie min/max numbers to indoor ductless units
        for (let i = 0; i < indoorModelDataArray.length; i++) {
            let unit = indoorModelDataArray[i];
            if (unit.qtyOnHand) { // only display if its in stock
                $("#indoor-unit-selection").append(
                    '
                    <div data-toggle="indoor-unit-selection" class="grid-x grid-padding-x align-spaced align-middle text-center">
                        <div id="${unit.id}" class="indoor-unit-option cell small-11 medium-10 large-6 grid-x grid-padding-x align-spaced text-center">
                            <div class="indoor-product-description sub-header2 cell small-12">${unit.name}</div>
                            <img class="cell product-image small-5 medium-6" src="${unit.largeImagePath}">
                            <div class="product-information-container cell small-7 medium-6 grid-y grid-padding-y align-spaced text-center">
                                <div class="model-number">Model Number: ${unit.erpNumber}</div>
                                <div class="qtyOnHand">${unit.qtyOnHand} Available</div>
                                <a class="more-info" href="https://www.behler-young.com${unit.productDetailUrl}" target="_blank">More Information</a>
                            </div>
                        </div>
                    </div>
                    <hr id="hr${unit.id}"/>
                    '
                );
            };

        };
    };
    indoorUnitSelectionGeneration();

-note: i replaced my template tix for stack overflow formatting

this causes selected item to append to native body element:

    $(".indoor-unit-option").click(function(event){
        console.warn(event);
        showSelectedIndoorUnit(event);
        incrimentIndoorUnitCount();
    });

        let showSelectedIndoorUnit = function (event) {
            $(`#indoor-selection${indoorUnitPlaceHolderId}`).append(event.currentTarget);
            $(`#indoor-selection${indoorUnitPlaceHolderId}`).addClass('selected').removeClass('indoor-unit-option');
        };
DerekDH
  • 1
  • 3
  • Off topic, but you'd be better to put your html as actual html, rather than storing it in a string in your javascript. – Lee Taylor Aug 23 '19 at 16:49
  • Hi, please use the `zurb-foundation` tag. `foundation` is something else (by Apple). –  Aug 23 '19 at 16:49
  • More information - I also wanted to show less items if say their stock was dropped to 0 by being added to selected, so I tried doing ``` $("#indoor-unit-selection").innerHTML = '×'; $("#indoor-unit-selection").empty() ``` to empty them out/refresh the results and keep my x button - the x button never comes back and then none of the items are clickable... I'm almost positive it has something to do with the non-native elements not connecting with the zurb framework code but don't know how to link them up. – DerekDH Aug 23 '19 at 20:05
  • and if i re-append the list underneath the original, the subsequent items don't register the click event... but the originals do.. – DerekDH Aug 23 '19 at 20:15
  • $(document).on('click', ".indoor-unit-option", function(event){...} fixed the non-responsiveness of newly appended elements thanks @https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method – DerekDH Aug 23 '19 at 20:43

0 Answers0