I have an aspx page with a panel inside a form which asks the user to select an occupation for a drop down box if they select Employed or Self Employed another panel appears asking them to enter the first 3 letters of their occupation and a search button which
uses ajax to lookup the occupations and populate the drop down box with the occupations that start with the first 3 letters.
This is working fine in most browsers but in IE8 its reloading the page, hiding the occupation panel and not populating the drop down box. How do I stop this happening
The panel code is the following
<div class="quoteRow"><div class="yourDetailsQuestions"><asp:Label ID="lblEmployment" runat="server" CssClass="quoteBoldText" Text="Employment Status:" AssociatedControlID="ddlEmployment" /></div><div class="horseboxHelp"><asp:ImageButton ID="btnEmployment" runat="server" TabIndex="29" Width="20" ImageUrl="/Images/help.gif" OnClientClick="return employmentHelp()" /></div><div class="yourDetailsAnswers"><asp:DropDownList ID="ddlEmployment" runat="server" TabIndex="7" CssClass="textboxText ddlOccList" OnChange="return employment_Changed()"><asp:ListItem>Select...</asp:ListItem><asp:ListItem>Employed</asp:ListItem><asp:ListItem>Self Employed</asp:ListItem><asp:ListItem>Unemployed</asp:ListItem><asp:ListItem>Retired</asp:ListItem><asp:ListItem>Student</asp:ListItem></asp:DropDownList> </div><div class="yourDetailsValidation"><asp:RequiredFieldValidator ID="reqEmployment" runat="server" class="textboxText" ControlToValidate="ddlEmployment" Display="Dynamic" ErrorMessage="Please select your employment status." InitialValue="Select..." ValidationGroup="yourDetailsGroup" /></div></div><asp:Panel ID="panEmployment" runat="server"><div class="quoteRow"><div class="yourDetailsQuestions"><asp:Label ID="lblOcc" runat="server" CssClass="quoteBoldText" Text="Occupation:" AssociatedControlID="ddlOcc" /></div><div class="horseboxHelp"><asp:ImageButton ID="imgBtnOcc" runat="server" TabIndex="30" Width="20" ImageUrl="/Images/help.gif" OnClientClick="return occHelp()" /></div><div class="yourDetailsAnswers"><asp:Panel ID="panOcc" runat="server" DefaultButton="btnOcc"><asp:Label ID="threeletters" runat="server" CssClass="textboxText left" Text="Enter first 3 letters:" /><asp:TextBox ID="txtOcc" runat="server" TabIndex="8" CssClass="textboxText txtOccList" MaxLength="3" /><asp:Button ID="btnOcc" runat="server" TabIndex="9" Text="Search" OnClientClick="btnOcc_OnClick(); return false;" Width="60px" /><br /><asp:DropDownList ID="ddlOcc" runat="server" TabIndex="10" cssclass="textboxText ddlOccList" OnChange="return occ_Changed()"><asp:ListItem Value="Select..." >Select...</asp:ListItem></asp:DropDownList></asp:Panel></div><div class="yourDetailsValidation"><asp:CustomValidator ID="cusOcc" runat="server" CssClass="textboxText" ClientValidationFunction="Occ_ClientValidate" Display="Dynamic" ErrorMessage="Please select your occupation." ValidateEmptyText="True" ValidationGroup="yourDetailsGroup" /></div></div></asp:Panel>
The javascript ajax function is the following
function employment_Changed() {
var employmentStatus = document.getElementById("<%= ddlEmployment.ClientID %>");
var strEmploymentStatus = employmentStatus.options[employmentStatus.selectedIndex].value;
// construct the URL
var requestUrl = AjaxEnginePage + "?Action=hbEmployementStatusChanged&employmentStatus=" + encodeURIComponent(strEmploymentStatus);
CreateXMLHTTP();
// If browser supports XMLHTTPRequest object
if (XMLHTTP) {
XMLHTTP.open("GET", requestUrl, true);
XMLHTTP.send(null);
}
var panEmployment = document.getElementById("<%= panEmployment.ClientID %>");
if (strEmploymentStatus == "Employed" || strEmploymentStatus == "Self Employed") {
panEmployment.style.display = "block";
} else {
panEmployment.style.display = "none";
}
return false;
}
function btnOcc_OnClick() {
var txtOcc = document.getElementById("<%= txtOcc.ClientID %>");
var occ3Letters = txtOcc.value;
var requestUrl = AjaxEnginePage + "?Action=GetOccList&occ3Letters=" + encodeURIComponent(occ3Letters);
CreateXMLHTTP();
// If browser supports XMLHTTPRequest object
if (XMLHTTP) {
XMLHTTP.onreadystatechange = GetOccList;
XMLHTTP.open("GET", requestUrl, true);
XMLHTTP.send(null);
}
return false;
}
function GetOccList() {
if (XMLHTTP.readyState == 4) {
if (XMLHTTP.status == 200) {
SetOccDropDown(XMLHTTP.responseXML.documentElement);
}
//document.getElementById("<%= btnOcc.ClientID %>").enabled = false;
}
else {
//document.getElementById("<%= btnOcc.ClientID %>").enabled = false;
}
}
function SetOccDropDown(ClientNode) {
var ddlOcc = document.getElementById("<%= ddlOcc.ClientID %>");
var length = ddlOcc.options.length;
while (ddlOcc.options.length > 0) {
ddlOcc.remove(0);
}
var occList = ClientNode.getElementsByTagName('Occ');
for (i = 0; i < occList.length; i++) {
if (typeof occList[i].text == "undefined") {
ddlOcc.options[ddlOcc.options.length] = new Option(occList[i].textContent, occList[i].textContent);
} else {
ddlOcc.options[ddlOcc.options.length] = new Option(occList[i].text, occList[i].text);
}
}
}The c# server side ajax code is
public void GetOccList(string occ3Letters)
{
string strFunction = "GetOccList - ajaxEngineHB";
occ3Letters = general.RemoveChars(occ3Letters);
seibweb.SaveError("Got into GetOccList function value " + occ3Letters, strFunction, Request.UserHostAddress, messageGeneralType);
System.Text.StringBuilder sb = new System.Text.StringBuilder("<?xml version=\"1.0\"?>");
if (occ3Letters != "")
{
try
{
List<string> occList = seibweb.GetOccupations();
List<string> validOccList = new List<string>();
if (occ3Letters.Length == 3)
{
foreach (string occ in occList)
{
if (occ3Letters.ToLower() == occ.Substring(0, 3).ToLower())
{
validOccList.Add(occ);
}
}
if (validOccList.Count == 0)
{
foreach (string occ in occList)
{
validOccList.Add(occ);
}
}
}
else
{
foreach (string occ in occList)
{
validOccList.Add(occ);
}
}
sb.Append("<OccList>");
foreach (string occ in validOccList)
{
sb.Append("<Occ><![CDATA[" + occ + "]]></Occ>");
}
sb.Append("</OccList>");
}
catch (Exception ex)
{
seibweb.SaveError("HB Error " + ex.Message + " " + ex.StackTrace, strFunction, Request.UserHostAddress, messageErrorType);
}
}
Response.ContentType = "text/xml";
Response.Write(sb.ToString());
Response.End();
}