मैप एप्लिकेशन को शुरू में ताज़ा करने की आवश्यकता है

9

मैं StackOverflow पर इस सवाल की कोशिश की, लेकिन कोई जवाब नहीं मिला। आप सभी से मदद की उम्मीद कर सकते हैं।

जावास्क्रिप्ट / Dojo में एक वेब मैपिंग एप्लिकेशन बनाना:

जब मैं ब्राउज़र में ऐप लोड करता हूं तो यह html एलिमेंट्स को लोड करता है लेकिन फिर प्रोसेसिंग बंद कर देता है। मुझे शेष पृष्ठ और जावास्क्रिप्ट को लोड करने के लिए इसे प्राप्त करने के लिए ब्राउज़र को ताज़ा करना होगा।

मैंने पूरे दिन परीक्षण और डिबगिंग किया है और मुझे पता चला है कि मेरी जेएस फाइलें गलत स्थान पर हैं (मैं एक धोखेबाज़ हूं)। निश्चित है कि और एप्लिकेशन बहुत अच्छा लोड करता है ... मेरी फ़ाइलों में से एक को सही ढंग से या बिल्कुल भी नहीं पढ़ा जा रहा है।

जब मैं बाह्य जेएस फ़ाइल की सामग्री को डिफ़ॉल्ट रूप से मुख्य कोड के प्रश्न में स्थानांतरित करता हूं, तो जो कार्यक्षमता होती है, वह ठीक काम करती है ... लेकिन मानचित्र को फिर से ताज़ा करने की आवश्यकता होती है।

स्टम्प्ड। नीचे बाहरी जेएस फ़ाइल में कोड है जो मेरे मुद्दे का कारण बन रहा है। मैं यह पता नहीं लगा सकता कि यह एक समस्या क्यों है क्योंकि जब यह बाहरी नहीं होता है तो फ़ंक्शन अपेक्षित रूप से कार्य करता है।

कोई भी मदद बहुत ही सराहनीय होगी।

//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 मैंने मुख्य डिफ़ॉल्ट.html फ़ाइल में सभी कोड (सीएसएस को छोड़कर) रखने वाले ऐप को पूरी तरह से फिर से लिखा है। मैंने यह सुनिश्चित करने के लिए कि यह कैसे काम करता है, टुकड़ा द्वारा टुकड़ा का परीक्षण किया। टॉगल कोड जोड़ना एकमात्र कोड है जो इसे फेंकता है और अतिरिक्त ताज़ा का कारण बनता है।

तो अब के लिए मैं dijit.TitlePane का उपयोग ड्रॉप डाउन एलिमेंट्स (बेसमैप गैलरी, लेयर्स, लेजेंड) को रखने के लिए कर रहा हूँ। हालाँकि इसके साथ आप उनके चित्रों को बनाने के लिए उनके स्वरूप को नहीं बदल सकते हैं, जो मेरा अंतिम लक्ष्य है।

क्या कोई विकल्प का सुझाव दे सकता है ताकि मैं 3 अलग-अलग छवियों का उपयोग कर सकूं ताकि जब आप छवि पर क्लिक करें और नीचे ड्रॉप डाउन मेनू खुल जाए तो बेसमैप गैलरी, परत सूची और किंवदंती को पकड़े?

arcgis-server  arcgis-javascript-api 
— क्रेग
स्रोत
मुझे यहाँ एक हेड / बॉडी टैग नहीं दिख रहा है, क्या आपके सभी जावास्क्रिप्ट कोड हेडर में लोड हैं या नहीं?
— ग्लेन प्लास
माफ़ करना। ठीक कर दिया। जब मैंने पोस्ट शुरू किया तो किसी तरह इसका प्रारूप तैयार हो गया।
— क्रेग
— Mapperz
यह कोशिश की, लेकिन कुछ भी नहीं। मैं लगभग निश्चित है कि समस्या मेरे dojo.fx.Toggler कार्यों के साथ है। मेरी सभी अन्य बाहरी js फाइलें पूरी तरह से काम करती हैं। मुझे यकीन नहीं है कि मुझे क्यों परेशानी हो रही है। ईएसआरआई से संपर्क किया और वे इसे देख रहे हैं, इसलिए उम्मीद है कि मेरा जल्द ही एक संकल्प होगा।
— क्रेग
क्या आपने क्रोम डेवलपर टूल की तरह कुछ का उपयोग करके यह देखने की कोशिश की है कि वास्तव में कौन सी बाहरी फाइलें लोड हो रही हैं? यह कम से कम आपको बता सकता है कि फ़ाइलों को लोड करने में आपका पेज कितना दूर हो रहा है और कोई त्रुटि कहां है।
— pecoanddeco 14

जवाबों:

7

मैं उन सभी dojo.addOnLoad () कॉल को समेकित करूंगा। मुझे संदेह है कि किसी फ़ंक्शन को कॉल करने से पहले कुछ लोड नहीं हो रहा है।

अपनी सभी बाहरी जावास्क्रिप्ट फ़ाइलों से सभी dojo.addOnLoad कॉलों को स्ट्रिप करें और उन्हें अपनी मुख्य HTML फ़ाइल में एक कॉल में बंडल करें। इस तरह से अपने जावास्क्रिप्ट के नीचे एक नए फ़ंक्शन में लोड करने के लिए इच्छित सभी कार्यों को रखें:

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

यह सुनिश्चित करेगा कि किसी भी कार्य को बंद करने की कोशिश करने से पहले सब कुछ लोड हो गया है।

— Mintx
स्रोत
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.*यहां कोड डालेंगे।

यह देखने के लिए एक महान परीक्षा है कि क्या आप कुछ जावास्क्रिप्ट कोड के लोड क्रम से काटते हैं। मैं यह दे रहा हूं क्योंकि यह इस तरह की समस्याओं का हल (निवारण) करने के लिए अच्छा है।

— ग्लेन प्लास
स्रोत
मैंने आपके सुझाव को बिना किसी भाग्य के अपने कोड में शामिल करने की कोशिश की है। क्या आप आगे यह समझाने में मदद कर सकते हैं कि यह मेरी मौजूदा गड़बड़ी में कहाँ जाना चाहिए?
— क्रेग
एक अलग js फ़ाइल में शीर्ष ब्लॉक रखो, इसे हेडर में शामिल करें, फिर अपने उन प्रमुख तत्वों के लिए परीक्षण करें जिन पर आप कार्य करते हैं, आपके कोड में: onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });यह सीधे समाधान नहीं है, लेकिन यह आपकी लोड ऑर्डर समस्या को समझने में मदद करेगा
— ग्लेन प्लास
3

ऐसा लगता है कि आप स्क्रिप्ट ऑर्डर जारी कर रहे हैं। आपका toggles.js लोड हो रहा है dojo पर निर्भर करता है। हालाँकि, आपके html में, आप ESRI की जावास्क्रिप्ट एप को लोड करने से पहले toggles.js पर कॉल कर रहे हैं, जो डोजो को लोड करता है। यहां एक सुझाव दिया गया है कि आप अपनी स्क्रिप्ट को कैसे पुनर्गठित कर सकते हैं।

...
<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
स्रोत
मैंने स्क्रिप्ट को फिर से क्रम देने की कोशिश की। जब मैं बाहरी स्क्रिप्ट को एपीआई स्क्रिप्ट के बाद रखता हूं, तो केवल html लोड (हेडर, लोगो, सबहेडर)। फिर मुझे लोड करने के लिए जावास्क्रिप्ट प्राप्त करने के लिए ताज़ा करना होगा।
— क्रेग
मैंने अपना अंतिम उत्तर संपादित किया। अपनी बाहरी फ़ाइलों के आगे dojo.requires स्क्रिप्ट डालने का भी प्रयास करें। इसके अलावा, आप अपनी बाहरी लिपियों को html बॉडी के निचले भाग में ले जाने पर विचार कर सकते हैं, यह सुनिश्चित करने के लिए कि उन स्क्रिप्ट को चलाने से पहले सभी DOM तत्वों को लोड किया गया है।
— रेकीडेनो
आपके दोनों संपादित विकल्प एक ही त्रुटि के परिणामस्वरूप, js को लोड करने के लिए ताज़ा करने की आवश्यकता है।
— क्रेग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.