The problem I have when the following code executes, it will first display the original contents of the textbox, then each set of keys that I pressed up until hitting ‘Enter’. So if the textbox originally contained ‘Ice Cream – Pierre’s Chocolate Chip’ and I click in the textbox to get focus and replace it with ‘Tea’, I will get 4 alert boxes, each with the following content:
- Ice Cream – Pierre’s Chocolate Chip
- T
- Te
- Tea
And then if I click on a different row and do something else, I will get the original 4 alert boxes from before and then the new ones…it keeps stacking and I don’t know why?
Here is some code from my .cs file – note the “OnKeyPress” attribute I added:
public TCell(String celltext,String strTextBox,String strName)
{
int iWidth = 0;
int intRandom =
iWidth = Convert.ToInt32(strTextBox);
tblCell = new TableCell();
TextBox txtItem = new TextBox();
txtItem.ID = strName;
txtItem.Text = celltext;
txtItem.Width = iWidth;
txtItem.BorderStyle = BorderStyle.None;
txtItem.CssClass = "cssAdjust trans";
txtItem.Style.Add("padding", "0px 5px 0px 5px");
txtItem.Attributes.Add("onKeyPress","captureTable(this.value);");
txtItem.Attributes.Add("onFocus", "javascript:this.select();");
tblCell.Controls.Add(txtItem);
}
And then here is the function where I am displaying once the enter key is pressed:
function captureTable(strValue)
{
$(document).keypress(function (e) {
if (e.which == 13) // Enter has been pressed.
{
e.preventDefault();
document.getElementById("<%=HiddenField1.ClientID %>").value = strValue;
alert(strValue);
}
});
Thanks in advance for any help you can give me. I had this working using “window.event” but that locks me into IE from what I read and I am trying to use JQuery for this.
(UPDATE):
Ok, I used the code provided by kmb385 below, but I think I’m missing something still. I don’t get any alerts appearing, so I set a breakpoint at the ‘$(“.txtHook”).keypress(function(e){‘ line and it doesn’t reach it during key entry inside of the table text box, including the enter key.
Here is where the code resides within the default.apsx page:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function(){
$(".txtHook").keypress(function(e){
if (e.which == 13) // Enter has been pressed.
{
e.preventDefault();
document.getElementById("<%=HiddenField1.ClientID %>").value = $(this).val();
alert(strValue);
}
});
});
My inclusion of JQuery is within the body tag of the site’s master page:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
</Scripts>
</asp:ScriptManager>
(FINAL UPDATE:)
Turns out my inclusion of JQuery was incorrect. I moved it to the head tag of the master page and changed the code to read:
<script type="text/javascript" src="../scripts/jquery-1.4.1.min.js"></script>
After that, the code provided my kmb385 started to work 🙂
Your original javascript code was binding an anonymous function to the keypress event on the document, each time a key was pressed in an input you created. This resulted in multiple functions being fired each time a key was pressed anywhere on the document/page. I removed your binding to the onKeyPress event in the .cs file. Also in the cs file I added a class attribute to the textbox so I could hook into it in jquery.
In the Javascript I use the class selector in jquery to bind a function to the keypress event of each input. The function gets the value of the input and assigns it to the hidden input. There may be issues with this code because I’m not familiar with .net, if there is let me know and we can work through them. I am skeptical of the following selector but I’m guessing its a .net thing.
Javascript