More accessible dropdowns menus?

[Kingy]

Hey everyone, I'm trying to make my drop down menu's more accessible for my Opera-based interface for use on TV.Most of you Opera users are probably aware that the browser has accessibility navigation like Ctrl + direction to go to next clickable link and things like that. Well to make a drop down menu actually drop down you can only really press enter, then space which is a pain in the rear just to see a couple of options.I've seen some examples online of regular drop downs that can be done in CSS which is nice and easy. Problem is the values are dynamically loaded once it's changed, so those kind of menu's don't offer huge functionality as it relies on form elements.So I was just wondering if anyones got any suggestions that maybe involve more javascript as opposed to CSS solutions.An idea I had was maybe there could be a function over the dropdown so that onfocus or mouseover or something, it can maybe call enter+space key or something?

[justsomeguy]

Look through this:http://www.dynamicdrive.com/dynamicindex1/index.htmlAlso check the CSS-Based link on top, I use the Anylink CSS menu for my company's site.

[Kingy]

Ah right so these can be adapted easily for generated data then.I'll see if I can adapt these as the data is generated in jsp and isn't so much as navigate to some other page like .html.Thanks for the reference, but just in case I'll leave a little snippet of what I'm trying to adapt in case someone else thinks of other examples I can look at.

<form method="post" action="DeviceServlet" name="DeviceConfig"><table width="100%" border="0" cellpadding="0" cellspacing="1">	<tbody>		<tr>			<td class="tableLeft">Category</td>			<td class="tableRight">           	  <select name="category" onchange="submit();">					<c:forEach var="category" items="${DeviceConfigBean.categories}">                        <c:choose>                       	 	<c:when test="${category == DeviceConfigBean.selCategory}">                              <option value="${category}" selected="selected" onclick="submit();">${category}</option>                   		  </c:when>                       		 <c:otherwise>                               <option value="${category}"  onclick="submit();">${category}</option>                       		 </c:otherwise>                        </c:choose>					</c:forEach>			  </select>            </td>		</tr>

[edit]I've been testing out that anylink drop down which looks beautiful I have to say but it loses the functionality which I need. It retrieves the right options but when I click to submit the stuff I want generated just comes out with a blank no matter what I choose. O_o

           	  <a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Category</a>                                                       <div id="anylinkmenu1" class="anylinkcss">		<c:forEach var="category" items="${DeviceConfigBean.categories}">                        <c:choose>                       	 	<c:when test="${category == DeviceConfigBean.selCategory}">                           			<a href="#">${category}</a>   	     						 </c:when>                       		 <c:otherwise>                             			<a href="#">${category}</a>                     		 </c:otherwise>                        </c:choose>					</c:forEach>                    </div>

[edit 2]Well it may be possible to generate what I want however it can be real anal to get around it so I got a nice beautiful possible solution.Ideally though it would be far easier if I could somehow 'generate a keycode' so I don't have to spend such a long time remaking a function I know already works.To be honest sending the 'space' keycode over the drop down when I press 'enter' on the remote would be the easiest. But if I'm correct these javascript keycodes are only for detecting and responding to presses we make right?It would be great if I could just make the application press the extra key it self over the element.I imagined something like the following script will suffice with maybe a getelementbyid so it doesn't interfere with the whole page.

 function keydown(evt){ 	if (!evt) 	evt = event;        if(evt.keyCode == 13)        {         return evt.keyCode == 32 ;		  }			}

[justsomeguy]

You can have your key handler execute a function to show the next level of a menu if there's a menu selected and a certain menu item has focus, it would be some additions to the menu code though to track that stuff.

[Kingy]

Execute a function to show the next level of menu? You mean like assign an ID with a function that just goes to it or something to that effect?I think I know what you mean but surely that won't make the menu drop, but just jump straight to the option?I can use direction keys to scroll up and down the options once it's highlighted but the menu doesn't drop down.I basically just used this simple little bit: function dropdown(){document.getElementById('catmenu').focus();}And a small part is this.

<select name="category" id="category" onfocus="dropdown()">					<c:forEach var="category" items="${DeviceConfigBean.categories}">                        <c:choose>                       	 	<c:when test="${category == DeviceConfigBean.selCategory}">                                <option value="${category}" selected="selected" id="catmenu" onclick="submit();">${category}</option>           		 </c:when>                       		 <c:otherwise>                                <option value="${category}" onclick="submit();" id="catmenu2">${category}</option>                       		 </c:otherwise>                        </c:choose>					</c:forEach>				</select>

But it doesn't appear to do anything..I suspect because the options in the drop down are generated so what it does is just focus back on the main drop down box.

[justsomeguy]

It would be better if you could post a link to an example online, or at least show the HTML output instead of the JSP.

[Kingy]

Sorry about that, it's ran off the server so as a matter of fact it won't be as meaningful. >_>So even posting a link you won't get the full feel of it. The full running site will only return information about content, header frame and stylesheet link. Here's the page itself. I hope this helps better.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@page language="java" contentType="text/html; charset=ISO-8859-1"	pageEncoding="ISO-8859-1"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><html><head><title>DEMSDevices</title><link rel="stylesheet" type="text/css" href="theme/style.css" /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="GENERATOR" content="Rational Software Architect"><script type="text/javascript">document.onkeydown = keydown; function keydown(evt){ 	if (!evt) 	evt = event;        if(evt.keyCode == 13)        {alert("hi");        }			}			function dropdown(){(window.event.keyCode ==32);}			</script></head><body><form method="post" action="/JSP/DeviceServlet" name="DeviceConfig"><table width="100%" border="0" cellpadding="0" cellspacing="1">	<tbody>		<tr>			<td class="tableLeft">Category</td>			<td class="tableRight">            <div>            	<select name="category" id="category" onfocus="dropdown()">					<c:forEach var="category" items="${DeviceConfigBean.categories}">                        <c:choose>                       	 	<c:when test="${category == DeviceConfigBean.selCategory}">                                <option value="${category}" selected="selected" id="catmenu" onclick="submit();">${category}</option>                       		 </c:when>                       		 <c:otherwise>                                <option value="${category}" onclick="submit();" id="catmenu2">${category}</option>                       		 </c:otherwise>                        </c:choose>					</c:forEach>				</select>                </div>            </td>		</tr>		<tr>			<td class="tableLeft">Device</td>			<td class="tableRight">            	<select name="device" onchange="submit();">					<c:forEach var="device" items="${DeviceConfigBean.devices}">						<c:choose>							<c:when test="${device.key == DeviceConfigBean.selDevice}">								<option value="${device.key}" selected="selected">${device.value}</option>							</c:when>							<c:otherwise>								<option value="${device.key}">${device.value}</option>							</c:otherwise>						</c:choose>					</c:forEach>			    </select>        	</td>		</tr>	</tbody></table><c:if test="${DeviceConfigBean.deviceItems != null && DeviceConfigBean.deviceItemsSize > 0}">	<table border="2" width="100%">		<tbody>			<tr>				<td class="tableTitleLeft">Parameter Name</td>				<td class="tableTitleRight">Parameter Value</td>			</tr>			<c:forEach var="item" items="${DeviceConfigBean.deviceItems}">				<tr>					<td height="34" class="tableLeft">${item.key.localPart}</td>			  <td class="tableRight"><c:if test="${!item.value.complexity }">						<c:choose>							<c:when test="${item.value.writable}">								<input name="${item.key.namespaceURI},${item.key.localPart}"									type="text" value="${item.value.value}" onfocus="inputbox = this"/>								<input name="${item.key.namespaceURI},${item.key.localPart}_old"									type="hidden" value="${item.value.value}" onfocus="inputbox = this"/>							</c:when>							<c:otherwise>								<c:out value="${item.value.value}" />							</c:otherwise>						</c:choose>					</c:if></td>				</tr>			</c:forEach>		</tbody>	</table>	<p align="center"><input type="submit" value="Save" />  <input type="reset" value="Reset" /></p></c:if></form><br /></body></html>

[Kingy]

Is there a solution similar to this extjs one: http://extjs.com/deploy/dev/examples/form/combos.htmlThat isn't so script heavy...I mean it's not like I need a lot of options at all.You can navigate those with operas shortcuts and it'll drop when you click enter..

[justsomeguy]

You can transform an existing select with ExtJS, but you do need to include the script files.For the output, I was hoping to see the generated HTML instead of the JSP. Like for this:

				<select name="device" onchange="submit();">					<c:forEach var="device" items="${DeviceConfigBean.devices}">						<c:choose>							<c:when test="${device.key == DeviceConfigBean.selDevice}">								<option value="${device.key}" selected="selected">${device.value}</option>							</c:when>							<c:otherwise>								<option value="${device.key}">${device.value}</option>							</c:otherwise>						</c:choose>					</c:forEach>				</select>

I wanted to see the actual select element with all of its options instead of the JSP code that generates that list.

[Kingy]

Hmm yeah I noticed (concerning needing all the darn scripts).This is a bit of a silly question I will suppose but what do youy mean by getting the generated HTML to you? Because when I check the source that's what I get.If you mean the same thing without the JSP for the options and selects here's what I have. (Took the tables out of there too to show you the important stuff.

form method="post" action="/DEMSJSPFront/DeviceServlet" name="DeviceConfiguration">            	<select name="category" id="category">			                                <option value="${category}" selected="selected" onclick="submit();">${category}</option>                                <option value="${category}" onclick="submit();">${category}</option>				</select>            	<select name="device">					                                 <option value="${device.key}" selected="selected">${device.value}</option>                                <option value="${device.key}">${device.value}</option>										    </select>

For some odd reason though the extjs doesn't agree with my onclick stuff. Like I tried onclick alerts and they won't work with it either. =_=

[justsomeguy]

The code you're posting is the JSP code. The code that the browser receives from the server is only HTML, there is no JSP once the server sends the response out. The same thing with PHP or ASP, only HTML gets sent out. I'm interested in the response that the browser receives from the server, not the code that generates that response. I want to see the actual markup that the browser is getting. You would have to open the page in the browser and then go to View->Source. We would need to see the actual code that the browser is getting to figure out why something like Ext isn't working.

[Kingy]

Oh my bad, so I just got to check it on the client client said as it receives from the server. It wasn't so much that I didn't know how to look at the source, I was just looking at it from the wrong place!This was a real pain to get here because there wasn't a text editor on the other system which i'm testing as a client.And also things like hotmail will obviously interpret the source code so luckily google docs saved the day here.Also the site is usually in 2 frames so I had to go to a generated page to find this.The massive div at the bottom is the virtual keyboard btw that can be ignored.I also noticed extjs is pretty darn sensitive, so taking things out like <input type="text" id="local-states" size="20" style="visibility:hidden;"/> <input type="text" id="local-states-with-qtip" size="20" style="visibility:hidden;"/> <input type="text" id="array-states" size="20" style="visibility:hidden;"/>would affect the function of the drop down.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>DEMSDevices</title><link rel="stylesheet" type="text/css" href="theme/style.css" /><link rel="stylesheet" type="text/css" href="theme/tabstyle.css" /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="GENERATOR" content="Rational Software Architect"><script type="text/JavaScript" src="vkbscript.js"></script></head><script type="text/javascript">function setTab(index){ switch(index) {  case 1: document.DeviceTabs.seltab.value = "Todo List";  break;  case 2: document.DeviceTabs.seltab.value = "Configuration";  break;  case 3: document.DeviceTabs.seltab.value = "Service Links";  break; } document['DeviceTabs'].submit();}</script><body><br /><br /><br /><form method="post" action="DeviceServlet" name="DeviceTabs"><input name="seltab" type="hidden" value="Configuration" /><div id="tabs"><ul> <li><a href="#" title="Todo List" onclick="setTab(1)" class=""><span class="">Todo List</span></a></li> <li><a href="#" title="Configuration" onclick="setTab(2)" class="active"><span class="active">Configuration</span></a></li> <li><a href="#" title="Service Links" onclick="setTab(3)" class=""><span class="">Service Links</span></a></li></ul></div></form>   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>DEMSDevices</title><link rel="stylesheet" type="text/css" href="theme/style.css" /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="GENERATOR" content="Rational Software Architect">  <script type="text/javascript" src="ext-base.js"></script>  <!-- ENDLIBS -->  <script type="text/javascript" src="ext-all.js"></script>  <script type="text/javascript" src="states.js"></script>  <script type="text/javascript" src="combos.js"></script>  <!-- Common Styles for the examples --></head><body><script type="text/javascript" src="examples.js"></script><form method="post" action="DeviceServlet" name="DeviceConfig"><table width="100%" border="0" cellpadding="0" cellspacing="1"> <tbody>  <tr>  <td class="tableLeft">Category</td>  <td class="tableRight">  <div>  <select name="state" id="state" style="background-color:#FFFFFF;">  <option value=" " onclick="alert('World');"> </option>    <option value="Lighting" onclick="alert('World');">Lighting</option>   <option value="Sensing" selected="selected"onclick="alert('Hello');">Sensing</option>   <option value="Appliance" onclick="alert('World');">Appliance</option>  <option value="Others" onclick="alert('World');">Others</option>    </select>  </div>  </td>  </tr>  <tr>  <td class="tableLeft">Device</td>  <td class="tableRight">  <select name="device" onchange="submit();">  <option value=" "> </option>   <option value="uuid:55a807ee-f641-4a90-97bd-b790b8ae90ff" selected="selected">PIR</option>   </select>  </td>  </tr> </tbody></table> <table border="2" width="100%">  <tbody>  <tr>  <td class="tableTitleLeft">Parameter Name</td>  <td class="tableTitleRight">Parameter Value</td>  </tr>     <tr>  <td height="34" class="tableLeft">Capability</td>  <td class="tableRight">           Sensing        </td>  </tr>     <tr>  <td height="34" class="tableLeft">Name</td>  <td class="tableRight">        <input name="http://ehome.mrg.dmu.org/2008/01/Context,Name"  type="text" value="PIR" onfocus="inputbox = this"/>  <input name="http://ehome.mrg.dmu.org/2008/01/Context,Name_old"  type="hidden" value="PIR" onfocus="inputbox = this"/>           </td>  </tr>     <tr>  <td height="34" class="tableLeft">Id</td>  <td class="tableRight">           uuid:55a807ee-f641-4a90-97bd-b790b8ae90ff        </td>  </tr>     <tr>  <td height="34" class="tableLeft">Location</td>  <td class="tableRight">        <input name="http://ehome.mrg.dmu.org/2008/01/Context,Location"  type="text" value="None" onfocus="inputbox = this"/>  <input name="http://ehome.mrg.dmu.org/2008/01/Context,Location_old"  type="hidden" value="None" onfocus="inputbox = this"/>           </td>  </tr>     </tbody> </table> <p align="center"><input type="submit" value="Save" style="font-size:large;"/>  <input type="reset" value="Reset" style="font-size:large;"/></p></form><br /><div style="visibility:hidden; height: 0px;">  <input type="text" id="local-states" size="20" style="visibility:hidden;"/>  <input type="text" id="local-states-with-qtip" size="20" style="visibility:hidden;"/>  <input type="text" id="array-states" size="20" style="visibility:hidden;"/></div><br /></body></html>    <div id="floatKB2" class="floatKB2" style="position: absolute; top: 0; right: 0 ;"><div id="floatKB"><div align="right"><img src="keyboard_title.jpg" width="291" height="22" onDblClick="showHideDiv('KBlayer')"/><img src="keyboard_minmax.jpg" onClick="showHideDiv('KBlayer');"/></div></div><div id="KBlayer" style="display:none;"><div class="vkboardlay" align="center" id="vkboard"> <div class="vkbutton" onClick="vkbtype(this); namepass();" >1</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >2</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >3</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >4</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >5</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >6</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >7</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >8</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >9</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >0</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >-</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >=</div>   <div class="vkbutton" onClick="backspace(this); namepass();" id="bkspcbutton"><-</div><br /><br /> <div class="vkbutton" onClick="vkbtype(this); namepass();" >q</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >w</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >e</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >r</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >t</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >y</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >u</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >i</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >o</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >p</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >[</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >]</div><br /><br /> <div class="vkbutton" onClick="vkbtype(this); namepass();" >a</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >s</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >d</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >f</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >g</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >h</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >j</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >k</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >l</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >;</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >'</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >#</div><br /><br />  <div class="vkbutton" onClick="vkbtype(this); namepass();" >\</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >z</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >x</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >c</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >v</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >b</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >n</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >m</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >,</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >.</div> <div class="vkbutton" onClick="vkbtype(this); namepass();" >/</div><br /><br />   <div class="vkbuttonspc" onClick="vkbtype(this); namepass();" id="spacekey"> </div><br /><br /></div></div></div></body></html>

[justsomeguy]

There's a problem with the document structure, there are 2 doctypes and head sections. That's the first thing to fix. It's unpredictable what is going to happen with more than one of those. It looks like you might be including a file that is actually a complete document, when you should only be including the content of the body.

[Kingy]

Yeah I noticed that after I had a glanced through, I don't understand how that's come about, I'll have to talk to my superior because the actual structure of this page is his doing.

[Kingy]

Right I started straight from the basics from the tutorial. What done now is just simply create a couple of drop downs using the <option><select> stuff because that's what I'm interested in. My extstart.js is looking like this.

Ext.onReady(function() {	var converted = new Ext.form.ComboBox;	({    typeAhead: true,    triggerAction: 'all',    transform:'state',    width:135,    forceSelection:true});});Ext.onReady(function() {	var converted2 = new Ext.form.ComboBox;	({    typeAhead: true,    triggerAction: 'all',    transform:'state2',    width:135,    forceSelection:true});});Ext.onReady(function() {	var optionClicked = function() {alert("You clicked a option");} 	Ext.select('option').on('click', optionClicked);	});

So the combo box basically drops down the way I want it to from the button so it's accessible by keyboard. But it doesn't 'function' exactly, in the html if I use onclick alerts or like I've done above it doesn't do anything.If I change this var converted = new Ext.form.ComboBox with a ; on the end, it alters the combo box back to it's normal state but the alerts are fine. >_>Can I not retain the ability to call javascript functions in it's altered form? It seemed simple enough conceptually.[edit] In case the page itself is important.

<html><head>    <title>Introduction to Ext 2.0: Starter Page</title>        <!-- Include Ext and app-specific scripts: -->    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="../ext-all-debug.js"></script>    <script type="text/javascript" src="ExtStart.js"></script>        <!-- Include Ext stylesheets here: -->    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">    <link rel="stylesheet" type="text/css" href="ExtStart.css"></head><body>	<h1>Introduction to Ext 2.0: Starter Page</h1>    <div id="content">            	<p>This is the starter page that accompanies the <a href="http://extjs.com/learn/Tutorial:Introduction_to_Ext2">Introduction to Ext 2.0 tutorial</a> on the Ext JS website.</p>    	<p>This page is intended to help you interactively explore some of the capabilities of the Ext library, so please make sure that your script references are correct.  This page assumes by default that it is in a directory directly beneath the root Ext deployment directory.  For example, if your Ext directory structure is located at "C:\code\Ext\v1.0\," then this file should be saved in a directory like "C:\code\Ext\v1.0\tutorial\."  If you choose to locate this file somewhere else, then make sure you change the script references of this file as needed.</p>    	<p>If you have any questions or issues getting this tutorial to work correctly, please stop by the <a href="http://extjs.com/forum/">Ext Forums</a> and ask for help!</p>	    	<div id="myDiv">This is a test div.</div>	    	<input type="button" id="myButton" value="My Button" />        	</div>    <br />    <b>1st combobox</b><br />This is a test...</p><div>Transformed select:<br/> <select name="state" id="state"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH" selected>Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option> <option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></div><br /> <br />    <b>2nd One</b><br />Hope this works too</p><div>Transformed select:<br/> <select name="state2" id="state2"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO" selected>Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></div><br /></body></html>

[justsomeguy]

You do not want the semicolon after combobox, if you put a semicolon there it will ignore all of the options you set for the object and use the defaults for everything.Check the API reference for ComboBox:http://extjs.com/deploy/dev/docs/?class=Ext.form.ComboBoxScroll to the bottom to see the list of events for the ComboBox. For examples of adding event handlers, check the description of the addListener method. If you want to define the event handlers when you create the component you can use the listeners config option.

Ext.onReady(function() {  var converted = new Ext.form.ComboBox({	typeAhead: true,	triggerAction: 'all',	transform:'state',	width:135,	forceSelection:true,	listeners: {	  'click': this.combo_clicked,	  'change': this.combo_changed	}  });  function combo_clicked()  {	Ext.Msg.alert("Click", "The combo box was clicked");  }  function combo_changed(comb, newval, oldval)  {	Ext.Msg.alert("Change", comb.getItemId() + " was changed from " + oldval + " to " + newval);  }});

[Kingy]

Oh I see I'm starting to see more of extjs' logic, so I can't define the reponse like in the tutorial before and in instances like this I need addlistener.I just played around with it and there's still a little problem.If I only edit the above to add this in:listeners: {}It's fine, but the moment I put anything into it the listener it just reverts back again. *sigh* =_=Like putting in a function in the way you pointed out:listeners: { 'click': this.combo_clicked, 'change': this.combo_changed, }I googled for what people have done and it's basically built in the same way. I can't logically see from what you've posted why it would still do that. It totally makes sense. :/[edit]I tried to make it as simple as I can, but still not doing what I want it to. =_=

Ext.onReady(function() {	var converted = new Ext.form.ComboBox	({    typeAhead: true,    triggerAction: 'all',    transform:'state',    width:135,    forceSelection:true,	listeners: {         'click' : this.myFunction	            }});	  function myFunction()  {    Ext.Msg.alert("Click", "The combo box was clicked");  }});

[justsomeguy]

It's just a scope issue, if you remove the "this" from this.myFunction it should work (it can't find myFunction). This is a working example:

<!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=iso-8859-1">	<title>Ext test</title>	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">	<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-gray-extend.css">	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>	<script type="text/javascript" src="ext/ext-all-debug.js"></script>	<script type="text/javascript">	Ext.onReady(function() {	  var converted = new Ext.form.ComboBox	  ({		typeAhead: true,		triggerAction: 'all',		transform:'state',		width:135,		forceSelection:true,		listeners: {		  'click' : myFunction		}	  });	  function myFunction()	  {		Ext.Msg.alert("Click", "The combo box was clicked");	  }	}, this);	</script>  </head>  <body>	<div>	<form>	<select id="state" name="state">	  <option value="1">option 1</option>	  <option value="2">option 2</option>	  <option value="3">option 3</option>	</select>	</form>	</div>  </body></html>

I also added "this" in the call to Ext.onReady after the function to make sure it runs the code in the correct scope.

[Kingy]

Darn I copied that entire code in to test and it still isn't alerting...even after you've tested it to be fine. What on earth is going on..

[justsomeguy]

Make sure the included Javascript and CSS files are there. If you're going to be working with Ext I would also strongly recommend that you develop Ext applications using Firefox/Firebug, I literally use Firebug on a daily basis to help debug my Ext applications, it would be very difficult to track down some of the things that happen if I wasn't using a debugger.

[Kingy]

Make sure the included Javascript and CSS files are there. If you're going to be working with Ext I would also strongly recommend that you develop Ext applications using Firefox/Firebug, I literally use Firebug on a daily basis to help debug my Ext applications, it would be very difficult to track down some of the things that happen if I wasn't using a debugger.

Right thanks a lot I'll try again tomorrow. I am really determined to get this done, thanks a lot for your help so far you're a real legend. n.b. I don't want to see a drop down ever again in any form after this project. >.>

[Kingy]

I worked on firefox/firebug which I agree is incredibly useful in this, I made sure the css and js files are linked up in the correct folders, which I know is fine because the console isn't bringing up errors.Plus when I click on the + signs in the HTML tab, I can see the js and css in the drop downs it evidently it showing the codes so it's linked up correctly to the right components. But I checked it server + client side and it's still not alerting. Ideally later on I want them to just be a form submit but if I can't even alert them, then hmm.. >_>[edit]Made some serious little progress (makes sense to me >_>), I tried this way instead.

<!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=iso-8859-1">    <title>Ext test</title>    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">    <link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css">    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="../ext-all-debug.js"></script>    <script type="text/javascript">    Ext.onReady(function() {      var converted = new Ext.form.ComboBox      ({        typeAhead: true,        triggerAction: 'all',        transform:'state',        width:135,        forceSelection:true,        listeners: {          select : {		  fn:function(){alert('yay');		  }        }		}      });    });    </script>  </head>  <body>    <div>    <form>    <select id="state" name="state">      <option value="1">option 1</option>      <option value="2">option 2</option>      <option value="3">option 3</option>    </select>    </form>  </div>  </body></html>

And it has a celebratory alerts on the options I click. Just gotta try and apply submit() and see if that works with the other stuff.

[Kingy]

I put the script back into it's own external file and adapted it like so.

    Ext.onReady(function() {      var converted = new Ext.form.ComboBox      ({        typeAhead: true,        triggerAction: 'all',        transform:'category',        width:135,        forceSelection:true,        listeners: {          select : {		  fn:function(){alert('yay');		  }        }		}      });    });		    Ext.onReady(function() {      var converted = new Ext.form.ComboBox      ({        typeAhead: true,        triggerAction: 'all',        transform:'device',        width:135,        forceSelection:true,        listeners: {          select : {		  fn:function(){alert('yay returns');		  }        }		}      });    });

So I can get them to alert just fine which is now more than a journey and a half *phew* but when I change the above alerts to submit() instead it doesn't function like it used to. Is there a way which extjs uses the submit comment?Before something like <option value="${category}" selected="selected" onclick="submit();">${category}</option> would have done the trick. I'm assuming I have define it more beyond the classic submit().Also when using accessible keyboard navigation sometimes Opera highlights the entire dropped down box instead of the options, is there a way to solve this too?Since the extjs drop down is 'split into 2' when it comes to keyboard/remote navigation, if I focus on the text bit instead of the arrow and navigate down with an arrow it calls the drop down too, but then the box is highlighted instead of an option.It's not like the end of the world but no one wants an annoying interface. ^^Trying to get my head around this, this thread seems appropriate but trying to find an actual solution: http://extjs.com/forum/showthread.php?t=8397&page=4The closest thing I see it somethign to do with standardSubmit where I should declare ajax to be false or something similar but this and some solutions requires an actual form builts in extjs? O_o[edit]Tried doing this instead but it didn't work. =_= I feel the solution is close but I'm doing something foolish.

    Ext.onReady(function() {      var converted = new Ext.form.ComboBox      ({        typeAhead: true,        triggerAction: 'all',        transform:'category',        width:135,        forceSelection:true,        listeners: {          select : {		  fn:function(){alert('yay');		  }        },		handler: function() {		simple.getForm().getEl().dom.action = '/JSPFront/DeviceServlet';	        simple.getForm().getEl().dom.method = 'POST';                simple.getForm().submit();            }				}      });    });		    Ext.onReady(function() {      var converted = new Ext.form.ComboBox      ({        typeAhead: true,        triggerAction: 'all',        transform:'device',        width:135,        forceSelection:true,        listeners: {          select : {		  fn:function(){alert('yay returns');		  }        },		handler: function() {		simple.getForm().getEl().dom.action = '/JSPFront/DeviceServlet';	        simple.getForm().getEl().dom.method = 'POST';                simple.getForm().submit();            }		}      });    });

[justsomeguy]

What is the simple variable? When I use a form with Ext I create a Ext.form.FormPanel and go from there. If you want to use that and want some help setting up form panel let me know.

[Kingy]

Simple variable? You mean where it posts to?Right so you start from formpanel, see I never started from there in the first place, I thought just implementing the combobox would do the trick. In fact didn't plan to use extjs initially because I wasn't aware I'd run into a problem like before where I'd be required to resort to a JS library. *sigh*