Just note I did not write this code, but I do need to fix it. Was testing our app on a VISTA machine with IE7. Currently works on 2000 machine running IE6.
Basically what happens is when you click on the customer text box, a list box (in a DIV) becomes unhidden and displays all the data in the list box. You can down arrow through and up arrow and even select. However, when you try to use the scroll bar, the DIV becomes hidden again. Here is the code snippets below. Any thoughts or ideas appreciated.
ASP
<tr class="contentPart">
<td>Customer:</td>
<td>
<input type="text" name="txtCustomer" id="txtCustomer" class = "txtsmallParam"
onKeyup="CustomerKeyIn(this)" autocomplete="off" onblur="fnblur();"
onfocus="fnselect()" maxlength="70" size="70" value="Name| ARG# | PRISM#| US/CA "/>
</td>
<td width="80" align="center" valign="top">
<input type="button" id ="btnResort" name="btnResort" value="RESORT" class="buttonpart"
onclick="sort();">
</td>
</tr>
<tr class="content">
<td></td>
<td>
<%
set lrsCustRecord = CreateObject("Adodb.Recordset")
liCustomerSort = 1 'sort by customer name default
set lrsCustRecord = lcomCustMaint.GetCustomerList(lblnsort,lsUserId)
%>
<div id="divCustomerGroup" name="divCustomerGroup"
style="position:absolute; width:188px; height:98px; z-index:1;
top: 148px; visibility:hidden;">
<select class = "couriernewfont" name="cboCustomerInfo" id="cboCustomerInfo" size="5"
onclick="fnclick()" style = "width:491px;font-family:courier new"
onChange="SearchForValues()">
<option Value = "INV">Name | ARG# | PRISM# | US/CA</option>
<%
If Not lrsCustRecord.EOF Then
While Not lrsCustRecord.EOF
lsconcatvalue1 = InsertSpace(lrsCustRecord(0))
lsconcatvalue2 = trim(lrsCustRecord(1) &"")
lsconcatvalue3 = ltrim(lrsCustRecord(2) &"")
lsconcatvalue4 = trim(lrsCustRecord(3) &"")
lsConcatvalue = lsConcatvalue1 &" | "& lsConcatvalue3 &" | "& lsConcatvalue2 &" | " & lsConcatvalue4
%>
<option value=<%=lsconcatvalue2%><% If Trim(lsCustomerNo) = lsconcatvalue2 Then Response.write " Selected" End If%>><%=lsConcatvalue%></option>
<%lrsCustRecord.MoveNext
Wend
End if
Set lrsCustRecord = Nothing
%>
</select>
</div>
</td>
<td width="80" align="center" valign="top">
<input type="hidden" name="hdnSort" value=<%=lblnsort%>>
</td>
</tr>
javascript
//This function is executed when the customer group combo box is selected
function SearchForValues()
{
//submit the form to the server
var selindex;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
if (document.frmPriceExtract.cboCustomerInfo.selectedIndex >0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.hdnCustomerDefault.value = 'Y'
document.frmPriceExtract.hdndate.value = document.frmPriceExtract.txtEffDate.value;
frmPriceExtract.submit();
}
else if (document.frmPriceExtract.cboCustomerInfo.selectedIndex == 0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.txtCustomer.text = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
else
{
document.frmPriceExtract.txtAuditMsg.value = 'Please select Valid Customer';
document.frmPriceExtract.cboCustomerInfo.focus();
}
}
function CustomerKeyIn(txtVal)
{
var chkVal = txtVal.value.toUpperCase();
var i = 0;
var j,k,m,n;
var iSelIndex
m = chkVal.length;
var flg = false
var count = document.frmPriceExtract.cboCustomerInfo.length;
iSelIndex = document.frmPriceExtract.cboCustomerInfo.selectedIndex
if(event.keyCode ==13)
{
fnclick();
document.frmPriceExtract.submit();
window.focus()
return
}
//Down Arrow
if(event.keyCode == 40)
{
if(iSelIndex < count - 1)
{
iSelIndex = iSelIndex + 1
document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].selected = true
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].text
return
}
}
//Up Arrow
if(event.keyCode == 38)
{
if(iSelIndex > 0 )
{
iSelIndex = iSelIndex - 1
document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].selected = true
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].text
return
}
}
//tab Key
if(event.keyCode == 9)
{
if((iSelIndex > 0) && (iSelIndex < count))
{
var selindx;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.hdnCustomerDetail.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.txtEffDate.focus;
document.frmPriceExtract.hdnCustomerDefault.value = 'Y'
document.frmPriceExtract.submit();
return
}
else if (iSelIndex == 0 )
{
var selindx;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.hdnCustomerDetail.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.txtEffDate.focus;
return
}
}
while(i <= count-1)
{
j = document.frmPriceExtract.cboCustomerInfo.text.toUpperCase();
if(chkVal.substring(0,m) == j.substring(0,m))
{
document.frmPriceExtract.cboCustomerInfo.selectedIndex = i;
flg = true;
}
else
{
flg = false;
}
if(flg)
{
break;
}
else
{
i = i+1;
}
}
}
function fnclick()
{
var selindx;
var count = document.frmPriceExtract.cboCustomerInfo.length;
var obj;
obj = frmPriceExtract.txtCustomer.getBoundingClientRect();
divCustomerGroup.style.top = obj.top + 16;
//divCustomerGroup.style.left = obj.left - 3;
selindx = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
if((selindx > 0) && (selindx < count))
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
else if (selindx == 0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
}
function fnselect()
{
divCustomerGroup.style.visibility = "visible";
document.frmPriceExtract.txtCustomer.focus();
document.frmPriceExtract.txtCustomer.select();
}
function fnblur()
{
var selindx;
var selname;
selindx = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
count = document.frmPriceExtract.cboCustomerInfo.length;
if ((selindx > 0) && (selindx < count) || (selindx == 0))
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
}
-->
Basically what happens is when you click on the customer text box, a list box (in a DIV) becomes unhidden and displays all the data in the list box. You can down arrow through and up arrow and even select. However, when you try to use the scroll bar, the DIV becomes hidden again. Here is the code snippets below. Any thoughts or ideas appreciated.
ASP
<tr class="contentPart">
<td>Customer:</td>
<td>
<input type="text" name="txtCustomer" id="txtCustomer" class = "txtsmallParam"
onKeyup="CustomerKeyIn(this)" autocomplete="off" onblur="fnblur();"
onfocus="fnselect()" maxlength="70" size="70" value="Name| ARG# | PRISM#| US/CA "/>
</td>
<td width="80" align="center" valign="top">
<input type="button" id ="btnResort" name="btnResort" value="RESORT" class="buttonpart"
onclick="sort();">
</td>
</tr>
<tr class="content">
<td></td>
<td>
<%
set lrsCustRecord = CreateObject("Adodb.Recordset")
liCustomerSort = 1 'sort by customer name default
set lrsCustRecord = lcomCustMaint.GetCustomerList(lblnsort,lsUserId)
%>
<div id="divCustomerGroup" name="divCustomerGroup"
style="position:absolute; width:188px; height:98px; z-index:1;
top: 148px; visibility:hidden;">
<select class = "couriernewfont" name="cboCustomerInfo" id="cboCustomerInfo" size="5"
onclick="fnclick()" style = "width:491px;font-family:courier new"
onChange="SearchForValues()">
<option Value = "INV">Name | ARG# | PRISM# | US/CA</option>
<%
If Not lrsCustRecord.EOF Then
While Not lrsCustRecord.EOF
lsconcatvalue1 = InsertSpace(lrsCustRecord(0))
lsconcatvalue2 = trim(lrsCustRecord(1) &"")
lsconcatvalue3 = ltrim(lrsCustRecord(2) &"")
lsconcatvalue4 = trim(lrsCustRecord(3) &"")
lsConcatvalue = lsConcatvalue1 &" | "& lsConcatvalue3 &" | "& lsConcatvalue2 &" | " & lsConcatvalue4
%>
<option value=<%=lsconcatvalue2%><% If Trim(lsCustomerNo) = lsconcatvalue2 Then Response.write " Selected" End If%>><%=lsConcatvalue%></option>
<%lrsCustRecord.MoveNext
Wend
End if
Set lrsCustRecord = Nothing
%>
</select>
</div>
</td>
<td width="80" align="center" valign="top">
<input type="hidden" name="hdnSort" value=<%=lblnsort%>>
</td>
</tr>
javascript
//This function is executed when the customer group combo box is selected
function SearchForValues()
{
//submit the form to the server
var selindex;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
if (document.frmPriceExtract.cboCustomerInfo.selectedIndex >0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.hdnCustomerDefault.value = 'Y'
document.frmPriceExtract.hdndate.value = document.frmPriceExtract.txtEffDate.value;
frmPriceExtract.submit();
}
else if (document.frmPriceExtract.cboCustomerInfo.selectedIndex == 0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.txtCustomer.text = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
else
{
document.frmPriceExtract.txtAuditMsg.value = 'Please select Valid Customer';
document.frmPriceExtract.cboCustomerInfo.focus();
}
}
function CustomerKeyIn(txtVal)
{
var chkVal = txtVal.value.toUpperCase();
var i = 0;
var j,k,m,n;
var iSelIndex
m = chkVal.length;
var flg = false
var count = document.frmPriceExtract.cboCustomerInfo.length;
iSelIndex = document.frmPriceExtract.cboCustomerInfo.selectedIndex
if(event.keyCode ==13)
{
fnclick();
document.frmPriceExtract.submit();
window.focus()
return
}
//Down Arrow
if(event.keyCode == 40)
{
if(iSelIndex < count - 1)
{
iSelIndex = iSelIndex + 1
document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].selected = true
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].text
return
}
}
//Up Arrow
if(event.keyCode == 38)
{
if(iSelIndex > 0 )
{
iSelIndex = iSelIndex - 1
document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].selected = true
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo.options[iSelIndex].text
return
}
}
//tab Key
if(event.keyCode == 9)
{
if((iSelIndex > 0) && (iSelIndex < count))
{
var selindx;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.hdnCustomerDetail.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.txtEffDate.focus;
document.frmPriceExtract.hdnCustomerDefault.value = 'Y'
document.frmPriceExtract.submit();
return
}
else if (iSelIndex == 0 )
{
var selindx;
selindex = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
document.frmPriceExtract.txtCustomer.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.frmPriceExtract.hdnCustomerDetail.value = document.frmPriceExtract.cboCustomerInfo[selindex].text;
document.all["divCustomerGroup"].style.visibility = "hidden";
document.frmPriceExtract.txtEffDate.focus;
return
}
}
while(i <= count-1)
{
j = document.frmPriceExtract.cboCustomerInfo.text.toUpperCase();
if(chkVal.substring(0,m) == j.substring(0,m))
{
document.frmPriceExtract.cboCustomerInfo.selectedIndex = i;
flg = true;
}
else
{
flg = false;
}
if(flg)
{
break;
}
else
{
i = i+1;
}
}
}
function fnclick()
{
var selindx;
var count = document.frmPriceExtract.cboCustomerInfo.length;
var obj;
obj = frmPriceExtract.txtCustomer.getBoundingClientRect();
divCustomerGroup.style.top = obj.top + 16;
//divCustomerGroup.style.left = obj.left - 3;
selindx = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
if((selindx > 0) && (selindx < count))
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
else if (selindx == 0)
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
}
function fnselect()
{
divCustomerGroup.style.visibility = "visible";
document.frmPriceExtract.txtCustomer.focus();
document.frmPriceExtract.txtCustomer.select();
}
function fnblur()
{
var selindx;
var selname;
selindx = document.frmPriceExtract.cboCustomerInfo.selectedIndex;
count = document.frmPriceExtract.cboCustomerInfo.length;
if ((selindx > 0) && (selindx < count) || (selindx == 0))
{
selname = document.frmPriceExtract.cboCustomerInfo[selindx].text;
document.frmPriceExtract.txtCustomer.value = selname;
document.frmPriceExtract.hdnCustomerDetail.value = selname;
document.all["divCustomerGroup"].style.visibility = "hidden";
}
}
-->