no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

Hello, I hope this is a simple problem I am overlooking...

I am trying to create a combo box with hardcoded values. What I get is a text box that does not have an arrow or drop-down functionality (the auto complete does function).

Here is what I have in the HTML (based on examples from ESRI):

            <select id="boroughSelect" dojotype="dijit.form.ComboBox"
                autoComplete="true"
                forceValidOption="false"
                onchange="executeMenuQuery(this)">

                <option>Manhattan</option>
                <option>Brooklyn</option>
                <option>Bronx</option>
                <option>Staten Island</option>
                <option>Queens</option>

            </select>

This seems like it should be pretty easy, can someone tell me what I am missing?
Thanks, Jason F.

KellyHutchins · ‎08-06-2012

I pasted your code into a sample app and it worked for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>          <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />         <!--The viewport meta tag is used to improve the presentation and behavior         of the samples on iOS devices-->         <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"         />         <title>Topographic Map</title>         <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">         <style>             html, body {                 height: 100%;                 width: 100%;                 margin: 0;                 padding: 0;             }             .esriScalebar {                 padding: 20px 20px;             }             #map {                 padding:0;             }         </style>         <script type="text/javascript">             var djConfig = {                 parseOnLoad: true             };         </script>         <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>         <script type="text/javascript">             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             dojo.require("esri.map");             dojo.require("dijit.form.ComboBox");               var map;              function init() {                 var initExtent = new esri.geometry.Extent({                     "xmin": -122.46,                     "ymin": 37.73,                     "xmax": -122.36,                     "ymax": 37.77,                     "spatialReference": {                         "wkid": 4326                     }                 });                 map = new esri.Map("map", {                     extent: esri.geometry.geographicToWebMercator(initExtent)                 });                 //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                     var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");                 map.addLayer(basemap);                  dojo.connect(map, 'onLoad', function (theMap) {                     //resize the map when the browser resizes                     dojo.connect(dijit.byId('map'), 'resize', map, map.resize);                 });             }              dojo.addOnLoad(init);         </script>     </head>          <body class="claro">         <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"         style="width: 100%; height: 100%; margin: 0;">             <div id='lp' dojotype='dijit.layout.ContentPane' region='left' style='width:300px;'>                 <select id="boroughSelect" dojotype="dijit.form.ComboBox" autoComplete="true"                 forceValidOption="false" onchange="executeMenuQuery(this)">                     <option>Manhattan</option>                     <option>Brooklyn</option>                     <option>Bronx</option>                     <option>Staten Island</option>                     <option>Queens</option>                 </select>             </div>             <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>         </div>     </body>  </html>

View solution in original post

KellyHutchins · ‎08-06-2012

I pasted your code into a sample app and it worked for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>          <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />         <!--The viewport meta tag is used to improve the presentation and behavior         of the samples on iOS devices-->         <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"         />         <title>Topographic Map</title>         <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">         <style>             html, body {                 height: 100%;                 width: 100%;                 margin: 0;                 padding: 0;             }             .esriScalebar {                 padding: 20px 20px;             }             #map {                 padding:0;             }         </style>         <script type="text/javascript">             var djConfig = {                 parseOnLoad: true             };         </script>         <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>         <script type="text/javascript">             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             dojo.require("esri.map");             dojo.require("dijit.form.ComboBox");               var map;              function init() {                 var initExtent = new esri.geometry.Extent({                     "xmin": -122.46,                     "ymin": 37.73,                     "xmax": -122.36,                     "ymax": 37.77,                     "spatialReference": {                         "wkid": 4326                     }                 });                 map = new esri.Map("map", {                     extent: esri.geometry.geographicToWebMercator(initExtent)                 });                 //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                     var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");                 map.addLayer(basemap);                  dojo.connect(map, 'onLoad', function (theMap) {                     //resize the map when the browser resizes                     dojo.connect(dijit.byId('map'), 'resize', map, map.resize);                 });             }              dojo.addOnLoad(init);         </script>     </head>          <body class="claro">         <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"         style="width: 100%; height: 100%; margin: 0;">             <div id='lp' dojotype='dijit.layout.ContentPane' region='left' style='width:300px;'>                 <select id="boroughSelect" dojotype="dijit.form.ComboBox" autoComplete="true"                 forceValidOption="false" onchange="executeMenuQuery(this)">                     <option>Manhattan</option>                     <option>Brooklyn</option>                     <option>Bronx</option>                     <option>Staten Island</option>                     <option>Queens</option>                 </select>             </div>             <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>         </div>     </body>  </html>

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

Thanks for the quick reply.
Well, mine is not working. There is too much code to copy the whole thing, but I see there are multiple apis referenced in the script I am working on (it is written in an MVC 3 framework in Visual Studio).

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/image/resources/image.css">

Could this be the source of the problem?

KellyHutchins · ‎08-06-2012

Try updating your stylesheets to match the version of the api. For example it looks like you have some stylesheets pointing to 2.8 and others to 1.5 and 1.6. Are you using claro or tundra in your app? If you are using claro you can remove the line that references tundra.css and vice-versa.

If you are using claro try replacing the current references in your app with the code below. If you aren't using the latest version (3.1) replace it with the version number you are using.

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/image/resources/image.css">

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

Thanks again.

I replaced the api calls with your code. Now the combo box does have an arrow, but the list of options does not drop down (clicking the arrow doesn't do anything). The auto complete still works.

If I remove 'dojotype="dijit.form.ComboBox' from the HTML, I get a drop down list of options, but w/o any auto complete functionality, which is needed for this task.

Any more ideas? Thanks, Jason

KellyHutchins · ‎08-06-2012

Do you include the dojo parser? Look for something in your app like this:

        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>

Setting parseOnLoad to true runs the dojo parser when the page loads.

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

yes, those exact lines are in the file right before the api links...

the existing app has other functionality that works (navigation bar, a simple layer list w/ checkboxes)....although it is written in an MVC 3 platform, the general layout of the code is pretty similar to a typical javascript/css/html framework (so far)

KellyHutchins · ‎08-06-2012

Are there any errors in the debugging console (Firebug or Chrome Dev Tools) when you run the app?

The easiest way to debug/test this might be to pull the relevant lines from your app and make a simple test page to see if you can repro the problem.

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

Thanks for your patience...

I am not very familiar with Firebug..but when I check 'console/errors'..there are several errors of this type:

"NetworkError: 407 Proxy Authenticatio...xy filter is denied. ) - http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"

..there is one of these errors for every api call (the ones you listed above), and several more for many of the dojo/dijit tools, including the Combo Box...

I notice that the HTML for the ComboBox lists autocomplete as 'off' although it is 'on' in the code:

<div class="dijitReset dijitInputField dijitInputContainer">
<input id="boroughSelect" class="dijitReset dijitInputInner" type="text" waistate="haspopup-true,autocomplete-list" wairole="textbox" dojoattachpoint="textbox,focusNode" dojoattachevent="onkeypress:_onKeyPress,compositionend" autocomplete="off" role="textbox" aria-haspopup="true" aria-autocomplete="list" aria-invalid="false" tabindex="0" value="Manhattan" aria-owns="boroughSelect_popup">
</div>

I have tried to reproduce the problem, but like you did above, I did not have an issue when creating a drop down combobox in a small separate file..

deleted-user-ugCMpXci8bn5 · ‎08-06-2012

I also noticed that i lose the infoWindow functionality when I switched to v3.1 api. IS there perhaps some new syntax in the new API for infoWindows?