应用需要刷新初始化

在Javascript /道场创建Web地图应用：应用需要刷新初始化

当我加载它加载HTML元素浏览器应用程序，但随后停止处理。我必须刷新浏览器才能加载页面的其余部分和JavaScript。

我已经完成了整天的测试和调试工作，发现我的外部JS文件存在错误的位置（我是菜鸟）。修正了这个问题，并且该应用程序加载的很好......除了我的一个文件没有正确读取，或者完全没有。

当我将有问题的外部JS文件的内容移动到默认的主代码中时，它们包含的功能工作正常......但是地图需要再次刷新。

难倒。下面是导致我的问题的外部JS文件中的代码。我不明白为什么它是一个问题，因为这些功能不是外部的，所以功能正常。

任何帮助，非常感谢。

//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

被修改以显示其他代码。真正被这个难倒了。很想得到一些反馈。我试着将它移动到主文件中，重新设置函数的格式和所有这些东西的工作，除了他们需要刷新。我也在刷新一些信息。非常奇怪的行为。有什么好的方法来追踪此？

<!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;

编辑2

我已经完全重写该应用把所有的代码（除CSS）在主default.html中的文件。我一件一件地测试，以确保它的功能如何我想要的。添加切换代码是引发它并导致额外刷新的唯一代码。

因此，现在我使用dijit.TitlePane来保存下拉元素（底图库，图层，图例）。但是，借助于此，您无法改变图像的外观和风格，这是我的最终目标。

任何人都可以提出一个替代方案，以便我可以使用3个不同的图像，以便当您单击图像并下拉菜单时打开底图库，图层列表和图例？

编辑3

这可能会有助于显示我用来调用切换函数的代码：我怀疑这可能是在我的问题。

<!--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>

来源

2012-10-17 Craig

您是在HTML文件中测试它并在浏览器中像“file：//mypath/myfile.html”一样运行它吗？尝试在网络服务器上运行它 – gosukiwi

两者都有相同的行为。 – Craig

你确定你已经在这个外部js文件之前加载了dojo js。 – xdevel

此处作为一个解决方法是类似我做了一件：

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

上的应用程序的右侧的图标使dijit.TitlePanes擦拭进出。

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

该代码，这将是这样的：

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

随意看看我的源代码和复制的东西用于此效果可以在此页面上找到从中！如果我正确地理解了你，这正是你所需要的。

来源

2012-10-25 16:25:12 Martin

伟大的信息。我基本上使用wipeIn和wipeOut，所以我不知道它为什么不能正常工作？我会尽量整合你提供的信息。伟大的地图btw。 – Craig

很奇怪，你在这里提出的故事很难精确地指出你的问题是什么..但是既然你说'地图需要额外刷新'，那么我猜猜这可能是由于你打电话给你的东西需要。问题很可能在于，你是从一个dojo版本推出的旧版加载程序代码，它是AMD加载程序可操作的。

因为我真的没有运行任何esri组件，这是一个疯狂的猜测 - 但从我的pov它可能是值得一试。我确定谷歌地图有一个onload监听器 - 我怀疑esri会遵循这种行为。

尝试加载任何ESRI的模块，像这样的初始化之前在应用程序中的一切：

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"); 
});

至于影响您所渴望的推移，我个人倒利用dojo.animateProperty与dijit/TooltipDialog结合起来。

这个http://jsfiddle.net/seeds/a8BBm/2/展示了如何'破解'机制，在开场动画中留下可选效果。默认情况下，DropDownButton只是简单地淡入。

请参阅http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example了解弹出tooltipdialog的替代方法 - 即将dijit.popup连接到任何click/mouseover事件。

来源

2012-10-28 10:23:11 mschr

应用需要刷新初始化

回答

相关问题