Destroy and Recreate the Identify Event?

ChristinaGnadinger · ‎03-26-2013

I'm not sure if I have something in the wrong location or if it's a quirk that I cannot sort out.

I am trying to work on a mobile site using some of the dojo options. Right now I have a basic template with the Identify built in (from http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/find_popup.html). It fires off on this line below:

<span><div id="idButton" data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props='label:"Identify", onClick:function(toggle){mapReady();}'></div></span>

That works fine but if I select any of the dojo toolbar buttons or move off the page in anyway, when I return my click on the identify and the place it searches are completely off... always to the left. I am adding a couple of screenshots to this showing what it looks like. I clicked the same point in both cases... after I moved pages the click is off.

[ATTACH=CONFIG]22964[/ATTACH][ATTACH=CONFIG]22965[/ATTACH]

The full html code is below. The js code typically follow the link above, aside from pointing to my data instead of esri's.

If anyone has any guidance or suggestions I would greatly appreciate it. I have just started dabbling in javascript so I am not the most knowledgable of this language .. yet.

I was trying to see if there was a way to destroy the identify event any time you leave the map view ... then recreate it when you return and re-select the button, but so far I'm not having any luck. Is this possible or is there something else that will solve this?

Thanks in advance!
Christina

<!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=9">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- prevent cache - TEMPORARY -->
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="pragma" content="no-cache">
        
        <title>Because I Said So .. </title>
        
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/mobile/themes/iPhone/iPhone.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
        <link rel="stylesheet" href="style/default.css">
        
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"> </script>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="async:true"></script>
        <script type="text/javascript" src="js/default.js"></script>
        <script type="text/javascript" src="js/identify.js"></script>    
    </head>
    
    
    <body onload="resizeMap();" onorientationchange="orientationChanged();">
        <!-- OVERALL HEADER -->
        <div data-dojo-type="dojox.mobile.Heading" fixed="top">LWC Mobile Map Test
            <span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props='icon:"images/mainMenu.png", moveTo:"mainMenu"'></span>
        </div>
        
        <!-- MAIN MENU -->
        <div id="mainMenu" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true"> <!-- selected true makes this default screen -->
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Menu</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: 'search'">Search</li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: 'mapView'">Map View</li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: 'addLayers'">Add Layers</li>
            </ul>
        </div>
        
        <!-- MAIN SEARCH MENU -->
        <div id="search" data-dojo-type="dojox.mobile.View">
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Search Menu</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'searchByLocation'">Search by Location</li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'searchByFeature'">Search by Feature</li>
            </ul>
        </div>
        <!-- SEARCH BY LOCATION -->
        <div id="searchByLocation" data-dojo-type="dojox.mobile.View">
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Search by Location</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'search'"><i>Return to the Search Menu</i></li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">A New Search</li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">Some Type of Search</li>
            </ul>
        </div>    
        <!-- SEARCH BY FEATURE -->
        <div id="searchByFeature" data-dojo-type="dojox.mobile.View">
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Search by Feature</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'search'"><i>Return to the Search Menu</i></li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">More Stuff</li>
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">And Even More..</li>
            </ul>
        </div>
        
        <!-- MAP VIEW -->
        <div id="mapView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected:'true'" style="width:100%; height:100%;">
            <div id="quickTools" data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Quick Tools
                <span><div id="idButton" data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props='label:"Identify", onClick:function(toggle){mapReady();}'></div></span>
                <span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="moveTo: 'addLayers'">Toggle Map Layers</span>
            </div>
            <div id="map" style="width:100%; height:100%;">
            </div>
        </div>
        
        <div id="addLayers" data-dojo-type="dojox.mobile.View">
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Add Layers</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: 'mapView'">Return to the Map View</li>
                <li data-dojo-type="dojox.mobile.ListItem">Satellite Imagery
                    <span id="layer1" data-dojo-type="dojox.mobile.Switch" value="off"></span>
                </li>
                <li data-dojo-type="dojox.mobile.ListItem">LWC Facility Information
                    <span id="layer2" data-dojo-type="dojox.mobile.Switch" value="on"></span>
                </li>
            </ul>
        </div>
    </body>
</html>