L'application nécessite un rafraîchissement pour initialiser

Création d'une application de cartographie Web en Javascript/Dojo:L'application nécessite un rafraîchissement pour initialiser

Quand je charge l'application dans un navigateur, il charge les éléments html mais arrête le traitement. Je dois actualiser le navigateur pour l'obtenir pour charger le reste de la page et le javascript.

J'ai fait des tests et du débogage toute la journée et j'ai compris que j'avais mes fichiers JS externes au mauvais endroit (je suis une recrue). Correction de cela et l'application charge beaucoup ... SAUF un de mes fichiers ne se lit pas correctement, ou pas du tout.

Lorsque je déplace le contenu du fichier JS externe en question vers le code principal dans la valeur par défaut, la fonctionnalité qu'ils contiennent fonctionne correctement ... MAIS la carte nécessite l'actualisation à nouveau.

Trempé. Ci-dessous le code dans le fichier JS externe qui provoque mon problème. Je ne peux pas comprendre pourquoi c'est un problème parce que les fonctions fonctionnent comme prévu quand ce n'est pas externe.

Toute aide est grandement appréciée.

//Toggles 
function basemapToggle() { 
       basemaptoggler = new dojo.fx.Toggler({ 
        node: "basemaptoggle", 
        showFunc : dojo.fx.wipeIn, 
        showDuration: 1000, 
        hideDuration: 1000, 
        hideFunc : dojo.fx.wipeOut 
       }) 
      } 
      dojo.addOnLoad(basemapToggle); 

      function layerToggle() { 
       layertoggler = new dojo.fx.Toggler({ 
        node: "layertoggle", 
        showFunc : dojo.fx.wipeIn, 
        showDuration: 750, 
        hideDuration: 750, 
        hideFunc : dojo.fx.wipeOut 
       }) 
      } 
      dojo.addOnLoad(layerToggle); 

      function legendToggle() { 
       legendtoggler = new dojo.fx.Toggler({ 
        node: "legendtoggle", 
        showFunc : dojo.fx.wipeIn, 
        hideFunc : dojo.fx.wipeOut 
       }) 
      } 
      dojo.addOnLoad(legendToggle);

EDIT

Edité pour afficher du code supplémentaire. Vraiment perplexe par cela. J'adorerais recevoir des commentaires. J'ai essayé de le déplacer dans le fichier principal, en reformatant les fonctions et toutes ces choses fonctionnent, sauf qu'elles nécessitent l'actualisation. Je perds aussi quelques informations sur un rafraîchissement. Comportement très étrange. Tout bon moyen de suivre cela?

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 

     <link rel="Stylesheet" href="ZoningClassifications.css" /> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> 
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css"> 
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css"> 
    <style type="text/css"> 
    </style> 

     <script src="JS/layers.js"></script> 
     <script src="JS/search.js"></script> 
     <script src="JS/basemapgallery.js"></script> 
     <script src="JS/toggles.js"></script> 
     <script src="JS/identify.js"></script> 
     <script type="text/javascript"> 
     var djConfig = { 
     parseOnLoad: true 
     }; 
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> 
    <script type="text/javascript"> 

      dojo.require("dijit.dijit"); // optimize: load dijit layer 
     dojo.require("dijit.layout.BorderContainer"); 
     dojo.require("dijit.layout.ContentPane"); 
     dojo.require("esri.map"); 
     dojo.require("dijit.TitlePane"); 
     dojo.require("esri.dijit.BasemapGallery"); 
     dojo.require("esri.arcgis.utils"); 
      dojo.require("esri.tasks.locator"); 
      dojo.require("esri.dijit.Legend"); 
      dojo.require("esri.dijit.Popup"); 
      dojo.require("dijit.form.Button"); 
      dojo.require("dojo.fx"); 
      dojo.require("dijit.Dialog"); 
      dojo.require("dojo.ready"); 
     dojo.require("dijit.TooltipDialog"); 
      dojo.require("dojox.grid.DataGrid"); 
     dojo.require("dojo.data.ItemFileReadStore"); 
     dojo.require("esri.tasks.find"); 

     var map, locator, layer, visible = []; 
      var legendLayers = []; 
      var resizeTimer; 
      var identifyTask,identifyParams; 
      var findTask, findParams; 
      var basemaptoggler = null; 
      var layertoggler = null; 
      var legendtoggler = null; 
      var findTaskParcel, findParamsParcel; 
     // var gridParcel, storeParcel;

EDIT 2

J'ai complètement réécrit l'application de placer tout le code (à l'exception du css) dans le fichier principal default.html. J'ai testé pièce par pièce pour m'assurer qu'il fonctionne comme je le souhaite. Ajouter le code bascule est le seul code qui le lance et provoque l'actualisation supplémentaire.

Donc pour l'instant j'utilise dijit.TitlePane pour contenir les éléments déroulants (galerie de fond de carte, calques, légende). Cependant, avec cela, vous ne pouvez pas changer l'aspect et la convivialité pour en faire des images, ce qui est mon objectif final.

Quelqu'un peut-il suggérer une alternative afin que je puisse utiliser 3 images différentes de sorte que lorsque vous cliquez sur l'image et le menu déroulant ouvre maintenant la galerie de fond de carte, la liste des couches et la légende?

EDIT 3

Il vous aidera sans doute à montrer le code que j'utilise pour appeler les fonctions de bascule: Je pense que cela pourrait être là où mes questions sont.

<!--Legend--> 
    <div id="subheader"> 
    <div style="position:absolute; right:60px; top:10px; z-Index:98;"> 
      <div id="legendbutton"> 
     <button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend"> 
      <img src="images/Legend.png" /> 
       <script type="dojo/method" event="onClick"> 
        legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide'](); 
       </script> 
     </button> 
       <div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none"> 
        <div id="legendDiv"></div> 
       </div> 
      </div> 
<!--Layer Toggle--> 
      <div id="layerbutton"> 
       <button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers"> 
        <img src="images/layers.png"/> 
         <script type="dojo/method" event="onClick"> 
          layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide'](); 
         </script> 
       </button> 
        <div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none"> 
         <span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();' 
         </span> 
        </div> 
      </div> 
<!--Basemap Gallery--> 
      <div id="basemapbutton"> 
       <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap"> 
        <img src="images/imgBaseMap.png"/> 
         <script type="dojo/method" event="onClick"> 

         </script> 
       </button> 
        <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;"> 
         <span id="basemapGallery"> 
         </span> 
        </div> 
      </div>

Source

2012-10-17 Craig

Est-ce que vous testez ceci dans un fichier HTML et l'exécutez comme "file: //mypath/myfile.html" dans le navigateur? Essayez de l'exécuter dans un serveur Web – gosukiwi

Même comportement dans les deux. – Craig

avez-vous vérifié que vous avez chargé dojo js avant ce fichier js externe. – xdevel

En tant que solution est ici quelque chose de semblable, je l'ai fait:

http://www.martindueren.de/paperwriting/

Les icônes sur le côté droit de l'application font dijit.TitlePanes lingette et sortir.L'effet utilisé pour cela se trouve sur cette page:

http://dojotoolkit.org/documentation/tutorials/1.8/effects/

Le code pour ce serait quelque chose comme ceci:

<button id="slideAwayButton">Slide block away</button> 
<button id="slideBackButton">Slide block back</button> 

<div id="slideTarget" class="red-block slide"> 
    A red block 
</div> 
<script> 
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) { 
     var slideAwayButton = dom.byId("slideAwayButton"), 
      slideBackButton = dom.byId("slideBackButton"), 
      slideTarget = dom.byId("slideTarget"); 

     on(slideAwayButton, "click", function(evt){ 
      fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play(); 
     }); 
     on(slideBackButton, "click", function(evt){ 
      fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play(); 
     }); 
    }); 
</script>

Ne hésitez pas à regarder mon code source et copier des trucs à partir de cela! Si je vous ai bien compris, c'est exactement ce dont vous avez besoin.

Source

2012-10-25 16:25:12 Martin

Grande info. Je suis essentiellement en utilisant le wipeIn et wipeOut donc je ne sais pas pourquoi il ne fonctionne pas correctement? Je vais essayer d'incorporer l'information que vous avez donnée. Grande carte btw. – Craig

Tout l'histoire que vous avez mis en place ici, c'est difficile à cerner, quel est votre problème .. Mais puisque vous dites «carte besoin d'un rafraîchissement supplémentaire», alors je suppose que cela pourrait être dû au flux de choses que vous appelez exiger pour. Le problème peut très bien être, que vous déployez le code de chargeur hérité d'une version de dojo qui est le chargeur AMD capeable.

Depuis que je n'ai pas vraiment exécuté tous les composants esri avant, c'est une sorte de conjecture sauvage - mais de mon point de vue, il pourrait valoir un coup. Je suis sûr que google maps a un écouteur en charge - et je soupçonne Esri de suivre ce comportement.

Essayez tout initialiser dans votre application avant le chargement des modules, Esri comme tel:

dojo.addOnLoad(function() { 
    basemapToggle(); 
    layerToggle(); 
    legendToggle(); 
    dojo.require("esri.map"); 
    dojo.require("esri.dijit.BasemapGallery"); 
    dojo.require("esri.arcgis.utils"); 
    dojo.require("esri.tasks.locator"); 
    dojo.require("esri.dijit.Legend"); 
    dojo.require("esri.dijit.Popup"); 
    dojo.require("esri.tasks.find"); 
});

Comme il va les effets que vous êtes à la recherche de, je serais personnellement faire usage de dojo.animateProperty et le combiner avec dijit/TooltipDialog.

Ce http://jsfiddle.net/seeds/a8BBm/2/ montre comment 'hacker' le onShow mechanizm, laissant des effets optionnels possibles dans l'animation d'ouverture. Par défaut, DropDownButton apparaît simplement en fondu.

Voir http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example pour d'autres manières de faire apparaître le tooltipdialog, c'est-à-dire de connecter dijit.popup à n'importe quel événement clic/mouseover.

Source

2012-10-28 10:23:11 mschr

L'application nécessite un rafraîchissement pour initialiser

Répondre

Questions connexes