Materialize Modal closing instantly when attempting to load data from a URL

Tyler — Fri, 19 Jul 2019 20:48:06 +0000

This is my first time using Materialize... Always used bootstrap. Anyways, I am attempting to load data dynamically into a Materialize Modal.

My issue is that it only appears for about a second then closes. Any help would be appreciated. Not sure if this is something I'm doing wrong, and if a better way exists to do this.

Javascript:

    $(document).ready(function () {
        $('.modal').modal();
        $('.openEditor').on('click',function(){
            var dataURL = $(this).attr('data-href');
            $('#editorModal').load(dataURL);
            $('#editorModal').modal('open');
        });
    });

.. I have also tried the following ..

    $('.openEditor').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('#editorModal').load(dataURL,function(){
            $('#editorModal').modal('open'); 
        });
    });

both with the same result, the modal almost instantly closing.

Initialize Button (HTML)

    <a href='javascript:void(0);' data-target='editorModal' data-href='/ajax/editorModal.php' class='btn btn-small waves-effect waves-light orange modal-trigger openEditor'>Edit</a>

and the actual Modal

    <div id="editorModal" class="modal"></div>

editorModal.php

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        Body...
      </body>
    </html>

DEV Community: Tyler

Materialize Modal closing instantly when attempting to load data from a URL