Bootstrap modal require is not defined for ArcGIS server map

Question

Please forgive me if this is very simple but I am not be able to find out the work around to solve the issue.

I am trying to open ESRI map in a bootstrap modal. On the first time it doesn't load the map (in console I see the error "require is not defined") but second time it works fine. If I open the map in a separate window then it also work well each time.

My partial view looks like following:

@{
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.21/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "dojo/parser",
          "dojo/domReady!"
        ],
        function (
          Map,
          parser
        )
        {
            parser.parse();

            map = new Map("map", {
                basemap: "streets",
                center: [5.79, 50.97], // lon, lat
                zoom: 16,
                slider: false
            });
        });
   </script>
}

<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h4>DrawProjectLocation</h4>
</div>
<div class="modal-body">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"  data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">      
        <div id="map" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">

        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
            <div id="editorDiv"></div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <span id="info" style="position:absolute; left:15px; bottom:15px; color:#000; z-index:100"></span>
    <button type="submit" class="btn btn-success" id="submitButton">Save</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

I tried to include require.js in my partial view but it didn't help. Can somebody please tell me whats going wrong here. Thanks!!

Answer 1

Finally I solved the issue by adding js for ArcGIS on main view instead of the partial view. Since RequireJS is being loaded asynchronously so other scripts / functions don't wait until its loaded completely.

Another workaround is to load bootstrap modal by setting up configurations for RequireJS to make sure all the required scripts are loaded initially. Example can be found here