Bootstrap modal requirement not defined for ArcGIS server map

Question

Please forgive me if it is very simple, but I can’t find a job to solve the problem.

I am trying to open an ESRI card in the bootstrap module. The first time it doesn’t load the map (in the console, I see that the “require not defined” error), but the second time it works fine. If I open the card in a separate window, it will also work every time.

My partial view is as follows:

@{ <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 that didn't help. Can someone please tell me what is going wrong here. Thanks!!

Answer 1

Finally, I solved the problem by adding js for ArcGIS on the main view instead of the partial view. Since RequireJS loads asynchronously, so other scripts / functions do not wait for it to fully load.

Another workaround is to bootstrap modal by configuring RequireJS to ensure that all necessary scripts are loaded initially. An example can be found here.

Answer 2

Please indicate your question. Where did you include require.js ? Try to include it before the script and check the console if require.js is enabled.