L'applicazione della mappa richiede l'aggiornamento per l'inizializzazione

Ho provato questa domanda su StackOverflow ma non ho avuto risposte. Spero che tutti possano essere in grado di aiutare.

Creazione di un'applicazione di mappatura Web in Javascript / Dojo:

Quando carico l'app in un browser, carica gli elementi html ma interrompe l'elaborazione. Devo aggiornare il browser per farlo caricare il resto della pagina e il javascript.

Ho fatto test e debug tutto il giorno e ho scoperto che i miei file JS esterni erano nel posto sbagliato (sono un novellino). È stato risolto il problema e l'app si carica alla grande ... TRANNE uno dei miei file non viene letto correttamente, o affatto.

Quando sposto il contenuto del file JS esterno in questione nel codice principale nel valore predefinito, le funzionalità che contengono funzionano perfettamente ... MA la mappa richiede di nuovo l'aggiornamento.

Perplesso. Di seguito è riportato il codice nel file JS esterno che sta causando il mio problema. Non riesco a capire perché sia un problema perché le funzioni funzionano come previsto quando non è esterno.

Qualsiasi aiuto è molto apprezzato.

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

Ecco la parte anteriore del mio codice

<!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 Ho completamente riscritto l'app inserendo tutto il codice (tranne i css) nel file default.html principale. Ho provato pezzo per pezzo per assicurarmi che funzionasse come volevo. L'aggiunta del codice di attivazione / disattivazione è l'unico codice che lo genera e provoca l'aggiornamento extra.

Quindi per ora sto usando dijit.TitlePane per contenere gli elementi a discesa (galleria di base, livelli, legenda). Tuttavia, con questo non puoi cambiare l'aspetto e renderli immagini, che è il mio obiettivo finale.

Qualcuno può suggerire un'alternativa in modo da poter utilizzare 3 immagini diverse in modo che quando si fa clic sull'immagine e il menu a discesa si apre tenendo la galleria della mappa di base, l'elenco dei livelli e la legenda?

arcgis-server arcgis-javascript-api

— brama
fonte

Non vedo un tag head / body qui, tutto il tuo codice javascript è stato caricato nell'intestazione o no?

— Glenn Plas,

Scusate. Aggiustato. In qualche modo è stato formattato quando ho iniziato il post.

— Craig,

onUpdate ()? resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/…

— Mapperz

provato, ma niente. Sono quasi certo che il problema riguardi le mie funzioni dojo.fx.Toggler. Tutti i miei altri file js esterni funzionano perfettamente. Non sono sicuro del motivo per cui sto avendo problemi. Contatta l'ESRI e stanno esaminando la situazione, quindi spero di avere presto una risoluzione.

— Craig,

Hai provato a utilizzare qualcosa come gli strumenti di sviluppo di Chrome per vedere quali file esterni vengono effettivamente caricati? Questo potrebbe almeno dirti fino a che punto arriva la tua pagina nel caricamento dei file e dove sono gli errori.

— pecoanddeco,

Risposte:

Vorrei consolidare tutte quelle chiamate dojo.addOnLoad (). Sospetto che qualcosa non venga caricato prima che venga chiamata una funzione.

Rimuovi tutte le chiamate dojo.addOnLoad da tutti i tuoi file javascript esterni e raggruppali in un'unica chiamata nel tuo file HTML principale. Inserisci tutte le funzioni che desideri attivare al caricamento in una nuova funzione nella parte inferiore del tuo JavaScript come questa:

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

Questo assicurerà che tutto sia stato caricato prima di provare a disattivare qualsiasi funzione.

— Mintx
fonte

Se vuoi controllare / testare questo più in profondità, al di fuori di ciò che qualsiasi framework (jquery / dojo) deve iniziare. Potresti provare questa piccola libreria:

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

E poi usalo in questo modo:

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

Fondamentalmente quello che fai è dire: aspetta di fare cose finché questo div non esiste. Si comporta in modo diverso rispetto a document. già, "sparando" un po 'più tardi. quindi per te, inseriresti il codice dojo.*qui.

È un ottimo test per vedere se ti capita di essere morso dall'ordine di caricamento di alcuni codici JavaScript. Sto dando questo perché è stato utile per (risolvere i problemi) risolvere questo tipo di problemi.

— Glenn Plas
fonte

Ho provato a incorporare il tuo suggerimento nel mio codice senza alcuna fortuna. Potete aiutarmi a spiegare ulteriormente dove dovrebbe andare nel mio casino esistente?

— Craig,

inserisci il blocco superiore in un file js separato, includilo nell'intestazione, quindi verifica gli elementi dom su cui agisci, nel tuo codice: onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });non è una soluzione direttamente ma ti aiuterà a capire il problema dell'ordine di caricamento

— Glenn Plas,

Sembra che tu abbia un problema con l'ordine degli script. Il tuo toggles.js si basa sul caricamento di dojo. Tuttavia, nel tuo html, stai chiamando toggles.js prima di caricare l'API javascript di ESRI, che carica dojo. Ecco un suggerimento su come è possibile riorganizzare gli script.

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

— raykendo
fonte

Ho provato a riordinare gli script. Quando inserisco gli script esterni dopo lo script API, viene caricato solo l'html (intestazione, logo, sottotitolo). Devo quindi aggiornare per caricare il javascript.

— Craig,

Ho modificato la mia ultima risposta. Prova anche a mettere lo script dojo.requires davanti ai tuoi file esterni. Inoltre, potresti considerare di spostare gli script esterni nella parte inferiore del corpo html, per assicurarti che tutti gli elementi DOM siano stati caricati prima dell'esecuzione di tali script.

— Raykendo,

entrambe le opzioni modificate producono lo stesso errore, è necessario aggiornare per caricare js.

— Craig,