Zurb Foundation 6 - Reveal modal won't reopen after close

0
votes

I am using a reveal modal and populating it using AJAX, following the recommended methods in the Zurb Documentation to do so. The modal appears and populates OK, but if I then close the modal (e.g. click on background) and try to reopen I get a javascript error. I am trying to fix this so I can reopen the modal after close.

I have tried adding the option "data-reset-on-close" to the modal definition to ensure that the modal is reset when it closes, but this does not help.

Here is how the modal itself is defined.

<div class="reveal" id="edit_modal" data-reveal data-reset-on-close="true">

Here is the javascript I am using to trigger the modal (and load the javascript. The modal fires when I click on a <div> with ID "load_modal".

$("#load_modal").click(function() {
    var $modal = $('#edit_modal');
    $.ajax("/_modal_content/edit_modal")
      .done(function(resp){
        $modal.html(resp).foundation('open');
    });
});

The aim is to allow the user to close then reopen the modal as required. Right now it opens once without problem, but it will not open a second time.

On attempting to open the second time a javascript error is reported:

app.js:65 Uncaught TypeError: t.html(...).foundation is not a function
at Object.<anonymous> (app.js:65)
    at l (<anonymous>:3:6477)
    at Object.fireWith [as resolveWith] (<anonymous>:3:7245)
    at r (<anonymous>:4:10371)
    at XMLHttpRequest.<anonymous> (<anonymous>:4:16224)

Hopefully I'm doing something silly and there is an easy fix.

Would be most grateful for any guidance on what I should do to resolve.

1
zurb-foundationzurb-reveal

1 Answers