5

Veuillez me pardonner si c'est très simple, mais je ne suis pas en mesure de trouver le travail pour résoudre le problème. J'essaie d'ouvrir la carte ESRI dans un modal bootstrap. Sur la première fois il ne charge pas la carte (dans la console je vois l'erreur "require is not defined") mais la deuxième fois cela fonctionne très bien. Si j'ouvre la carte dans une fenêtre séparée, cela fonctionne aussi bien à chaque fois.Bootstrap modal require n'est pas défini pour la carte du serveur ArcGIS

Mon vue partielle ressemble suivant:

@{ 
    <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> 

J'ai essayé d'inclure require.js à mon avis partiel, mais il n'a pas aidé. Quelqu'un peut-il me dire ce qui ne va pas ici? Merci!!

+0

Une idée gars: O –

+1

On dirait que votre script 'require' vient après le script ci-dessus dans le code HTML. Vérifiez la source de la page et assurez-vous qu'elle vient avant ce code, ou enveloppez le code ci-dessus dans un événement onload (ou similaire) –

Répondre

3

Enfin, j'ai résolu le problème en ajoutant js pour ArcGIS dans la vue principale au lieu de la vue partielle. Puisque RequireJS est chargé de manière asynchrone, les autres scripts/fonctions n'attendent pas que le programme soit complètement chargé. Une autre solution consiste à charger bootstrap modal en configurant des configurations pour RequireJS pour s'assurer que tous les scripts requis sont chargés initialement. Exemple peut être trouvé here

1

Veuillez préciser votre question. Où avez-vous inclus require.js? Essayez de l'inclure avant le script et archivez la console si require.js est inclus.