Question

I create a user control in ASP.NET (.ascx) that combines ArcGIS Map, and several basic control in ArcGIS Web ADF (GoToLocation, ScaleBar, and ESRI Toolbar).
The GoToLocation control is not working properly because it’s javascript did not find textbox used for display X and Y coordinates and also it did not find “Zoom To” and “Pan To” button.

Then I try to fix that with this jquery+javascript :

UPDATE May 21, 2012 : I try to add GoToLocation1.Refresh or GoToLocation1.RaisePostBackEvent after fixGTL (see code below), but it’s seems the control not refreshed or reloaded.

$(document).ready(function () {
            fixGTL();
        <% 
            //GoToLocation1.RaisePostBackEvent(""); 
            GoToLocation1.Refresh(); 
        %>
        });

        function fixGTL() {
            var txtX = $('#[id$="_GoToLocationX"]');
            var idX = txtX.attr("id");
            //alert(idX);
            var idX_2 = idX.split('_');
            if (idX_2.length = 6) {
                txtX.attr('id', idX_2[0] + '_' + idX_2[2] + '_' + idX_2[3] + '_' + idX_2[4] + '_' + idX_2[5]);
            }

            var txtY = $('#[id$="_GoToLocationY"]');
            var idY = txtY.attr("id");
            //alert(idY);
            var idY_2 = idY.split('_');
            if (idY_2.length = 6) {
                txtY.attr('id', idY_2[0] + '_' + idY_2[2] + '_' + idY_2[3] + '_' + idY_2[4] + '_' + idY_2[5]);
            }

            var btnZoomTo = $('#[id$="_ZoomTo"]');
            var idZoomTo = btnZoomTo.attr("id");
            var idZoomTo_2 = idZoomTo.split('_');
            if (idZoomTo_2.length = 6) {
                btnZoomTo.attr('id', idZoomTo_2[0] + '_' + idZoomTo_2[2] + '_' + idZoomTo_2[3] + '_' + idZoomTo_2[4] + '_' + idZoomTo_2[5]);
            }

            var btnPanTo = $('#[id$="_PanTo"]');
            var idPanTo = btnPanTo.attr("id");
            var idPanTo_2 = idPanTo.split('_');
            if (idPanTo_2.length = 6) {
                btnPanTo.attr('id', idPanTo_2[0] + '_' + idPanTo_2[2] + '_' + idPanTo_2[3] + '_' + idPanTo_2[4] + '_' + idPanTo_2[5]);
            }
        }

The problem :
My script is successfully change textbox’s ID and button’s ID, but GoToLocation’s javascript still can’t find the textbox and button.

This is a piece of javascript code taken from Firebug (sorry, I can’t post pic because I am a newbie here) :

ESRI.ADF.UI.GoToLocation.callBaseMethod(this, 'initialize');
(1) var id = this.get_id();
    var splitId = id.split('_');
    this._displayX = $get(splitId[0] + '_' + id + "_GoToLocationX");
    this._displayY = $get(splitId[0] + '_' + id + "_GoToLocationY");
(2) this._zoomToButton = $get(splitId[0] + '_' + id + "_ZoomTo");
    this._panToButton = $get(splitId[0] + '_' + id + "_PanTo");
(3) if (this._zoomToButton != null) {
        $addHandler(this._zoomToButton, "mousedown", Function.createDelegate(this, this._zoomTo));
        $addHandler(this._zoomToButton, "keydown", Function.createDelegate(this, this._zoomKeyPress));
} 

The strange part is, when I debug with firebug on breakpoint no.1, it can find the textbox and button (_displayX, _displayY, _zoomToButton and _panToButton is not null). But if I debug from breakpoint number 2 or 3 or I load it directly (not debug in firebug) the script failed to find textbox and button.

HTML :
This is HTML that I took from firebug.

<div id="pnlGoTo" class="ui-dialog-content ui-widget-content">
<span id="ctl00_MapBasic1_GoToLocation1" style="overflow:hidden;display:inline-block;height:75px;width:380px;">
<table cellspacing="2" cellpadding="2" style="position:relative;margin:0px 0px 0px 0px;top:0px;left:0px;">
<tbody>
<tr>
<td width="381px" align="left">
<table cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>
X:
<input id="ctl00_ctl00_MapBasic1_GoToLocation1_GoToLocationX" type="text" style="height:15px;font-size:small;width:157px;" name="ctl00$MapBasic1$ctl00_MapBasic1_GoToLocation1_GoToLocationX">
</td>
<td>
Y:
<input id="ctl00_ctl00_MapBasic1_GoToLocation1_GoToLocationY" type="text" style="height:15px;font-size:small;width:157px;" name="ctl00$MapBasic1$ctl00_MapBasic1_GoToLocation1_GoToLocationY">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="right">
<input id="ctl00_ctl00_MapBasic1_GoToLocation1_ZoomTo" type="button" style="height:25px;width:70px;font-size:small;" value="Zoom To" name="ctl00$MapBasic1$ctl00_MapBasic1_GoToLocation1_ZoomTo">
<input id="ctl00_ctl00_MapBasic1_GoToLocation1_PanTo" type="button" style="height:25px;width:70px;font-size:small;" value="Pan To" name="ctl00$MapBasic1$ctl00_MapBasic1_GoToLocation1_PanTo">
</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>

The Goal :

The goal is to get _displayX, _displayY, _zoomToButton and _panToButton not getting null.

I just need to find how to reload/refresh the control because it’s name has been changed from my javascript.

Thanks

Answer 1

Finally I found solution for my problem.
I use this Go To Location control
created by: ESRI

Everything works fine.