Issue closing plainmodal after closed and re-opened

Thank you for sharing your jquery-plainmodal plugin. I'm having an issue with closing my jquery-plainmodal window from either a button or the X in the modal-header and both use class="plainmodal-close". Closing works for both options the first time the modal is opened but once closed and reopened only clicking out of the modal and onto the overlay will close the modal. My modal content (.net partial page form ) is loaded via jquery.load() with a callback function to AJAX to POST my form data. Could this be affecting the close because of how the modal is opened? I'm also using bootstrap modal as my outer modal and jquery-plainmodal as my inner modal. `

// Loads PartialView (this.href) into $('#myModalContent')
$('#CaseTypeTbl').on('click', '.LoadModal', function (event) {
    // plainModal
    $('#myPlainModalContent').load(this.href, function () {
        bindResultsCaseTypeForm(this);
        $('#myPlainModal').plainModal('open');
    });
    return false;
});

// Ajax refresh of the DatTable triggered from the Controller Json response
function bindResultsCaseTypeForm(dialog) {
    $('form', dialog).submit(function () {
        var url = this.action;
        $.ajax({
            url: url,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myPlainModal').plainModal('close');
                    // remove the contents of the '#myModalContent' div
                    $('#myPlainModalContent').empty();
                    // Update the item we just edited
                    if (result.name == 'caseType') {
                        $('#replacetargetCaseType').load(result.url);
                    }
                }
            }
        });
        return false;
    });
};

` Thank you for your assistance. -Andy

Hi @AndrewStewartSoCal, thank you for the report.

Sorry, I couldn't understand your comment perfectly because my English is poor. Do you mean this?

An element as close button that has a plainmodal-close class doesn't work after the modal window is opened twice.

Also, where is the plainmodal-close element? I guessed the structure. (Those might not be div.)

<div id="myPlainModal">
  <div id="myPlainModalContent">

    <div class="plainmodal-close">X</div>

    <!-- other contents ... -->

  </div>
</div>

Anseki, Thank you! Here is my modal div element that resides in the outer modal window. The plainmodal-close elements are part of the form that is loaded into

via the javascript. Here the form that has the plainmodal-close elemets.

I'll try moving my modal-header with the plainmodal-close from the loaded form and into the static portion of the modal definition to see if that has any affect.

Thanks again, -Andy

Alright, so I tested with the plainmodal-close element in the static portion of my modal div and was able to close without issue, every time even after re-opening the modal window. I just need to cleanup my UI presentation now.

Thanks again, -Andy

As expected, the .plainmodal-close element seems to be located in the #myPlainModalContent. Therefore it was already removed by $('#myPlainModalContent').empty(); when the form was submitted. And a new loaded element is not the .plainmodal-close element above. The .empty() method removes the event handlers, then the click event also does not work now.

See document: http://api.jquery.com/empty/

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

Two ways to solve:

Don't remove that, i.e. move that outside the node that will be removed.
Reuse that, i.e. get that before that is removed, and insert that into original place after the contents is loaded.

Another way to solve: Since jQuery-plainModal only binds the close method to .plainmodal-close elements, you can do it easily by yourself.

    $('#myPlainModalContent').load(this.href, function () {
        // ...
        var modal = $('#myPlainModal');
        // the button has `close-modal` class
        $('.close-modal', this).click(function() { modal.plainModal('close'); });
        modal.plainModal('open');

Thanks for your insight @anseki. I tried using your suggested code above but was unable to get it to work. I still had the original issue of not being able to close after close and re-open. I do have it working by leaving the header and footer with the close elements static and only insert(.load()) my form data with submit button into the $('#myPlainModalContent'). The UI isn't as clean but it does work every time.

Thank you again for sharing this project and helping me work out my issue. -Andy

Sorry..., my English is poor. Do you mean that the issue was solved? or, the modal window can not close yet?

And, when you tried the third way, did you add close-modal (not plainmodal-close) class to the close button?

No reply came, and I close this issue.

Sorry, I forgot to get back to you. All is good, problem solved. Thank you!

anseki / jquery-plainmodal

Issue closing plainmodal after closed and re-opened #11