Troubleshooting a modal not opening

Wappler General Need Help
1

Hi everyone,

I have a button with a toggle action to display a dynamic modal that, when clicked, does nothing. I’ve created a test page with just a button and a modal, and everything works as expected.

Could I get suggestions on how to troubleshoot this piece? I’m guessing there is some js or jquery conflict and I’m not sure where to start.

Thanks!

2

Hi @Nathaniel
Please check the browser dev tools/console for errors or warnings.

3

Thanks @Teodor,

I can see this output on the ‘bad page’, I’m guessing the issue is with line 1, I’ll put in more time tomorrow:

DevTools failed to parse SourceMap: http://localhost/instance_1/lib/bootstrap/js/bootstrap.bundle.min.js.map
DevTools failed to parse SourceMap: http://localhost/instance_1/lib/feather-icons/feather.min.js.map
4

These are not related and not issues at all, just ignore them.
Maybe you can send a link to your page where we can check what’s wrong.

5

Hello,
you can do the following (if not alredy done)

  1. From the test page check which scripts are included and make sure that these are included too in you main page
  2. If you are working on a template where you applying Wappler’s components, remove all of the template’s scripts (leave any necessary like bootstrap etc) and check again.
    2a. If modal is working then start adding one by one to see which of the template’s scripts is causing the issue.
    2b. If still not working transfer the modal that is working (from the test page) back to the main page. Check if it works.

Hope it might help you.

Thank you

6

Thanks for the pointers @t11, I’ll follow-up with them shortly.
@Teodor, thank you too, and if you have time, I’ll gladly take your offer:

Thanks for any further insights!

7

It’s the following include on your page doing this, adding display:none style to the modal:

<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>

Please remove it, as it Bootstrap 4.4.1 has already been included on your page by Wappler at the bottom of the page and from what i see this file is only including Bootstrap on the page.
Removing it will fix the issue.

1 Like
8

Thanks a ton @Teodor, as always. Learning wappler would definitely not be the same without you and like-minded/skillset people!

1 Like
9

Would be nice to showcase your project in the Showcase section here, when it’s finished :slight_smile: Looks interesting.

10

I’ll definitely will do so when finished. At this pace, I anticipate another 3 weeks before being done, and I only foresee 2 instances where I’ll have to come back to this community for guidance.
This can be a good example of what Wappler can assist with doing even when one is not a technical person .

1 Like