Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Bob McDevitt on Dec 18, 2008 16:26
open dhtmlx forum
Another user with 'combox does not always return altered value.' issue

Hi - I've been having the same issue as Kris A reported (thanks for the great controls BTW). I've found that if I use a combo box with filtering enabled then I have to exit the combo control (eg., tab off of the control) if I type in new text rather than select a predefined value from the drop down. For example, in the following html, if you enter unique text in the Memo control (say 'DDD') and hit the Execute button with the mouse, then I get a memo must be defined alert. After clicking on the alert if I hit the execute button immediately afterward, then the new text DDD will be seen and displayed. If I enter new text (eg., EEE) and tab off of the control until I get to the execute button and press spacebar to submit then the EEE is immediately displayed. I assume it has something to do with the event ordering and trigger associated with lost_focus event or the like but haven't been able to find a solution... any help is very much appreciated! (tried in IE7, opera, and safari/win, btw).

Couple other questions/observations as well:

1) even though there are only 2 entries in the combo select, the control shows 2 additional white space rows below the defined entries - is there any way to not show those?

2) noticed a difference from the drop down options when running in a popup window vs standard select - the dhtml combobox only shows options that fall within the window while the standard select drop down options can extend beyond the window edge - assume there's nothing that can be done about this but thought I'd ask anyway,

Thanks,

-Bob

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>combo</TITLE>
<LINK href="combo_files/dhtmlxcombo.css" type="text/css" rel="stylesheet">
<SCRIPT language="javascript" type="text/javascript">
function submitOnce() {

var f = document.fndtrdbrk;
var memo;

memo = z.getActualValue();
memo = z.getActualValue();

if (memo.length == 0) {
alert('You must define a memo');
return false;
}
else {
alert(memo);
}
return false;

if (form.alreadySubmitted == "Y") {
return false;
} else {
form.alreadySubmitted = "Y";
return true;
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="100%" cellSpacing="0" cellPadding="0" width="800" border="0">
<TBODY>
<TR>
<TD vAlign="top" width="100%">
<FORM style="margin-top: 0px; margin-bottom: 0px" name="fndtrdbrk" onsubmit="return submitOnce()" method="post">
<TABLE>
<TBODY>
<TR>
<TD align="right">
<B>Memo: </B>
</TD>
<TD colSpan="3">
<SCRIPT language="javascript" src="combo_files/dhtmlxcommon.js" type="text/javascript"></SCRIPT>
<SCRIPT language="javascript" src="combo_files/dhtmlxcombo.js" type="text/javascript"></SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
window.dhx_globalImgPath="combo_files/";
</SCRIPT>

<SELECT id="MemoField" style="width: 325px" name="MemoField">
<OPTION value="" selected></OPTION>
<OPTION value="Test 01">Test 01</OPTION>
<OPTION value="Test 02">Test 02</OPTION>
</SELECT>

<SCRIPT language="javascript" type="text/javascript">
var z=dhtmlXComboFromSelect("MemoField");
z.enableFilteringMode(true);
z.setComboText("");
z.setComboValue("");
z.attachEvent("onSelectionChange",z._confirmSelection);
</SCRIPT>

<BR/>
<INPUT id="submit1" type="submit" value="Execute" name="submit1" />
<INPUT id="submit2" type="submit" value="Execute and Show Results" name="submit1" />
<INPUT onclick="javascript:popupClose();" type="button" value="Cancel" />
</form>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Answer posted by Support on Dec 19, 2008 06:52
>>is there any way to not show those? 
The height of combo defined in dhtmlxcombo.css , you can adjust such value directly through css rule

.dhx_combo_list{
  position:absolute;
  z-index:230;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid black;
  height:100px;   //<= this is it

or use optional dhtmlxcombo_whp.js extension , which adds support for the 
   combo.enableOptionAutoHeight(true);

>>2) noticed a difference from the drop down options when running in a popup window vs standard selec
The combo is a part of window, so it can't be rendered out of its borders ( but you can adjust direction of combo opening, to minimize bad effects through combo.enableOptionAutoPositioning(true); )

Answer posted by Support on Dec 19, 2008 07:05
>>with lost_focus event or the like but haven't been able to find a solution
In your case , the onclick event fire before "focus out" for the combo, so the combo has no time to updates its value. You can try to assign the next code line to the onclick event of button so it will be executed before any other logic
     <input onclick='combo._confirmSelection();'