Modal not hiding prior to clicking "Open Modal" button

[Mulciber]

I’m building the Image Gallery per the tutorial that Ben created for YouTube. Credit to @ben for videos.

Great tutorial but I’m a novice and obviously goofed something up.

For some reason, the “Add Gallery” modal appears at the top of the page as soon as the index.php loads.

Here’s the specific video I’m using: https://youtu.be/doLdrSj2cIs

Here’s what it looks like in my browser, along with a screen shot of the “App View” in Wappler.

I’ve also included a screenshot of what I believe to be the associated code.

Any suggestions?

Thank you!

Edit: added @ben for tutorial video credit

[George]

This is a special feature in Wappler design view, if you have the modal selected in App Structure - it also displays it in design view so you can work on it.

In the regular browser it is displayed when you call it.

[Mulciber]

Correct.
However it still appears in my browser even though I haven’t called it yet. I have a Firefox browser example opened that I overlayed on the screenshot of my Wappler interface where it shows how the “Add Gallery” modal is stuck at the top.

Somehow the form fields are showing when they shouldn’t.

I don’t know what I did wrong to make it not disappear in the browser.

[bpj]

Have you checked that ‘Auto Show’ is not checked in the Modal Properties?

[Mulciber]

Yes. Right now, Fade is the only property I have checked. All others are unchecked.

[bpj]

You mention that you have tried FireFox, have you tried anything else to rule out browser quirks?

[Mulciber]

So I just checked it and it appears to have the same behavior in Chrome and Safari.

Good idea though.

[bpj]

It’s a little hard to see form the screenshot but it looks like the form inputs are appearing on the page rather than in a modal. In your code, there are a few duplicate IDs (marked by the red x on the left and the red markers in the scroll bar on the right) for the inputs so maybe the background JS that hides/shows content isn’t identifying them properly. Try changing them to unique values and see if that helps.

[brad]

Can you post a link to your live page?

[Mulciber]

Live page:

http://mzimmermanphoto.com/admin/

[Mulciber]

Good eye.
I went and changed all of those IDs and the red X’s went away. However the form is still at the top of the page.

One thing I just noticed. My “Add Gallery” button doesn’t work. In other words, when I click on it. The modal doesn’t pop up at all.

There are three other buttons on the page with modal functionality that DO appear to work so I might try looking at those now and comparing.

Thank you!

[TomD]

One thing I just noticed. My “Add Gallery” button doesn’t work. In other words, when I click on it. The modal doesn’t pop up at all.

The button has this event attached: dmx-on:click="mdlGallery.show()" - but there is no modal with this name/id.

[Mulciber]

mdlGallery

Gotcha. That fixed the button. Modal opens now. Thank you!

[Mulciber]

I took a second look at this in the App structure panel and now I’m noticing that I have two forms:

serverconnectform1
and
frmGalleryAdd

The form that’s causing me problems appears to be serverconnectform1

Can I just delete it from the App Structure since my frmGalleryAdd seems to be the one that’s doing the work?

Just wondering.

Here’s a screenshot:

By the way, this differs a bit from my original FF browser screenshot in that I moved the farther down the code when I was attempting to fix it.

Edit: fixed the screenshot upload

[bpj]

I can’t see the screenshot. Can you try sending it again?

Don’t worry - it’s come through now

[bpj]

It looks like deleting would be fine. From the App Structure there aren’t any elements inside it that you would miss (they seem like duplicates of the correct form).

[Mulciber]

thank you so much @bpj. That worked!
And I confirmed that the “Add Gallery” button still works.

The Wappler community is a lifesaver.