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

#webdev #help #javascript #html

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>

Top comments (3)

Ryan Smith • Jul 19 '19 • Edited

I think the answer lies in the browser dev tools, I suggest the following steps to help debug.

Before and after clicking the button, inspect the modal element in the DOM. Does its content change and is it your page's content? If it is, check to see that the modal's open class is still present, as it could be a styling or JavaScript toggling issue.
If the content remains the same, check the network tab. Is a network request to /ajax/editorModal.php showing up on button click?
If /ajax/editorModal.php is showing up in the network tab, is the request successful? You can also click on that request to view the Preview or Response that is being returned to ensure it is correct.
You can also try to separate this code out into a codesandbox/jsfiddle to see if it can be reproduced under isolated conditions. If it can, it is the code written. If it works fine, other code in your app may be impacting it. You can also post the link here for others to do some testing of it.

Tyler • Jul 21 '19

Yes the network requests goes through, and the editorModal.php displays in the modal. The issue is, is that the modal won't even open half the time or it'll just close within 1-2 seconds.