jQuery autocomplete selection with mouse click doesn't get selected in IE. The textbox (that is inside GridView, EditItemTamplate) still post back with the typed in text box not the selected value from dropdown list in IE. It works fine in Google and Firefox.
This code is in my content page. When I type a letter in the texbox, autocomplete give me a list of options. If I use 'up' or 'down' arrow and select the option, it populate my textbox correctly. But if I choose an option with a mouse click, then it doesn't populate my textbox with the option I chose, it just posts back with whatever I typed in the textbox.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BlindKeyVerification.aspx.cs" Inherits="Test.Administration.BlindKeyVerification" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="../Styles/jquery-ui.css" rel="stylesheet" />
<link href="../Styles/jquery-ui.min.css" rel="stylesheet" />
<script src="../Scripts/jquery.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("[id*=txtGridCode]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("/Administration/priceCodeService.asmx/getPriceCodeArray") %>',
data: "{ 'priceCode': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item,
val: item.split('-')[0]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
minLength: 1
});
$("[id*=txtGridCode]").autocomplete({
select: function (event, ui) {
$this = $(this);
setTimeout(function () {
$("[id*=txtGridCode]").val(ui.item.val);
}, 1);
}
});
});
function InitializeRequest(sender, args) {
$("*").css("cursor", "wait");
}
function EndRequest(sender, args) {
$("*").css('cursor', 'auto');
}
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
//if ((evt.keyCode == 13) && (node.type == "text")) { return false; } //Stop return Key from Posting the page
if ((evt.keyCode == 8) && (node.type == "select-one")) { return false; } //dropdown box backspace stop backpage
}
document.onkeypress = stopRKey; //Firefox
document.onkeydown = stopRKey; //i.e.
</script>
Some parts of the textbox inside the GridView:
BlinkKeyVerfication.aspx
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<asp:Label ID="lblCode" runat="server" ForeColor="Red" Font-Size="Smaller">
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtGridCode" runat="server" OnTextChanged="txtGridCode_TextChanged" AutoPostBack="true"></asp:TextBox>
</EditItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
</Columns>
</asp:GridView>
priceCodeService.asmx.cs
public partial class WebForm1 : System.Web.UI.Page
{
public List<string> getPriceCodeArray(string priceCode)
{
List<string> doc = new List<string>();
string CSConn = "Server=CourtData;Initial Catalog= CourtSupport; Integrated Security = SSPI";
using (SqlConnection conn = new SqlConnection(CSConn))
{
using (SqlCommand comm = new SqlCommand("SELECT priceCode, priceText FROM tblpriceCodeExtract WHERE priceCode like @priceCode + '%'", conn))
{
SqlParameter parameter_code = new SqlParameter();
parameter_code.ParameterName = "@priceCode";
parameter_code.Value = priceCode;
comm.Parameters.Add(parameter_code);
conn.Open();
SqlDataReader rdr = comm.ExecuteReader();
while (rdr.Read())
{
//string doccode = rdr["priceCode"].ToString();
//string codetext = rdr["priceText"].ToString();
//if (codetext.Length > 30)
// codetext = codetext.Substring(0, 29) + "...";
//doc.Add(string.Format("{0}-{1}", doccode, codetext));
doc.Add(rdr["priceCode"].ToString());
}
}
}
return doc;
}
}
Because of compatibility view, my code was not working properly, our site is in compatibility view.
In my aspx content page head section I had following code, but it don't had any use because my masterpage code was blocking it
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then i removed that code from content page and I added following code in my .cs file
protected void Page_Load(object sender, EventArgs e)
{
if (Header.Controls[1].GetType() != typeof(System.Web.UI.HtmlControls.HtmlMeta))
{
System.Web.UI.HtmlControls.HtmlMeta meta = new System.Web.UI.HtmlControls.HtmlMeta();
meta.HttpEquiv = "X-UA-Compatible";
meta.Content = "IE=edge";
this.Header.Controls.AddAt(1, meta);
}
Now my code is working fine in all browser. Now I don't need any more select event in my code. so i removed it.