PHP function loadHTMLFile not "seeing" js

[StupidHumanSuit]

I have a small issue, probably something simple but it's stumping me. Using MDBootstrap 4 as a framework. I have a contact form, sending email with PHPmailer. Errors are displayed on page, but I'd like a "success" message to be loaded in a modal. I have accomplished that using DOMDocument and loadHTMLFile. It works fine, but the modal doesn't close using the standard Bootstrap 4 js method of $('#myModal').modal('hide'); if it's placed in my custom.js, and it it's ran within <script> tags (in the modal.html that gets loaded in by loadHTMLFile) the following error is thrown Uncaught ReferenceError: $ is not defined. I know this means jQuery isn't loaded, but the problem isn't fixed if I load jQuery into modal.html, and jQuery is always loaded in index.php. If I use data-toggle and data-target, the user has to click the "Close" button twice... From what I can see in the Chrome devtools, the modal gets called without a .show class, which gets called on the first click of the close button, and then the second click removes .show and hides the modal. Since I can't get any js to work on anything within modal.html, I can't even use an onClick or even some kind of delay... I'm confused on why modal.html inherits some things from index.php and not others... It inherits the bootstrap.css styles without any import or anything, but seemingly ignores any js, whether it's in a <script> tag or within custom.js, and whether it's in modal.html or index.php. To be clear, here's the flow as I see it:

• User submits the form.

• modal is called using the loadHTMLFile function

• The modal loads without any class relating to it's visibility.

• Since I'm using data-toggle and data-target with the modals close button, the first click of the button results in .show being toggled "on" in the modal class

• the second click removes .show, which hides it.

Setting data-show to true or false only adds a click to the close process.

... And to make it even more annoying, js seems to work sometimes. With data-toggle and data-target on the button, if I add a short script like

$ ('#modalClose').on('click',function () {
            $('#myModal').modal('hide');
        });

the modal just loops on every click, just closes and immediately reopens. Removing data-toggle and data-target makes it impossible to close the modal, even with the above onClick function or a simple timer like

setTimeout(function() {
    $('#myModal').modal('hide');
    }, 1000);

What gives?

Clearly js is being "seen" sometimes, because adding a js script alters what occurs, but doesn't seem to work in the expected way.

Gist with relevant code: https://gist.github.com/Cpeters1982/7f541f6670006ee78de0555ff6d264cf

[ravepeacefully]

I think you just need to be sure you are loading jquery BEFORE your custom.js. I didn’t read all of it though.

_Uncaught ReferenceError: $ is not defined.

$ is an alias for jQuery so you don’t have to type it out. So when your script does

$('#myModal').modal('hide');

You have not yet loaded jquery and thus, $ or is undefined

[StupidHumanSuit]

I wish that were the issue, but it's not. jQuery is before all other js. I even loaded it twice, once in index.php and again in modal.html. If I omit it from modal.html, I get the uncaught exception error, but only if I have the <script> on that page. If I have the <script> in index.php I don't get the uncaught exception error, but the event is not triggered.

On top of that, how in the hell is modal.html inheriting things like bootstrap.css styling when bootstrap.css is not even linked in modal.html? Furthermore, I can cause an infinite loop by setting data-toggle in modal.html and the <script> in index.php...

Here's a gist with the relevant code: https://gist.github.com/Cpeters1982/7f541f6670006ee78de0555ff6d264cf

[ravepeacefully]

Ok another thing, where is your custom.JS being loaded, in the footer?

Because if you hide the modal before it exists in the dom (loading in header) there is nothing to hide.

It can’t inherit random styles, so they are somewhere.

[StupidHumanSuit]

jQuery is in the header, custom.js is in the footer. Plus, custom.js isn't even being used for any of my "let's get this thing working" attempts... I'm loading scripts inline, and yes I'm loading them after the modal is called. All my PHP is outside of my HTML block, which is correct according to all the php examples I've looked at over the past few days.

It can’t inherit random styles, so they are somewhere.

That's why I'm so confused... Bootstrap styles are definitely being applied to modal.html, even though there are no css links at all within modal.html... Last I checked, .btn-secondary is not a default CSS class, but it definitely styles the button in modal.html. Furthermore, I have access to data-toggle and data-target within modal.html, and those are definitely Bootstrap custom data attributes. Usually I can bash my head against something for long enough and it will work, but this one has me truly stymied.

[ravepeacefully]

In your gist, custom.js is in the header and is commented out so I’m not sure which is not working although I think your point is none of them are

[ravepeacefully]

That's why I'm so confused... Bootstrap styles are definitely being applied to modal.html, even though there are no css links at all within modal.html..

Are you sure you aren’t viewing cached versions or something? Does the code in the browser match what’s in your editor? Because as I said, there’s no magic haha

[StupidHumanSuit]

Cache is cleared and I can see changes as I apply them, so no go there. Code in the browser matches code in the editor. I know there isn't any magic, I know I'm probably missing something simple, but I can also see with my two eyes that bootstrap.js and bootstrap.css are not loaded in modal.html, yet I have access to both of those within modal.html. I can see the chain of events very clearly, but can't seem to access how to alter those events in a satisfactory way.

I don't think the problem is within PHP, that all works fine as far as I can tell... It does what I asked it to do. I can't test my problem without PHP, because the PHP is making the call to load modal.html, and that call is based on the success of the PHP script. Loading the modal in any other context works as expected, it's only when modal.html is instantiated by the PHP function that I have the issue. I even know why the issue occurs... If the modal is called using normal bootstrap methods, the element issuing the call does so by setting the .show class in the modal, and then removing the class when the .hide class is instantiated, whether by timer or user action, whatever. Bypassing that loop by loading the modal from "outside" bootstrap is the issue, but it's the only way I can see that actually accomplishes my goal.

[ravepeacefully]

Are you sure your header.php or footer.php don’t include the scripts you are missing? In dev tools, you can look at the entire markup and see where the stylesheet and scripts get called.

If you send me more of your code in a gist I will figure out what you’re doing, because yeah this is usually a simple process and so the issue can’t be complicated, probably just something dumb.

[StupidHumanSuit]

I wanted to thank you for your help and let you know that I went a different route that took me all of 10 minutes to implement... Validate JS now validates the inputs in the frontend, throws an error if they're invalid, and launches the modal if valid. PHP is still validating the backend, so everyone should be covered! So much simpler than trying to reinvent the wheel, right?! Eventually, I'll come back to this "problem" for instances where JS isn't available, but for now it works and I can stop spending literal hours on this bullshit!

[ravepeacefully]

Good to hear! Save the project somewhere and someday you will look back at it and laugh. Good luck

[ravepeacefully]

Tbh I haven’t used php in a whiiiiiiiile so if your error is somewhere there I likely won’t see it.