Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

ajax ie8 postback

$
0
0


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();
        }


Viewing all articles
Browse latest Browse all 5678

Trending Articles