Додаток для карт потребує оновлення для ініціалізації


9

Я спробував це питання на StackOverflow, але відповіді не отримав. Сподіваючись, що ви всі зможете допомогти.

Створення програми для веб-картографування у Javascript / Dojo:

Коли я завантажую додаток у браузері, він завантажує елементи 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);

Ось передня частина мого коду

<!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"/>
    <title> 
        Zoning Classifications
    </title> 
        <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/identify.js"></script>
        <script src="JS/toggles.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");

EDIT 2 Я повністю переписав додаток, розмістивши весь код (крім css) у головному файлі default.html. Я тестував по частинах, щоб переконатися, що він функціонує, як я хочу. Додавання коду перемикань - єдиний код, який його кидає та викликає додаткове оновлення.

Тому я зараз використовую dijit.TitlePane для утримання елементів, що випадають (галерея базових карт, шари, легенда). Однак з цим ви не можете змінити зовнішній вигляд і зробити їх зображеннями, що є моєю кінцевою метою.

Хто-небудь може запропонувати альтернативу, щоб я міг використовувати 3 різних зображення, щоб після натискання на зображення і випадаюче меню відкрилося з галереєю базових карт, списком шарів та легендою?


Я не бачу тут тега head / body, весь ваш код JavaScript завантажений у заголовок чи ні?
Glenn Plas

Вибачте. Виправлено це. Якось він відформатувався, коли я почав публікацію.
Крейг


спробував, але нічого. Я майже впевнений, що проблема полягає в моїх функціях dojo.fx.Toggler. Всі інші мої зовнішні файли js працюють бездоганно. Не впевнений, чому у мене виникають проблеми. Зв’язався з ESRI, і вони розглядають це питання, тому, сподіваюся, незабаром у мене буде резолюція.
Крейг

Ви спробували скористатися чимось на зразок інструментів для розробників Chrome, щоб побачити, які зовнішні файли фактично завантажуються? Це, принаймні, може сказати вам, наскільки далека ваша сторінка при завантаженні файлів та де помилки.
pecoanddeco

Відповіді:


7

Я б об'єднав усі ці dojo.addOnLoad () дзвінки. Я підозрюю, що щось не завантажується до виклику функції.

Скріпіть всі дзвінки dojo.addOnLoad з усіх ваших зовнішніх файлів javascript та з'єднайте їх в один дзвінок у вашому головному HTML-файлі. Поставте всі функції, які ви хочете запустити при завантаженні, в нову функцію внизу вашого javascript:

function init() {
  basemapToggle();
  layerToggle();
  whatEver();
}
dojo.addOnLoad(init);

Це забезпечить завантаження всього, перш ніж намагатися відключити будь-які функції.


5

Якщо ви хочете детальніше контролювати / перевіряти це глибше, поза тим, що будь-який фреймворк (jquery / dojo) повинен запустити це. Ви можете спробувати цю маленьку бібліотеку:

var stack = [],
    interval,
    loaded; // has window.onload fired?

function doPoll() {
  var notFound = [];
  for (var i=0; i<stack.length; i++) {
    if (document.getElementById(stack[i].id)) {
      stack[i].callback();
    } else {
      notFound.push(stack[i]);
    }
  }
  stack = notFound;
  if (notFound.length < 1 || loaded) {
    stopPolling();
  }
}

function startPolling() {
  if (interval) {return;}
  interval = setInterval(doPoll, 10);
}

function stopPolling() {
  if (!interval) {return;}
  clearInterval(interval);
  interval = null;
}

function onAvailable(id, callback) {
  stack.push({id:id, callback:callback});
  startPolling();
}

window.onload = function() {
  loaded = true;
  doPoll();
};

А потім використовуйте його так:

onAvailable('map', function () {
    // Only do stuff here once the map div is available (this always happens after the DOM is ready)
  ....
});

В основному те, що ви робите, - це сказати: чекайте, щоб зробити речі, поки ця діва не існує. Він поводиться інакше, ніж документ, вже "вистрілюючи" пізніше. так що для вас, ви б поставили код dojo.*тут.

Це чудовий тест, щоб побачити, чи трапляється вас покусати порядком завантаження якогось коду javascript. Я даю це тому, що це було корисно (для вирішення) подібних проблем.


Я намагався без будь-якої удачі включити вашу пропозицію до свого коду. Чи можете ви допомогти далі пояснити, куди це має піти в моєму безладді?
Крейг

помістіть верхній блок у окремий js-файл, включіть його до заголовка, а потім протестуйте на свій елемент dom, у якому ви дієте, у своєму коді: onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });Це не рішення безпосередньо, але це допоможе вам зрозуміти проблему з замовленням завантаження
Glenn Plas

3

Схоже, у вас виникла проблема із замовленням сценарію. Ваш toggles.js покладається на завантаження доджо. Однак у своєму html ви викликаєте toggles.js перед завантаженням javascript api ESRI, який завантажує dojo. Ось пропозиція щодо того, як ви могли б реорганізувати свої сценарії.

...
<style type="text/css"></style> 

    <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");
    </script>
    <script src="JS/layers.js"></script>
    <script src="JS/search.js"></script>
    <script src="JS/basemapgallery.js"></script>

    <script src="JS/identify.js"></script>
    <script src="JS/toggles.js"></script>
    ...

Я спробував переупорядкувати сценарії. Коли я розміщую зовнішні скрипти після сценарію API, завантажується тільки html (заголовок, логотип, підзаголовк). Тоді мені доведеться оновити, щоб завантажити JavaScript.
Крейг

Я відредагував свою останню відповідь. Спробуйте також поставити сценарій dojo.requires перед вашими зовнішніми файлами. Крім того, ви можете розглянути можливість переміщення зовнішніх скриптів до нижньої частини тіла html, щоб переконатися, що всі елементи DOM завантажуються до запуску цих скриптів.
Raykendo

обидва ваші відредаговані параметри призводять до однієї помилки, для оновлення js потрібно оновити.
Крейг
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.