Base solution for your next web application
Open Closed

Best practice for modal JS scripts #6276


User avatar
0
exlnt created

I am running into some errors/issues with my implementation of Google maps APIs in my app. Specifically with modals. On index pages, the google maps functions all work just fine. But once I move it into a modal, I run into issues.

My questions on scripts used for modals are as follows:

Q1. What is the best place to use/insert a JS script or JS code that needs to execute before the user sees the modal? Q2. Where should JS event functions, like the one shown below, be placed? These need to fire after the modal is open and the user takes action on a select1.

$("#Select1").change(function () {
    Fill_Select2();
    });

I typically place these types of functions/events directly in the modal.cshtml file at the very end, after all the HTML. These events dont always work when I place them in the createModal.js script files.

Q3. For google maps I need to place the below script entry, before I add my JS code, to make the maps work. I have added these into my modal.cshtml.

<script src="https://maps.googleapis.com/maps/api/js?key=XX" async defer></script>

However this leads to warnings/errors that I have loaded google maps API too many times. This happens as the user will enter/exit the modal multiple times from my index pages. So where would be the best place to add this script?


5 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    @exlnt

    Those scripts are always loaded when a modal is opened. So, you need to find a way to load gmap script only once in your app.

  • User Avatar
    0
    exlnt created

    @ismcagdas - Can you respond to each of my questions and clarify the correct placement?

  • User Avatar
    0
    ismcagdas created
    Support Team

    @exlnt

    As I said, this is not related to AspNet Zero. Unfortunately we can't show you how to use an external tool in AspNet Zero.

    I haven't used Gmap before, otherwise I would like to help.

  • User Avatar
    0
    exlnt created

    I'm not asking you about a specific tool or plugins. I provided Google maps as an example. My question is a generic one. Where should I place scripts that are to be used in Modals before "show" event and after "show" event. As currently I'm getting different results from placing them in the model cshtml.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @exlnt

    All scripts in modal windows are executed when the modal is displayed. So, there is no place for before "show" event by default.